@mongoosejs/studio 0.0.128 → 0.0.130

package/frontend/public/app.js

@@ -79,6 +79,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     }
   };
   exports.Model = {
+    addField(params) {
+      return client.post('', { action: 'Model.addField', ...params }).then(res => res.data);
+    },
     createChart(params) {
       return client.post('', { action: 'Model.createChart', ...params }).then(res => res.data);
     },
@@ -192,6 +195,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     }
   };
   exports.Model = {
+    addField(params) {
+      return client.post('/Model/addField', params).then(res => res.data);
+    },
     createChart: function(params) {
       return client.post('/Model/createChart', params).then(res => res.data);
     },
@@ -1527,7 +1533,54 @@ appendCSS(__webpack_require__(/*! ./document-details.css */ "./frontend/src/docu
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode'],
+  data() {
+    return {
+      searchQuery: '',
+      selectedType: '',
+      collapsedVirtuals: new Set(),
+      showAddFieldModal: false,
+      fieldData: {
+        name: '',
+        type: '',
+        value: ''
+      },
+      fieldErrors: {},
+      isSubmittingField: false,
+      fieldValueEditor: null
+    };
+  },
+  mounted() {
+    // Focus on search input when component loads
+    this.$nextTick(() => {
+      if (this.$refs.searchInput) {
+        this.$refs.searchInput.focus();
+      }
+
+      if (this.showAddFieldModal) {
+        this.initializeFieldValueEditor();
+      }
+    });
+  },
+  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();
+          });
+        }
+      }
+    }
+  },
   computed: {
     virtuals() {
       if (this.schemaPaths == null) {
@@ -1541,15 +1594,294 @@ module.exports = app => app.component('document-details', {
       const result = [];
       for (let i = 0; i < docKeys.length; i++) {
         if (!exists.includes(docKeys[i])) {
-          result.push({ name: docKeys[i], value: this.document[docKeys[i]] });
+          const isVirtual = this.virtualPaths && this.virtualPaths.includes(docKeys[i]);
+          result.push({
+            name: docKeys[i],
+            value: this.document[docKeys[i]],
+            isVirtual: isVirtual,
+            isUserAdded: !isVirtual
+          });
         }
       }
 
       return result;
+    },
+    availableTypes() {
+      if (!this.schemaPaths) return [];
+      const types = new Set();
+      this.schemaPaths.forEach(path => {
+        if (path.instance) {
+          types.add(path.instance);
+        }
+      });
+
+      // Add virtual field types to the available types
+      this.virtuals.forEach(virtual => {
+        const virtualType = this.getVirtualFieldType(virtual);
+        if (virtualType && virtualType !== 'unknown') {
+          types.add(virtualType);
+        }
+      });
+
+      return Array.from(types).sort();
+    },
+    allFieldTypes() {
+      const schemaTypes = this.availableTypes;
+      const commonTypes = ['String', 'Number', 'Boolean', 'Date', 'Array', 'Object'];
+
+      // Combine schema types with common types, avoiding duplicates
+      const allTypes = new Set([...schemaTypes, ...commonTypes]);
+      return Array.from(allTypes).sort();
+    },
+    shouldUseCodeMirror() {
+      return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
+    },
+    shouldUseDatePicker() {
+      return this.fieldData.type === 'Date';
+    },
+    filteredSchemaPaths() {
+      let paths = this.schemaPaths || [];
+
+      // Filter by search query
+      if (this.searchQuery.trim()) {
+        const query = this.searchQuery.toLowerCase();
+        paths = paths.filter(path =>
+          path.path.toLowerCase().includes(query)
+        );
+      }
+
+      // Filter by data type
+      if (this.selectedType) {
+        paths = paths.filter(path =>
+          path.instance === this.selectedType
+        );
+      }
+
+      return paths;
+    },
+    filteredVirtuals() {
+      let virtuals = this.virtuals;
+
+      // Filter by search query
+      if (this.searchQuery.trim()) {
+        const query = this.searchQuery.toLowerCase();
+        virtuals = virtuals.filter(virtual =>
+          virtual.name.toLowerCase().includes(query)
+        );
+      }
+
+      // Filter by data type
+      if (this.selectedType) {
+        virtuals = virtuals.filter(virtual => {
+          const virtualType = this.getVirtualFieldType(virtual);
+          return virtualType === this.selectedType;
+        });
+      }
+
+      return virtuals;
+    },
+    formattedJson() {
+      if (!this.document) {
+        return '{}';
+      }
+      return JSON.stringify(this.document, null, 2);
+    }
+  },
+  methods: {
+    toggleVirtualField(fieldName) {
+      if (this.collapsedVirtuals.has(fieldName)) {
+        this.collapsedVirtuals.delete(fieldName);
+      } else {
+        this.collapsedVirtuals.add(fieldName);
+      }
+    },
+    isVirtualFieldCollapsed(fieldName) {
+      return this.collapsedVirtuals.has(fieldName);
+    },
+    openAddFieldModal() {
+      this.showAddFieldModal = true;
+      this.$nextTick(() => {
+        if (this.shouldUseCodeMirror) {
+          this.initializeFieldValueEditor();
+        }
+      });
+    },
+    closeAddFieldModal() {
+      this.showAddFieldModal = false;
+      this.destroyFieldValueEditor();
+      this.resetFieldForm();
+    },
+    async addNewField(fieldData) {
+      // Emit event to parent component to handle the field addition
+      this.$emit('add-field', fieldData);
+      this.closeAddFieldModal();
+    },
+    validateFieldForm() {
+      this.fieldErrors = {};
+
+      // Validate field name
+      const trimmedName = this.fieldData.name.trim();
+      if (!trimmedName) {
+        this.fieldErrors.name = 'Field name is required';
+      } else {
+        const transformedName = this.getTransformedFieldName();
+        if (!transformedName) {
+          this.fieldErrors.name = 'Field name contains only invalid characters';
+        } else if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(transformedName)) {
+          this.fieldErrors.name = 'Field name must start with a letter, underscore, or $ and contain only letters, numbers, underscores, and $';
+        }
+      }
+
+      // Validate field type
+      if (!this.fieldData.type) {
+        this.fieldErrors.type = 'Field type is required';
+      }
+
+      // Validate field value if provided
+      if (this.fieldData.value && this.fieldData.value.trim()) {
+        if (['Object', 'Array'].includes(this.fieldData.type)) {
+          try {
+            JSON.parse(this.fieldData.value);
+          } catch (e) {
+            this.fieldErrors.value = 'Invalid JSON format for object/array type';
+          }
+        } else if (this.fieldData.type === 'Number') {
+          if (isNaN(Number(this.fieldData.value))) {
+            this.fieldErrors.value = 'Invalid number format';
+          }
+        } else if (this.fieldData.type === 'Boolean') {
+          const lowerValue = this.fieldData.value.toLowerCase();
+          if (!['true', 'false', '1', '0', 'yes', 'no'].includes(lowerValue)) {
+            this.fieldErrors.value = 'Invalid boolean value (use true/false, 1/0, yes/no)';
+          }
+        } else if (this.fieldData.type === 'Date') {
+          // Date picker provides YYYY-MM-DD format, validate it
+          const dateValue = new Date(this.fieldData.value);
+          if (isNaN(dateValue.getTime())) {
+            this.fieldErrors.value = 'Invalid date format';
+          }
+        }
+      }
+
+      return Object.keys(this.fieldErrors).length === 0;
+    },
+    parseFieldValue(value, type) {
+      if (!value || !value.trim()) {
+        return null;
+      }
+
+      switch (type) {
+        case 'Number':
+          return Number(value);
+        case 'Boolean':
+          const lowerValue = value.toLowerCase();
+          return ['true', '1', 'yes'].includes(lowerValue);
+        case 'Date':
+          // For date picker, value is already in YYYY-MM-DD format
+          return new Date(value);
+        case 'Object':
+        case 'Array':
+          return JSON.parse(value);
+        default:
+          return value;
+      }
+    },
+    async handleAddFieldSubmit() {
+      if (!this.validateFieldForm()) {
+        return;
+      }
+
+      this.isSubmittingField = true;
+
+      try {
+        const fieldData = {
+          name: this.getTransformedFieldName(),
+          type: this.fieldData.type,
+          value: this.parseFieldValue(this.fieldData.value, this.fieldData.type)
+        };
+
+        this.$emit('add-field', fieldData);
+        this.closeAddFieldModal();
+      } catch (error) {
+        console.error('Error adding field:', error);
+        this.fieldErrors.value = 'Error processing field value';
+      } finally {
+        this.isSubmittingField = false;
+      }
+    },
+    resetFieldForm() {
+      this.fieldData = {
+        name: '',
+        type: '',
+        value: ''
+      };
+      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;
+      }
+    },
+    toSnakeCase(str) {
+      return str
+        .trim()
+        .replace(/\s+/g, '_')  // Replace spaces with underscores
+        .replace(/[^a-zA-Z0-9_$]/g, '')  // Remove invalid characters
+        .replace(/^[0-9]/, '_$&')  // Prefix numbers with underscore
+        .toLowerCase();
+    },
+    getTransformedFieldName() {
+      if (!this.fieldData.name) return '';
+      return this.toSnakeCase(this.fieldData.name.trim());
+    },
+    getVirtualFieldType(virtual) {
+      const value = virtual.value;
+      if (value === null || value === undefined) {
+        return 'null';
+      }
+      if (Array.isArray(value)) {
+        return 'Array';
+      }
+      if (value instanceof Date) {
+        return 'Date';
+      }
+      if (typeof value === 'object') {
+        return 'Object';
+      }
+      if (typeof value === 'number') {
+        return 'Number';
+      }
+      if (typeof value === 'boolean') {
+        return 'Boolean';
+      }
+      if (typeof value === 'string') {
+        return 'String';
+      }
+      return 'unknown';
     }
   }
 });
 
+
 /***/ }),
 
 /***/ "./frontend/src/document-details/document-property/document-property.js":
@@ -1572,10 +1904,41 @@ module.exports = app => app.component('document-property', {
   template,
   data: function() {
     return {
-      dateType: 'picker' // picker, iso
+      dateType: 'picker', // picker, iso
+      isCollapsed: false, // Start uncollapsed by default
+      isValueExpanded: false // Track if the value is expanded
     };
   },
   props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  computed: {
+    valueAsString() {
+      const value = this.getValueForPath(this.path.path);
+      if (value == null) {
+        return String(value);
+      }
+      if (typeof value === 'object') {
+        return JSON.stringify(value, null, 2);
+      }
+      return String(value);
+    },
+    needsTruncation() {
+      // Truncate if value is longer than 200 characters
+      return this.valueAsString.length > 200;
+    },
+    displayValue() {
+      if (!this.needsTruncation || this.isValueExpanded) {
+        return this.getValueForPath(this.path.path);
+      }
+      // Return truncated value - we'll handle this in the template
+      return this.getValueForPath(this.path.path);
+    },
+    truncatedString() {
+      if (this.needsTruncation && !this.isValueExpanded) {
+        return this.valueAsString.substring(0, 200) + '...';
+      }
+      return this.valueAsString;
+    }
+  },
   methods: {
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
@@ -1596,6 +1959,9 @@ module.exports = app => app.component('document-property', {
       if (path.instance === 'Embedded') {
         return 'edit-subdocument';
       }
+      if (path.instance === 'Boolean') {
+        return 'edit-boolean';
+      }
       return 'edit-default';
     },
     getValueForPath(path) {
@@ -1611,7 +1977,14 @@ module.exports = app => app.component('document-property', {
       if (!this.document) {
         return;
       }
-      return path in this.changes ? this.changes[path] : mpath.get(path, this.document);
+      const documentValue = mpath.get(path, this.document);
+      return documentValue;
+    },
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+    toggleValueExpansion() {
+      this.isValueExpanded = !this.isValueExpanded;
     }
   }
 });
@@ -1715,13 +2088,16 @@ module.exports = app => app.component('document', {
     invalid: {},
     editting: false,
     virtuals: [],
+    virtualPaths: [],
+    mobileMenuOpen: false,
+    viewMode: 'fields',
     shouldShowConfirmModal: false,
     shouldShowDeleteModal: false,
     shouldShowCloneModal: false
   }),
   async mounted() {
     window.pageState = this;
-    const { doc, schemaPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
+    const { doc, schemaPaths, virtualPaths } = await api.Model.getDocument({ model: this.model, documentId: this.documentId });
     window.doc = doc;
     this.document = doc;
     this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
@@ -1733,6 +2109,7 @@ module.exports = app => app.component('document', {
       }
       return 0;
     }).map(key => schemaPaths[key]);
+    this.virtualPaths = virtualPaths || [];
     this.status = 'loaded';
   },
   computed: {
@@ -1744,6 +2121,9 @@ module.exports = app => app.component('document', {
         return false;
       }
       return !this.roles.includes('readonly');
+    },
+    canEdit() {
+      return this.canManipulate && this.viewMode === 'fields';
     }
   },
   methods: {
@@ -1784,6 +2164,32 @@ module.exports = app => app.component('document', {
     },
     showClonedDocument(doc) {
       this.$router.push({ path: `/model/${this.model}/document/${doc._id}` });
+    },
+    async addField(fieldData) {
+      const { doc } = await api.Model.addField({
+        model: this.model,
+        _id: this.document._id,
+        fieldName: fieldData.name,
+        fieldValue: fieldData.value
+      });
+      this.document = doc;
+
+      // Show success message
+      vanillatoast.create({
+        title: 'Field Added!',
+        text: `Field "${fieldData.name}" has been added to the document`,
+        type: 'success',
+        timeout: 3000,
+        positionClass: 'bottomRight'
+      });
+    },
+    updateViewMode(mode) {
+      this.viewMode = mode;
+      // Exit edit mode when switching to JSON view
+      if (mode === 'json' && this.editting) {
+        this.editting = false;
+        this.changes = {};
+      }
     }
   }
 });
@@ -1853,6 +2259,55 @@ module.exports = app => app.component('edit-array', {
 });
 
 
+/***/ }),
+
+/***/ "./frontend/src/edit-boolean/edit-boolean.js":
+/*!***************************************************!*\
+  !*** ./frontend/src/edit-boolean/edit-boolean.js ***!
+  \***************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./edit-boolean.html */ "./frontend/src/edit-boolean/edit-boolean.html");
+
+module.exports = app => app.component('edit-boolean', {
+  template: template,
+  props: ['value'],
+  emits: ['input'],
+  data() {
+    return {
+      selectedValue: null
+    };
+  },
+  mounted() {
+    this.selectedValue = this.value;
+  },
+  watch: {
+    value(newValue) {
+      this.selectedValue = newValue;
+    },
+    selectedValue(newValue) {
+      // Convert null/undefined to strings for proper backend serialization
+      const emitValue = this.convertValueToString(newValue);
+      this.$emit('input', emitValue);
+    }
+  },
+  methods: {
+    selectValue(value) {
+      this.selectedValue = value;
+    },
+    convertValueToString(value) {
+      // Convert null/undefined to strings for proper backend serialization
+      if (value === null) return 'null';
+      if (typeof value === 'undefined') return 'undefined';
+      return value;
+    }
+  }
+});
+
+
 /***/ }),
 
 /***/ "./frontend/src/edit-date/edit-date.js":
@@ -2710,6 +3165,34 @@ module.exports = app => app.component('models', {
         this.autocompleteTrie.bulkInsert(paths, 10);
       }
     },
+    buildDocumentFetchParams(options = {}) {
+      const params = {
+        model: this.currentModel,
+        limit
+      };
+
+      if (typeof options.skip === 'number') {
+        params.skip = options.skip;
+      }
+
+      const sortKeys = Object.keys(this.sortBy);
+      if (sortKeys.length > 0) {
+        const key = sortKeys[0];
+        if (typeof key === 'string' && key.length > 0) {
+          params.sortKey = key;
+          const direction = this.sortBy[key];
+          if (direction !== undefined && direction !== null) {
+            params.sortDirection = direction;
+          }
+        }
+      }
+
+      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
+        params.searchText = this.searchText;
+      }
+
+      return params;
+    },
     async initSearchFromUrl() {
       this.status = 'loading';
       this.query = Object.assign({}, this.$route.query); // important that this is here before the if statements
@@ -2753,13 +3236,48 @@ module.exports = app => app.component('models', {
       const before = this.searchText.slice(0, cursorPos);
       const match = before.match(/(?:\{|,)\s*([^:\s]*)$/);
       if (match && match[1]) {
-        const term = match[1].replace(/["']/g, '');
+        const token = match[1];
+        const leadingQuoteMatch = token.match(/^["']/);
+        const trailingQuoteMatch = token.length > 1 && /["']$/.test(token)
+          ? token[token.length - 1]
+          : '';
+        const term = token
+          .replace(/^["']/, '')
+          .replace(trailingQuoteMatch ? new RegExp(`[${trailingQuoteMatch}]$`) : '', '')
+          .trim();
         if (!term) {
           this.autocompleteSuggestions = [];
           return;
         }
         if (this.autocompleteTrie) {
-          this.autocompleteSuggestions = this.autocompleteTrie.getSuggestions(term, 10);
+          const primarySuggestions = this.autocompleteTrie.getSuggestions(term, 10);
+          const suggestionsSet = new Set(primarySuggestions);
+          if (Array.isArray(this.schemaPaths) && this.schemaPaths.length > 0) {
+            for (const schemaPath of this.schemaPaths) {
+              const path = schemaPath?.path;
+              if (
+                typeof path === 'string' &&
+                path.startsWith(`${term}.`) &&
+                !suggestionsSet.has(path)
+              ) {
+                suggestionsSet.add(path);
+                if (suggestionsSet.size >= 10) {
+                  break;
+                }
+              }
+            }
+          }
+          let suggestions = Array.from(suggestionsSet);
+          if (leadingQuoteMatch) {
+            const leadingQuote = leadingQuoteMatch[0];
+            suggestions = suggestions.map(suggestion => `${leadingQuote}${suggestion}`);
+          }
+          if (trailingQuoteMatch) {
+            suggestions = suggestions.map(suggestion =>
+              suggestion.endsWith(trailingQuoteMatch) ? suggestion : `${suggestion}${trailingQuoteMatch}`
+            );
+          }
+          this.autocompleteSuggestions = suggestions;
           this.autocompleteIndex = 0;
           return;
         }
@@ -2796,9 +3314,18 @@ module.exports = app => app.component('models', {
       }
       const token = match[1];
       const start = cursorPos - token.length;
-      this.searchText = this.searchText.slice(0, start) + suggestion + after;
+      let replacement = suggestion;
+      const leadingQuote = token.startsWith('"') || token.startsWith('\'') ? token[0] : '';
+      const trailingQuote = token.length > 1 && (token.endsWith('"') || token.endsWith('\'')) ? token[token.length - 1] : '';
+      if (leadingQuote && !replacement.startsWith(leadingQuote)) {
+        replacement = `${leadingQuote}${replacement}`;
+      }
+      if (trailingQuote && !replacement.endsWith(trailingQuote)) {
+        replacement = `${replacement}${trailingQuote}`;
+      }
+      this.searchText = this.searchText.slice(0, start) + replacement + after;
       this.$nextTick(() => {
-        const pos = start + suggestion.length;
+        const pos = start + replacement.length;
         input.setSelectionRange(pos, pos);
       });
       this.autocompleteSuggestions = [];
@@ -2847,15 +3374,7 @@ module.exports = app => app.component('models', {
       const container = this.$refs.documentsList;
       if (container.scrollHeight - container.clientHeight - 100 < container.scrollTop) {
         this.status = 'loading';
-        const params = {
-          model: this.currentModel,
-          sort: this.sortBy,
-          skip: this.documents.length,
-          limit
-        };
-        if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
-          params.searchText = this.searchText;
-        }
+        const params = this.buildDocumentFetchParams({ skip: this.documents.length });
         const { docs } = await api.Model.getDocuments(params);
         if (docs.length < limit) {
           this.loadedAllDocs = true;
@@ -2924,14 +3443,7 @@ module.exports = app => app.component('models', {
       let schemaPathsReceived = false;
 
       // Use async generator to stream SSEs
-      const params = {
-        model: this.currentModel,
-        sort: this.sortBy,
-        limit
-      };
-      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
-        params.searchText = this.searchText;
-      }
+      const params = this.buildDocumentFetchParams();
       for await (const event of api.Model.getDocumentsStream(params)) {
         if (event.schemaPaths && !schemaPathsReceived) {
           // Sort schemaPaths with _id first
@@ -2975,15 +3487,7 @@ module.exports = app => app.component('models', {
       let numDocsReceived = false;
 
       // Use async generator to stream SSEs
-      const params = {
-        model: this.currentModel,
-        sort: this.sortBy,
-        skip: this.documents.length,
-        limit
-      };
-      if (typeof this.searchText === 'string' && this.searchText.trim().length > 0) {
-        params.searchText = this.searchText;
-      }
+      const params = this.buildDocumentFetchParams({ skip: this.documents.length });
       for await (const event of api.Model.getDocumentsStream(params)) {
         if (event.numDocs !== undefined && !numDocsReceived) {
           this.numDocuments = event.numDocs;
@@ -3354,6 +3858,10 @@ exports.removeFromWorkspace = function removeFromWorkspace(params) {
   return client.post('/removeFromWorkspace', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id, ...params }).then(res => res.data);
 };
 
+exports.updateWorkspaceMember = function updateWorkspaceMember(params) {
+  return client.post('/updateWorkspaceMember', { workspaceId: window.MONGOOSE_STUDIO_CONFIG.workspace._id, ...params }).then(res => res.data);
+};
+
 exports.hasAPIKey = client.hasAPIKey;
 
 
@@ -3661,6 +4169,7 @@ module.exports = app => app.component('team', {
     invitations: null,
     showNewInvitationModal: false,
     showRemoveModal: null,
+    showEditModal: null,
     status: 'loading'
   }),
   async mounted() {
@@ -3682,15 +4191,60 @@ module.exports = app => app.component('team', {
     getRolesForUser(user) {
       return this.workspace.members.find(member => member.userId === user._id)?.roles ?? [];
     },
+    openEditModal(user) {
+      if (this.getRolesForUser(user).includes('owner')) {
+        return;
+      }
+
+      const roles = this.getRolesForUser(user);
+      const nonOwnerRoles = roles.filter(role => role !== 'owner');
+      const currentRole = nonOwnerRoles[0] ?? null;
+      const editableRole = currentRole ?? (this.workspace?.subscriptionTier ? 'member' : 'dashboards');
+
+      this.showEditModal = {
+        user,
+        role: editableRole,
+        originalRole: currentRole
+      };
+    },
+    closeEditModal() {
+      this.showEditModal = null;
+    },
+    async updateWorkspaceMember() {
+      if (this.showEditModal.role === this.showEditModal.originalRole) {
+        this.closeEditModal();
+        return;
+      }
+
+      const { workspace, users } = await mothership.updateWorkspaceMember({
+        userId: this.showEditModal.user._id,
+        roles: [this.showEditModal.role]
+      });
+
+      this.workspace = workspace;
+      this.users = users;
+      this.closeEditModal();
+    },
     async removeFromWorkspace() {
       const { workspace, users } = await mothership.removeFromWorkspace({ userId: this.showRemoveModal._id });
       this.workspace = workspace;
       this.users = users;
-      this.showRemoveModal = false;
+      this.showRemoveModal = null;
     },
     async getWorkspaceCustomerPortalLink() {
       const { url } = await mothership.getWorkspaceCustomerPortalLink();
       window.open(url, '_self');
+    },
+    disableRoleOption(option) {
+      if (this.workspace?.subscriptionTier) {
+        return false;
+      }
+
+      if (this.showEditModal?.originalRole === option) {
+        return false;
+      }
+
+      return option !== 'dashboards';
     }
   }
 });
@@ -3871,6 +4425,9 @@ var map = {
 	"./edit-array/edit-array.css": "./frontend/src/edit-array/edit-array.css",
 	"./edit-array/edit-array.html": "./frontend/src/edit-array/edit-array.html",
 	"./edit-array/edit-array.js": "./frontend/src/edit-array/edit-array.js",
+	"./edit-boolean/edit-boolean": "./frontend/src/edit-boolean/edit-boolean.js",
+	"./edit-boolean/edit-boolean.html": "./frontend/src/edit-boolean/edit-boolean.html",
+	"./edit-boolean/edit-boolean.js": "./frontend/src/edit-boolean/edit-boolean.js",
 	"./edit-date/edit-date": "./frontend/src/edit-date/edit-date.js",
 	"./edit-date/edit-date.html": "./frontend/src/edit-date/edit-date.html",
 	"./edit-date/edit-date.js": "./frontend/src/edit-date/edit-date.js",
@@ -4808,7 +5365,7 @@ module.exports = "<div>\n  {{value}}\n</div>";
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .value {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n\n.document-details .path-key {\n  background-color: #f0f0f0;\n  margin-bottom: 0.5em;\n}\n\n.document-details .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}\n\n.document-details .date-position {\n  float: right;\n  margin-top: -7px;\n}";
+module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .value {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n\n.document-details .path-key {\n  background-color: #f0f0f0;\n  margin-bottom: 0.5em;\n}\n\n.document-details .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}\n\n.document-details .date-position {\n  float: right;\n  margin-top: -7px;\n}\n\n/* Add Field Modal Styles */\n.add-field-modal {\n  max-width: 500px;\n  width: 100%;\n}\n\n.add-field-modal .modal-exit {\n  position: absolute;\n  top: 15px;\n  right: 20px;\n  font-size: 24px;\n  cursor: pointer;\n  color: #6b7280;\n  z-index: 10;\n}\n\n.add-field-modal .modal-exit:hover {\n  color: #374151;\n}\n\n.add-field-modal form {\n  max-height: 70vh;\n  overflow-y: auto;\n}\n\n.add-field-modal input[type=\"text\"],\n.add-field-modal input[type=\"email\"],\n.add-field-modal input[type=\"password\"],\n.add-field-modal select,\n.add-field-modal textarea {\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.add-field-modal input:focus,\n.add-field-modal select:focus,\n.add-field-modal textarea:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.add-field-modal .border-red-500 {\n  border-color: #ef4444 !important;\n}\n\n.add-field-modal .border-red-500:focus {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;\n}\n\n/* CodeMirror styling in modal */\n.add-field-modal .CodeMirror {\n  border: 1px solid #d1d5db;\n  border-radius: 0.375rem;\n  font-size: 14px;\n  height: auto;\n  min-height: 100px;\n}\n\n.add-field-modal .CodeMirror:focus-within {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.add-field-modal .CodeMirror.CodeMirror-focused {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* JSON View Styles */\n.json-view {\n  width: 100%;\n}\n\n.json-view pre {\n  margin: 0;\n  max-height: 70vh;\n  overflow: auto;\n  line-height: 1.5;\n}\n\n.json-view pre::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.json-view pre::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 4px;\n}\n\n.json-view pre::-webkit-scrollbar-thumb {\n  background: #888;\n  border-radius: 4px;\n}\n\n.json-view pre::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}";
 
 /***/ }),
 
@@ -4819,7 +5376,7 @@ module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .v
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document-details\">\n  <div v-for=\"path in schemaPaths\" class=\"value\">\n    <document-property\n      :path=\"path\"\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-property>\n  </div>\n  <div v-for=\"path in virtuals\" class=\"mb-2\">\n    <div class=\"p-1 mb-1 bg-slate-100\">\n      {{path.name}}\n      <span class=\"path-type\">\n        (virtual)\n      </span>\n    </div>\n    <div v-if=\"path.value == null\" class=\"text-sky-800\">\n      {{'' + path.value}}\n    </div>\n    <div v-else>\n      {{path.value}}\n    </div>\n  </div>\n</div>";
+module.exports = "<div class=\"document-details\">\n  <!-- View Toggle and Search/Filter Bar -->\n  <div class=\"mb-4 mt-4\">\n\n    <!-- Search and Filter Bar (only show in fields view) -->\n    <div v-if=\"viewMode === 'fields'\" class=\"flex md:gap-3\">\n      <!-- Search Bar -->\n      <div class=\"relative flex-1\">\n        <input\n          ref=\"searchInput\"\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Search fields...\"\n          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\"\n        />\n        <div class=\"absolute inset-y-0 left-0 flex items-center pl-3\">\n          <svg class=\"w-4 h-4 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Data Type Filter -->\n      <div class=\"relative\">\n        <select\n          v-model=\"selectedType\"\n          class=\"hidden md:block 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\"\n        >\n          <option value=\"\">All Types</option>\n          <option v-for=\"type in availableTypes\" :key=\"type\" :value=\"type\">\n            {{type}}\n          </option>\n        </select>\n        <div class=\"absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none\">\n          <svg class=\"w-4 h-4 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Add Field Button -->\n      <button\n        @click=\"openAddFieldModal\"\n        class=\"hidden md:block px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center gap-2\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"></path>\n        </svg>\n        Add Field\n      </button>\n    </div>\n  </div>\n\n  <!-- Fields View -->\n  <div v-if=\"viewMode === 'fields'\">\n    <!-- Schema Paths -->\n    <div v-for=\"path in filteredSchemaPaths\" :key=\"path\" class=\"value\">\n      <document-property\n        :path=\"path\"\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"></document-property>\n    </div>\n\n    <!-- Virtual Fields -->\n    <div v-for=\"path in filteredVirtuals\" class=\"border border-gray-200 rounded-lg mb-2\">\n    <!-- Virtual Field Header (Always Visible) -->\n    <div\n      @click=\"toggleVirtualField(path.name)\"\n      class=\"p-3 bg-slate-50 hover:bg-slate-100 cursor-pointer flex items-center justify-between border-b border-gray-200\"\n    >\n      <div class=\"flex items-center\">\n        <svg\n          :class=\"isVirtualFieldCollapsed(path.name) ? 'rotate-0' : 'rotate-90'\"\n          class=\"w-4 h-4 text-gray-500 mr-2 transition-transform duration-200\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n        </svg>\n        <span class=\"font-medium text-gray-900\">{{path.name}}</span>\n        <span v-if=\"path.isVirtual\" class=\"ml-2 text-sm text-purple-600\">(virtual - {{getVirtualFieldType(path)}})</span>\n        <span v-else class=\"ml-2 text-sm text-blue-600\">(user-added - {{getVirtualFieldType(path)}})</span>\n      </div>\n    </div>\n\n    <!-- Virtual Field Content (Collapsible) -->\n    <div v-if=\"!isVirtualFieldCollapsed(path.name)\" class=\"p-3\">\n      <div v-if=\"path.value == null\" class=\"text-sky-800\">\n        {{'' + path.value}}\n      </div>\n      <div v-else>\n        {{path.value}}\n      </div>\n    </div>\n  </div>\n\n    <!-- No Results Message -->\n    <div v-if=\"searchQuery && filteredSchemaPaths.length === 0 && filteredVirtuals.length === 0\" class=\"text-center py-8 text-gray-500\">\n      <svg class=\"w-12 h-12 mx-auto mb-4 text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <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>\n      </svg>\n      <p>No fields found matching \"{{searchQuery}}\"</p>\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  <div v-if=\"viewMode === 'json'\" class=\"json-view\">\n    <div class=\"border border-gray-300 rounded-lg bg-gray-50 p-4 overflow-auto\">\n      <pre class=\"text-sm font-mono text-gray-800 whitespace-pre\">{{formattedJson}}</pre>\n    </div>\n  </div>\n\n  <!-- Add Field Modal -->\n  <modal v-if=\"showAddFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"closeAddFieldModal\">&times;</div>\n      <div class=\"add-field-modal\">\n        <div class=\"mb-6\">\n          <h2 class=\"text-xl font-semibold text-gray-900 mb-2\">Add New Field</h2>\n          <p class=\"text-sm text-gray-600\">Create a new field for this document</p>\n        </div>\n\n        <form @submit.prevent=\"handleAddFieldSubmit\" class=\"space-y-4\">\n          <!-- Field Name -->\n          <div>\n            <label for=\"fieldName\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Field Name *\n            </label>\n            <input\n              id=\"fieldName\"\n              v-model=\"fieldData.name\"\n              type=\"text\"\n              required\n              placeholder=\"Enter field name...\"\n              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\"\n              :class=\"{ 'border-red-500': fieldErrors.name }\"\n            />\n            <p v-if=\"fieldErrors.name\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.name}}</p>\n            <p v-if=\"fieldData.name && getTransformedFieldName() !== fieldData.name.trim()\" class=\"mt-1 text-sm text-blue-600\">\n              Field name will be: <code class=\"bg-blue-50 px-1 py-0.5 rounded text-xs\">{{getTransformedFieldName()}}</code>\n            </p>\n          </div>\n\n          <!-- Field Type -->\n          <div>\n            <label for=\"fieldType\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Field Type *\n            </label>\n            <select\n              id=\"fieldType\"\n              v-model=\"fieldData.type\"\n              required\n              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\"\n              :class=\"{ 'border-red-500': fieldErrors.type }\"\n            >\n              <option value=\"\">Select field type...</option>\n              <option v-for=\"type in allFieldTypes\" :key=\"type\" :value=\"type\">\n                {{type}}\n              </option>\n            </select>\n            <p v-if=\"fieldErrors.type\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.type}}</p>\n          </div>\n\n          <!-- Field Value -->\n          <div>\n            <label for=\"fieldValue\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Initial Value\n            </label>\n\n            <!-- Date picker for Date type -->\n            <input\n              v-if=\"shouldUseDatePicker\"\n              v-model=\"fieldData.value\"\n              type=\"date\"\n              id=\"fieldValue\"\n              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\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            />\n\n            <!-- Simple input for basic types -->\n            <input\n              v-else-if=\"!shouldUseCodeMirror\"\n              v-model=\"fieldData.value\"\n              type=\"text\"\n              id=\"fieldValue\"\n              placeholder=\"Enter initial value (optional)...\"\n              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\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            />\n\n            <!-- CodeMirror textarea for complex types -->\n            <textarea\n              v-else\n              ref=\"fieldValueEditor\"\n              id=\"fieldValue\"\n              rows=\"3\"\n              placeholder=\"Enter initial value (optional)...\"\n              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\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            ></textarea>\n\n            <p v-if=\"fieldErrors.value\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.value}}</p>\n            <p class=\"mt-1 text-xs text-gray-500\">\n              <span v-if=\"shouldUseDatePicker\">Select a date or leave empty for null/undefined values.</span>\n              <span v-else-if=\"shouldUseCodeMirror\">Leave empty for null/undefined values. Use valid JSON format.</span>\n              <span v-else>Leave empty for null/undefined values.</span>\n            </p>\n          </div>\n\n\n          <!-- Action Buttons -->\n          <div class=\"flex justify-end gap-3 pt-4 border-t border-gray-200\">\n            <button\n              type=\"button\"\n              @click=\"closeAddFieldModal\"\n              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\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"submit\"\n              :disabled=\"isSubmittingField\"\n              class=\"px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <span v-if=\"isSubmittingField\">Adding...</span>\n              <span v-else>Add Field</span>\n            </button>\n          </div>\n        </form>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -4830,7 +5387,7 @@ module.exports = "<div class=\"document-details\">\n  <div v-for=\"path in schem
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-details .value {\n    padding-top: 10px;\n    padding-bottom: 10px;\n  }\n  \n  .document-details .path-key {\n    background-color: #f0f0f0;\n    margin-bottom: 0.5em;\n  }\n  \n  .document-details .path-type {\n    color: rgba(0,0,0,.36);\n    font-size: 0.8em;\n  }\n  \n  .document-details .date-position {\n    float: right;\n    margin-top: -7px;\n  }";
+module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-details .value {\n    padding-top: 10px;\n    padding-bottom: 10px;\n  }\n  \n  .document-details .path-key {\n    background-color: #f0f0f0;\n    margin-bottom: 0.5em;\n  }\n  \n  .document-details .path-type {\n    color: rgba(0,0,0,.36);\n    font-size: 0.8em;\n  }\n  \n  .document-details .date-position {\n    float: right;\n    margin-top: -7px;\n  }\n\n  .truncated-value-container,\n  .expanded-value-container {\n    position: relative;\n  }\n\n  .truncated-value-container button,\n  .expanded-value-container button {\n    transition: all 0.2s ease;\n  }\n\n  .truncated-value-container button:hover,\n  .expanded-value-container button:hover {\n    transform: translateX(2px);\n  }";
 
 /***/ }),
 
@@ -4841,7 +5398,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n  <div class=\"relative path-key p-1 flex\">\n    <div class=\"grow flex justify-between items-center\">\n      <div>\n        {{path.path}}\n        <span class=\"path-type\">\n          ({{(path.instance || 'unknown').toLowerCase()}})\n        </span>\n      </div>\n      <div>\n        <router-link\n          v-if=\"path.ref && getValueForPath(path.path)\"\n          :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n          class=\"bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm mr-1 rounded-md\"\n          >View Document\n        </router-link>\n      </div>\n    </div>\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n  </div>\n  <div v-if=\"editting && path.path !== '_id'\" class=\"pl-1\">\n    <component\n      :is=\"getEditComponentForPath(path)\"\n      :value=\"getEditValueForPath(path)\"\n      :format=\"dateType\"\n      @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n      @error=\"invalid[path.path] = $event;\"\n      >\n    </component>\n  </div>\n  <div v-else class=\"pl-1\">\n    <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n  </div>\n</div>\n";
+module.exports = "<div class=\"border border-gray-200 rounded-lg mb-2\">\n  <!-- Collapsible Header -->\n  <div \n    @click=\"toggleCollapse\"\n    class=\"p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200\"\n  >\n    <div class=\"flex items-center\">\n      <svg \n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-gray-500 mr-2 transition-transform duration-200\"\n        fill=\"none\" \n        stroke=\"currentColor\" \n        viewBox=\"0 0 24 24\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n      </svg>\n      <span class=\"font-medium text-gray-900\">{{path.path}}</span>\n      <span class=\"ml-2 text-sm text-gray-500\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <router-link\n        v-if=\"path.ref && getValueForPath(path.path)\"\n        :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n        class=\"bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n  \n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-3\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n    \n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <component\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        @input=\"changes[path.path] = $event; delete invalid[path.path];\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->\n      <div v-if=\"needsTruncation && !isValueExpanded\" class=\"truncated-value-container\">\n        <div class=\"text-gray-700 whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button \n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"expanded-value-container\">\n        <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n        <button \n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <div v-else>\n        <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -4874,7 +5431,7 @@ module.exports = "<div>\n    <h2>\n        Are you sure you want to delete the f
 /***/ ((module) => {
 
 "use strict";
-module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-top: 25px;\n}\n\n.document .document-menu {\n  display: flex;\n}\n\n.document .document-menu .left {\n  flex-grow: 1;\n}\n\n.document .document-menu .right {\n  flex-grow: 1;\n  text-align: right;\n}\n\n.document .document-menu .right button:not(:last-child) {\n  margin-right: 0.5em;\n}\n\n.document button img {\n  height: 1em;\n}";
+module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-top: 25px;\n}\n\n.document .document-menu {\n  display: flex;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  background-color: white;\n  border-radius: 5px;\n  padding: 15px 15px;\n  margin: -15px 0 15px 0;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.document .document-menu .left {\n  flex-grow: 1;\n}\n\n.document .document-menu .right {\n  flex-grow: 1;\n  text-align: right;\n}\n\n.document .document-menu .right button:not(:last-child) {\n  margin-right: 0.5em;\n}\n\n.document button img {\n  height: 1em;\n}";
 
 /***/ }),
 
@@ -4885,7 +5442,7 @@ module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  mar
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button\n        @click=\"$router.push('/model/' + this.model)\"\n        class=\"rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        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\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"shouldShowDeleteModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n      <button\n        @click=\"shouldShowCloneModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-pink-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/duplicate.svg\" class=\"inline\" /> Clone\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowDeleteModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n        <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowCloneModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n          <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n      </template>\n    </modal>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document px-1 md:px-0\">\n  <div class=\"flex justify-between\">\n    <div class=\"flex\">\n      <button\n        @click=\"$router.push('/model/' + this.model)\"\n        class=\"mr-2 rounded-md bg-gray-400 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &lsaquo; Back\n      </button>\n      <button\n        @click=\"viewMode = 'fields'\"\n        :class=\"viewMode === 'fields'\n          ? 'bg-blue-600 text-white z-10'\n          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n        class=\"px-4 py-2 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\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n        </svg>\n        Fields\n      </button>\n      <button\n        @click=\"viewMode = 'json'\"\n        :class=\"viewMode === 'json'\n          ? 'bg-blue-600 text-white z-10'\n          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n        class=\"px-4 py-2 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\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n        </svg>\n        JSON\n      </button>\n    </div>\n\n    <div class=\"gap-2 hidden md:flex\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        :disabled=\"!canEdit\"\n        :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n        type=\"button\"\n        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\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"shouldShowDeleteModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n      <button\n        @click=\"shouldShowCloneModal=true;\"\n        :disabled=\"!canManipulate\"\n        :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n        type=\"button\"\n        class=\"rounded-md bg-pink-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/duplicate.svg\" class=\"inline\" /> Clone\n      </button>\n    </div>\n    <div class=\"md:hidden flex items-center\">\n      <div class=\"relative\">\n        <button\n          @click=\"mobileMenuOpen = !mobileMenuOpen\"\n          type=\"button\"\n          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\"\n          aria-expanded=\"mobileMenuOpen\"\n          aria-label=\"Open menu\"\n        >\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M4 6h16M4 12h16M4 18h16\"></path>\n          </svg>\n        </button>\n        <div\n          v-show=\"mobileMenuOpen\"\n          @click.away=\"mobileMenuOpen = false\"\n          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\"\n        >\n          <div class=\"py-1 flex flex-col\">\n            <button\n              v-if=\"!editting\"\n              @click=\"editting = true; mobileMenuOpen = false\"\n              :disabled=\"!canEdit\"\n              :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']\"\n              type=\"button\"\n            >\n              <img src=\"images/edit.svg\" class=\"inline mr-2\" /> Edit\n            </button>\n            <button\n              v-if=\"editting\"\n              @click=\"editting = false; mobileMenuOpen = false\"\n              type=\"button\"\n              class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n            >\n              &times; Cancel\n            </button>\n            <button\n              v-if=\"editting\"\n              :disabled=\"!canManipulate\"\n              :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n              @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n              type=\"button\"\n            >\n              <img src=\"images/save.svg\" class=\"inline mr-2\" /> Save\n            </button>\n            <button\n              @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n              :disabled=\"!canManipulate\"\n              :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n              type=\"button\"\n            >\n              <img src=\"images/delete.svg\" class=\"inline mr-2\" /> Delete\n            </button>\n            <button\n              @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n              :disabled=\"!canManipulate\"\n              :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n              type=\"button\"\n            >\n              <img src=\"images/duplicate.svg\" class=\"inline mr-2\" /> Clone\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :virtualPaths=\"virtualPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"\n      :viewMode=\"viewMode\"\n      @add-field=\"addField\"\n      @view-mode-change=\"updateViewMode\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowDeleteModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n        <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowCloneModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n          <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n      </template>\n    </modal>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -4911,6 +5468,17 @@ module.exports = "<div class=\"edit-array\">\n  <textarea\n    ref=\"arrayEditor
 
 /***/ }),
 
+/***/ "./frontend/src/edit-boolean/edit-boolean.html":
+/*!*****************************************************!*\
+  !*** ./frontend/src/edit-boolean/edit-boolean.html ***!
+  \*****************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"edit-boolean\">\n  <div class=\"flex flex-wrap gap-2\">\n    <label class=\"flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50\" \n           :class=\"selectedValue === true ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'\">\n      <input\n        type=\"radio\"\n        :checked=\"selectedValue === true\"\n        @change=\"selectValue(true)\"\n        class=\"w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500\"\n      />\n      <span class=\"text-sm font-medium\">true</span>\n    </label>\n    \n    <label class=\"flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50\"\n           :class=\"selectedValue === false ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'\">\n      <input\n        type=\"radio\"\n        :checked=\"selectedValue === false\"\n        @change=\"selectValue(false)\"\n        class=\"w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500\"\n      />\n      <span class=\"text-sm font-medium\">false</span>\n    </label>\n    \n    <label class=\"flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50\"\n           :class=\"selectedValue === null ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'\">\n      <input\n        type=\"radio\"\n        :checked=\"selectedValue === null\"\n        @change=\"selectValue(null)\"\n        class=\"w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500\"\n      />\n      <span class=\"text-sm font-medium\">null</span>\n    </label>\n    \n    <label class=\"flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50\"\n           :class=\"selectedValue === undefined ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'\">\n      <input\n        type=\"radio\"\n        :checked=\"selectedValue === undefined\"\n        @change=\"selectValue(undefined)\"\n        class=\"w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500\"\n      />\n      <span class=\"text-sm font-medium\">undefined</span>\n    </label>\n  </div>\n</div>\n";
+
+/***/ }),
+
 /***/ "./frontend/src/edit-date/edit-date.html":
 /*!***********************************************!*\
   !*** ./frontend/src/edit-date/edit-date.html ***!
@@ -5171,7 +5739,7 @@ module.exports = ".active {\n  text-decoration: underline;\n}\n\n.navbar .nav-le
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]\">\n  <div class=\"flex items-center gap-4 h-full pl-4\">\n    <router-link :to=\"{ name: defaultRoute }\">\n      <img src=\"images/logo.svg\" class=\"h-[32px] mr-1\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!state.nodeEnv\" title=\"NODE_ENV\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"h-full pr-4 hidden md:block\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <span v-else class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium text-gray-300 cursor-not-allowed\" aria-disabled=\"true\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Chat</a>\n      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 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-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-10 top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span v-else class=\"block px-4 py-2 text-sm text-gray-300 cursor-not-allowed\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"md:hidden flex items-center\">\n    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->\n    <button type=\"button\" id=\"open-mobile-menu\" class=\"-ml-2 rounded-md p-2 pr-4 text-gray-400\">\n      <span class=\"sr-only\">Open menu</span>\n      <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Mobile menu mask -->\n  <div id=\"mobile-menu-mask\" class=\"fixed inset-0 bg-black bg-opacity-40 z-40 hidden\"></div>\n  <!-- Mobile menu drawer -->\n  <div id=\"mobile-menu\" class=\"fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col\">\n    <div class=\"flex items-center justify-between px-4 !h-[55px] border-b border-gray-200\">\n      <router-link :to=\"{ name: defaultRoute }\">\n        <img src=\"images/logo.svg\" class=\"h-[32px]\" alt=\"Mongoose Studio Logo\" />\n      </router-link>\n      <button type=\"button\" id=\"close-mobile-menu\" class=\"text-gray-400 p-2 rounded-md\">\n        <span class=\"sr-only\">Close menu</span>\n        <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n    <nav class=\"flex-1 px-4 py-4 space-y-2\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Documents</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Dashboards</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Chat</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <div v-if=\"!user && hasAPIKey\" class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"w-full rounded bg-ultramarine-600 px-3 py-2 text-base 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-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"mt-4\">\n        <div class=\"flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md\">\n          <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          <span class=\"text-gray-900 font-medium\">{{ user.name }}</span>\n        </div>\n        <div class=\"mt-2 space-y-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100\">Team</router-link>\n          <span v-else class=\"block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100 cursor-pointer\">Sign out</span>\n        </div>\n      </div>\n    </nav>\n  </div>\n</div>\n";
+module.exports = "<div class=\"navbar w-full bg-gray-50 flex justify-between border-b border-gray-200 !h-[55px]\">\n  <div class=\"flex items-center gap-4 h-full pl-4\">\n    <router-link :to=\"{ name: defaultRoute }\">\n      <img src=\"images/logo.svg\" class=\"h-[32px] mr-1\" alt=\"Mongoose Studio Logo\" />\n    </router-link>\n    <div v-if=\"!!state.nodeEnv\" title=\"NODE_ENV\" class=\"inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-900\" :class=\"warnEnv ? 'bg-red-300' : 'bg-yellow-300'\">\n      {{state.nodeEnv}}\n    </div>\n  </div>\n  <div class=\"h-full pr-4 hidden md:block\">\n    <div class=\"sm:ml-6 sm:flex sm:space-x-8 h-full\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium\"\n        :class=\"documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Documents</a>\n      <span v-else class=\"inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium text-gray-300 cursor-not-allowed\" aria-disabled=\"true\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Dashboards</a>\n      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium\"\n        :class=\"chatView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'\">Chat</a>\n      <span v-else class=\"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n\n      <div class=\"h-full flex items-center\" v-if=\"!user && hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"rounded bg-ultramarine-600 px-2 py-2 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-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"h-full flex items-center relative\" v-clickOutside=\"hideFlyout\">\n        <div>\n          <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n            <span class=\"absolute -inset-1.5\"></span>\n            <span class=\"sr-only\">Open user menu</span>\n            <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          </button>\n        </div>\n\n        <div v-if=\"showFlyout\" class=\"absolute right-0 z-[100] top-[90%] w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"user-menu-button\" tabindex=\"-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n          <span v-else class=\"block px-4 py-2 text-sm text-gray-300 cursor-not-allowed\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-ultramarine-200\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"md:hidden flex items-center\">\n    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->\n    <button type=\"button\" id=\"open-mobile-menu\" class=\"-ml-2 rounded-md p-2 pr-4 text-gray-400\">\n      <span class=\"sr-only\">Open menu</span>\n      <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Mobile menu mask -->\n  <div id=\"mobile-menu-mask\" class=\"fixed inset-0 bg-black bg-opacity-40 z-40 hidden\"></div>\n  <!-- Mobile menu drawer -->\n  <div id=\"mobile-menu\" class=\"fixed inset-0 bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col\">\n    <div class=\"flex items-center justify-between px-4 !h-[55px] border-b border-gray-200\">\n      <router-link :to=\"{ name: defaultRoute }\">\n        <img src=\"images/logo.svg\" class=\"h-[32px]\" alt=\"Mongoose Studio Logo\" />\n      </router-link>\n      <button type=\"button\" id=\"close-mobile-menu\" class=\"text-gray-400 p-2 rounded-md\">\n        <span class=\"sr-only\">Close menu</span>\n        <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n    <nav class=\"flex-1 px-4 py-4 space-y-2\">\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"documentView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Documents</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"dashboardView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Dashboards</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat')\"\n        href=\"#/chat\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"chatView ? 'text-ultramarine-700 bg-ultramarine-100' : 'text-gray-700 hover:bg-gray-100'\">Chat</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n      <div v-if=\"!user && hasAPIKey\" class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"w-full rounded bg-ultramarine-600 px-3 py-2 text-base 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-ultramarine-600\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"mt-4\">\n        <div class=\"flex items-center gap-3 px-3 py-2 bg-gray-50 rounded-md\">\n          <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          <span class=\"text-gray-900 font-medium\">{{ user.name }}</span>\n        </div>\n        <div class=\"mt-2 space-y-1\">\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100\">Team</router-link>\n          <span v-else class=\"block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path fill-rule=\"evenodd\" d=\"M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z\" clip-rule=\"evenodd\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"block px-3 py-2 rounded-md text-base text-gray-700 hover:bg-ultramarine-100 cursor-pointer\">Sign out</span>\n        </div>\n      </div>\n    </nav>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -5204,7 +5772,7 @@ module.exports = "<div class=\"p-1\">\n  <form class=\"space-y-4\">\n    <div cl
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"mx-auto max-w-5xl py-6 px-2 flex flex-col gap-8\">\n  <div>\n    <div class=\"text-xl font-bold\">\n      Subscription Details\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <div v-else-if=\"workspace && workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}\n      </div>\n      <div>\n        <async-button\n          type=\"submit\"\n          @click=\"getWorkspaceCustomerPortalLink\"\n          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\">\n          View in Stripe\n          <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\">\n            <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\" />\n          </svg>\n        </async-button>\n      </div>\n    </div>\n    <div v-else-if=\"workspace && !workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">No active subscription</span>\n        <div class=\"text-sm text-gray-700\">\n          You won't be able to invite your team until you activate a subscription\n        </div>\n      </div>\n      <div>\n        <a\n          :href=\"paymentLink\"\n          target=\"_blank\"\n          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\">\n          Subscribe With Stripe\n          <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\">\n            <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\" />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-xl font-bold\">\n      Current Members\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <ul v-else role=\"list\" class=\"divide-y divide-gray-100\">\n      <li class=\"flex justify-between gap-x-6 py-5\" v-for=\"user in users\">\n        <div class=\"flex min-w-0 gap-x-4\">\n          <img class=\"size-12 flex-none rounded-full bg-gray-50\" :src=\"user.picture ?? 'images/logo.svg'\" alt=\"\">\n          <div class=\"min-w-0 flex-auto\">\n            <p class=\"text-sm/6 font-semibold text-gray-900\">\n              {{user.name || user.githubUsername}}\n              <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>\n            </p>\n            <p class=\"mt-1 truncate text-xs/5 text-gray-500\">{{user.email ?? 'No Email'}}</p>\n          </div>\n        </div>\n        <div class=\"hidden shrink-0 sm:flex sm:flex-col sm:items-end\">\n          <p class=\"text-sm/6 text-gray-900 capitalize\">{{getRolesForUser(user).join(', ')}}</p>\n          <div class=\"flex gap-3\">\n            <p class=\"mt-1 text-xs/5 text-gray-500 cursor-pointer\">\n              Edit\n            </p>\n            <button\n              class=\"mt-1 text-xs/5 text-valencia-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300\"\n              :disabled=\"getRolesForUser(user).includes('owner')\"\n              @click=\"showRemoveModal = user\">\n              Remove\n            </button>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div>\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-xl font-bold\">\n        Invitations\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showNewInvitationModal = true\"\n          :disabled=\"status === 'loading'\"\n          :tier=\"workspace?.subscriptionTier\"\n          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\">\n          New Invitation\n          <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\">\n            <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\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <div v-else-if=\"invitations?.length > 0\" class=\"mt-8 flow-root\" v-if=\"invitations?.length > 0\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <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>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Email</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Status</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Role</th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"invitation in invitations\">\n                <td class=\"whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0\">\n                  {{invitation.githubUsername}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.email}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  <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\">\n                    Pending\n                  </span>\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.roles.join(', ')}}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div v-else-if=\"invitations?.length === 0\" class=\"mt-4\">\n      <div class=\"text-center\">\n        <svg class=\"mx-auto size-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No invitations</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">You have no outstanding invitations</p>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showNewInvitationModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showNewInvitationModal = false\">&times;</div>\n      <new-invitation @close=\"showNewInvitationModal = false\" @invitationCreated=\"invitations.push($event.invitation)\"></new-invitation>\n    </template>\n  </modal>\n\n  <modal v-if=\"showRemoveModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showRemoveModal = false\">&times;</div>\n      <div>\n        Are you sure you want to remove user <span class=\"font-bold\">{{showRemoveModal.githubUsername}}</span> from this workspace?\n      </div>\n      <div class=\"mt-6 grid grid-cols-2 gap-4\">\n        <async-button\n          @click=\"removeFromWorkspace(showConfirmDeleteModal)\"\n          class=\"border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-valencia-500 hover:bg-valencia-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-400\">\n          <span class=\"text-sm font-semibold leading-6\">Yes, Remove</span>\n        </async-button>\n\n        <span @click=\"showRemoveModal = null\" class=\"cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400\">\n          <span class=\"text-sm font-semibold leading-6\">Cancel</span>\n        </span>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"mx-auto max-w-5xl py-6 px-2 flex flex-col gap-8\">\n  <div>\n    <div class=\"text-xl font-bold\">\n      Subscription Details\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <div v-else-if=\"workspace && workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">Tier:</span> {{workspace.subscriptionTier ?? 'No subscription'}}\n      </div>\n      <div>\n        <async-button\n          type=\"submit\"\n          @click=\"getWorkspaceCustomerPortalLink\"\n          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\">\n          View in Stripe\n          <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\">\n            <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\" />\n          </svg>\n        </async-button>\n      </div>\n    </div>\n    <div v-else-if=\"workspace && !workspace.subscriptionTier\" class=\"mt-4 flex justify-between items-center\">\n      <div>\n        <span class=\"font-bold\">No active subscription</span>\n        <div class=\"text-sm text-gray-700\">\n          You won't be able to invite your team until you activate a subscription\n        </div>\n      </div>\n      <div>\n        <a\n          :href=\"paymentLink\"\n          target=\"_blank\"\n          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\">\n          Subscribe With Stripe\n          <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\">\n            <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\" />\n          </svg>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div>\n    <div class=\"text-xl font-bold\">\n      Current Members\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <ul v-else role=\"list\" class=\"divide-y divide-gray-100\">\n      <li class=\"flex justify-between gap-x-6 py-5\" v-for=\"user in users\">\n        <div class=\"flex min-w-0 gap-x-4\">\n          <img class=\"size-12 flex-none rounded-full bg-gray-50\" :src=\"user.picture ?? 'images/logo.svg'\" alt=\"\">\n          <div class=\"min-w-0 flex-auto\">\n            <p class=\"text-sm/6 font-semibold text-gray-900\">\n              {{user.name || user.githubUsername}}\n              <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>\n            </p>\n            <p class=\"mt-1 truncate text-xs/5 text-gray-500\">{{user.email ?? 'No Email'}}</p>\n          </div>\n        </div>\n        <div class=\"hidden shrink-0 sm:flex sm:flex-col sm:items-end\">\n          <p class=\"text-sm/6 text-gray-900 capitalize\">{{getRolesForUser(user).join(', ')}}</p>\n          <div class=\"flex gap-3\">\n            <button\n              type=\"button\"\n              class=\"mt-1 text-xs/5 text-gray-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300\"\n              :disabled=\"getRolesForUser(user).includes('owner')\"\n              @click=\"openEditModal(user)\">\n              Edit\n            </button>\n            <button\n              class=\"mt-1 text-xs/5 text-valencia-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300\"\n              :disabled=\"getRolesForUser(user).includes('owner')\"\n              @click=\"showRemoveModal = user\">\n              Remove\n            </button>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div>\n    <div class=\"flex items-center justify-between\">\n      <div class=\"text-xl font-bold\">\n        Invitations\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showNewInvitationModal = true\"\n          :disabled=\"status === 'loading'\"\n          :tier=\"workspace?.subscriptionTier\"\n          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\">\n          New Invitation\n          <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\">\n            <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\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div v-if=\"status === 'loading'\" class=\"mt-4\">\n      <img src=\"images/loader.gif\" class=\"inline w-8 h-8\">\n    </div>\n    <div v-else-if=\"invitations?.length > 0\" class=\"mt-8 flow-root\" v-if=\"invitations?.length > 0\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <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>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Email</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Status</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900\">Role</th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"invitation in invitations\">\n                <td class=\"whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0\">\n                  {{invitation.githubUsername}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.email}}\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  <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\">\n                    Pending\n                  </span>\n                </td>\n                <td class=\"whitespace-nowrap px-3 py-5 text-sm text-gray-500\">\n                  {{invitation.roles.join(', ')}}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div v-else-if=\"invitations?.length === 0\" class=\"mt-4\">\n      <div class=\"text-center\">\n        <svg class=\"mx-auto size-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No invitations</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">You have no outstanding invitations</p>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showNewInvitationModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showNewInvitationModal = false\">&times;</div>\n      <new-invitation @close=\"showNewInvitationModal = false\" @invitationCreated=\"invitations.push($event.invitation)\"></new-invitation>\n    </template>\n  </modal>\n\n  <modal v-if=\"showEditModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"closeEditModal\">&times;</div>\n      <div class=\"p-1 space-y-4\">\n        <div class=\"text-lg font-bold\">\n          Edit Member\n        </div>\n\n        <div>\n          <div class=\"text-sm/6 font-semibold text-gray-900\">\n            {{showEditModal.user.name || showEditModal.user.githubUsername}}\n          </div>\n          <div class=\"text-xs/5 text-gray-500\">\n            {{showEditModal.user.email ?? 'No Email'}}\n          </div>\n        </div>\n\n        <div>\n          <label for=\"editRole\" class=\"block text-sm/6 font-medium text-gray-900\">Role</label>\n          <div class=\"mt-2 grid grid-cols-1\">\n            <select\n              id=\"editRole\"\n              name=\"editRole\"\n              v-model=\"showEditModal.role\"\n              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\">\n              <option value=\"admin\" :disabled=\"disableRoleOption('admin')\">Admin</option>\n              <option value=\"member\" :disabled=\"disableRoleOption('member')\">Member</option>\n              <option value=\"readonly\" :disabled=\"disableRoleOption('readonly')\">Read-only</option>\n              <option value=\"dashboards\" :disabled=\"disableRoleOption('dashboards')\">Dashboards Only</option>\n            </select>\n            <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\">\n              <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\" />\n            </svg>\n          </div>\n          <div v-if=\"!workspace?.subscriptionTier\" class=\"mt-2 text-sm text-gray-700\">\n            You can only assign the \"Dashboards Only\" role until you activate a subscription.\n          </div>\n        </div>\n\n        <div class=\"mt-6 grid grid-cols-2 gap-4\">\n          <async-button\n            @click=\"updateWorkspaceMember\"\n            :disabled=\"showEditModal.role === showEditModal.originalRole\"\n            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\">\n            <span class=\"text-sm font-semibold leading-6\">Save</span>\n          </async-button>\n\n          <span @click=\"closeEditModal\" class=\"cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400\">\n            <span class=\"text-sm font-semibold leading-6\">Cancel</span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </modal>\n\n  <modal v-if=\"showRemoveModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showRemoveModal = null\">&times;</div>\n      <div>\n        Are you sure you want to remove user <span class=\"font-bold\">{{showRemoveModal.githubUsername}}</span> from this workspace?\n      </div>\n      <div class=\"mt-6 grid grid-cols-2 gap-4\">\n        <async-button\n          @click=\"removeFromWorkspace\"\n          class=\"border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-valencia-500 hover:bg-valencia-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-400\">\n          <span class=\"text-sm font-semibold leading-6\">Yes, Remove</span>\n        </async-button>\n\n        <span @click=\"showRemoveModal = null\" class=\"cursor-pointer flex w-full items-center justify-center gap-3 rounded-md bg-slate-500 hover:bg-slate-400 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400\">\n          <span class=\"text-sm font-semibold leading-6\">Cancel</span>\n        </span>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -15267,7 +15835,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.126","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.130","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })