@mongoosejs/studio 0.1.2 → 0.1.4

package/README.md

@@ -62,11 +62,14 @@ Then, add `pages/api/studio.js` to your Next.js project to host the Mongoose Stu
 import db from '../../src/db';
 import studio from '@mongoosejs/studio/backend/next';
 
-const handler = studio({
-  apiKey: process.env.MONGOOSE_STUDIO_API_KEY, // optional
-  connection: db, // Optional: Connection or Mongoose global. If omitted, will use `import mongoose`
-  connectToDB: async () => { /* connection logic here */ }, // Optional: if you need to call a function to connect to the database put it here
-});
+const handler = studio(
+  db, // Mongoose connection or Mongoose global. Or null to use `import mongoose`.
+  {
+    apiKey: process.env.MONGOOSE_STUDIO_API_KEY, // optional
+    connection: db, // Optional: Connection or Mongoose global. If omitted, will use `import mongoose`
+    connectToDB: async () => { /* connection logic here */ }, // Optional: if you need to call a function to connect to the database put it here
+  }
+);
 
 export default handler;
 ```

package/backend/actions/Model/getDocument.js

@@ -37,7 +37,9 @@ module.exports = ({ db }) => async function getDocument(params) {
     schemaPaths[path] = {
       instance: Model.schema.paths[path].instance,
       path,
-      ref: Model.schema.paths[path].options?.ref
+      ref: Model.schema.paths[path].options?.ref,
+      required: Model.schema.paths[path].options?.required,
+      enum: Model.schema.paths[path].options?.enum
     };
   }
   removeSpecifiedPaths(schemaPaths, '.$*');

package/backend/actions/Model/getDocuments.js

@@ -77,7 +77,8 @@ module.exports = ({ db }) => async function getDocuments(params) {
       instance: Model.schema.paths[path].instance,
       path,
       ref: Model.schema.paths[path].options?.ref,
-      required: Model.schema.paths[path].options?.required
+      required: Model.schema.paths[path].options?.required,
+      enum: Model.schema.paths[path].options?.enum
     };
   }
   removeSpecifiedPaths(schemaPaths, '.$*');

package/backend/actions/Model/getDocumentsStream.js

@@ -67,7 +67,8 @@ module.exports = ({ db }) => async function* getDocumentsStream(params) {
       instance: Model.schema.paths[path].instance,
       path,
       ref: Model.schema.paths[path].options?.ref,
-      required: Model.schema.paths[path].options?.required
+      required: Model.schema.paths[path].options?.required,
+      enum: Model.schema.paths[path].options?.enum
     };
   }
   removeSpecifiedPaths(schemaPaths, '.$*');

package/frontend/public/app.js

@@ -106,6 +106,9 @@ var map = {
 	"./edit-number/edit-number": "./frontend/src/edit-number/edit-number.js",
 	"./edit-number/edit-number.html": "./frontend/src/edit-number/edit-number.html",
 	"./edit-number/edit-number.js": "./frontend/src/edit-number/edit-number.js",
+	"./edit-string/edit-string": "./frontend/src/edit-string/edit-string.js",
+	"./edit-string/edit-string.html": "./frontend/src/edit-string/edit-string.html",
+	"./edit-string/edit-string.js": "./frontend/src/edit-string/edit-string.js",
 	"./edit-subdocument/edit-subdocument": "./frontend/src/edit-subdocument/edit-subdocument.js",
 	"./edit-subdocument/edit-subdocument.html": "./frontend/src/edit-subdocument/edit-subdocument.html",
 	"./edit-subdocument/edit-subdocument.js": "./frontend/src/edit-subdocument/edit-subdocument.js",
@@ -2517,7 +2520,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"border border-gray-200 rounded-lg mb-2\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-3 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100': highlight, 'bg-gray-50': !highlight }\"\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=\"relative\">\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 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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=\"relative\">\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 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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";
+module.exports = "<div class=\"border border-gray-200 rounded-lg mb-2\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-3 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100': highlight, 'bg-gray-50': !highlight }\"\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      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-gray-300 bg-white\"\n        @click.stop.prevent=\"copyPropertyValue\"\n        title=\"Copy value\"\n        aria-label=\"Copy property value\"\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=\"M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z\" />\n        </svg>\n        {{copyButtonLabel}}\n      </button>\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        v-bind=\"getEditComponentProps(path)\"\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=\"relative\">\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 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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=\"relative\">\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 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\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";
 
 /***/ }),
 
@@ -2528,6 +2531,8 @@ module.exports = "<div class=\"border border-gray-200 rounded-lg mb-2\">\n  <!--
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
+/* global clearTimeout setTimeout */
+
 
 
 const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
@@ -2543,9 +2548,17 @@ module.exports = app => app.component('document-property', {
     return {
       dateType: 'picker', // picker, iso
       isCollapsed: false, // Start uncollapsed by default
-      isValueExpanded: false // Track if the value is expanded
+      isValueExpanded: false, // Track if the value is expanded
+      copyButtonLabel: 'Copy',
+      copyResetTimeoutId: null
     };
   },
+  beforeDestroy() {
+    if (this.copyResetTimeoutId) {
+      clearTimeout(this.copyResetTimeoutId);
+      this.copyResetTimeoutId = null;
+    }
+  },
   props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
   computed: {
     valueAsString() {
@@ -2584,6 +2597,9 @@ module.exports = app => app.component('document-property', {
       return 'detail-default';
     },
     getEditComponentForPath(path) {
+      if (path.instance === 'String') {
+        return 'edit-string';
+      }
       if (path.instance == 'Date') {
         return 'edit-date';
       }
@@ -2601,6 +2617,15 @@ module.exports = app => app.component('document-property', {
       }
       return 'edit-default';
     },
+    getEditComponentProps(path) {
+      const props = {};
+      if (path.instance === 'String') {
+        if (path.enum?.length > 0) {
+          props.enumValues = path.enum;
+        }
+      }
+      return props;
+    },
     getValueForPath(path) {
       if (this.document == null) {
         return undefined;
@@ -2622,6 +2647,53 @@ module.exports = app => app.component('document-property', {
     },
     toggleValueExpansion() {
       this.isValueExpanded = !this.isValueExpanded;
+    },
+    setCopyFeedback() {
+      this.copyButtonLabel = 'Copied';
+      if (this.copyResetTimeoutId) {
+        clearTimeout(this.copyResetTimeoutId);
+      }
+      this.copyResetTimeoutId = setTimeout(() => {
+        this.copyButtonLabel = 'Copy';
+        this.copyResetTimeoutId = null;
+      }, 5000);
+    },
+    copyPropertyValue() {
+      const textToCopy = this.valueAsString;
+      if (textToCopy == null) {
+        return;
+      }
+
+      const fallbackCopy = () => {
+        if (typeof document === 'undefined') {
+          return;
+        }
+        const textArea = document.createElement('textarea');
+        textArea.value = textToCopy;
+        textArea.setAttribute('readonly', '');
+        textArea.style.position = 'absolute';
+        textArea.style.left = '-9999px';
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand('copy');
+        } finally {
+          document.body.removeChild(textArea);
+        }
+        this.setCopyFeedback();
+      };
+
+      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(textToCopy)
+          .then(() => {
+            this.setCopyFeedback();
+          })
+          .catch(() => {
+            fallbackCopy();
+          });
+      } else {
+        fallbackCopy();
+      }
     }
   }
 });
@@ -3186,6 +3258,176 @@ module.exports = app => app.component('edit-number', {
   }
 });
 
+/***/ }),
+
+/***/ "./frontend/src/edit-string/edit-string.html":
+/*!***************************************************!*\
+  !*** ./frontend/src/edit-string/edit-string.html ***!
+  \***************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div>\n  <div v-if=\"hasEnumValues\" class=\"space-y-2\">\n    <select\n      class=\"w-full px-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n      :value=\"selectedOption\"\n      @change=\"onSelectChange\"\n    >\n      <option v-for=\"option in normalizedEnums\" :key=\"`enum-${option}`\" :value=\"option\">\n        {{ option }}\n      </option>\n      <option :value=\"'__null'\">null</option>\n      <option :value=\"'__other'\">Other</option>\n    </select>\n    <input\n      v-if=\"selectedOption === '__other'\"\n      type=\"text\"\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      :value=\"otherValue\"\n      @input=\"onOtherInput\"\n      placeholder=\"Enter a value\"\n    />\n  </div>\n  <div v-else>\n    <input\n      type=\"text\"\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      :value=\"value != null ? value : ''\"\n      @input=\"onTextInput\"\n      placeholder=\"Enter a value\"\n    />\n  </div>\n</div>\n";
+
+/***/ }),
+
+/***/ "./frontend/src/edit-string/edit-string.js":
+/*!*************************************************!*\
+  !*** ./frontend/src/edit-string/edit-string.js ***!
+  \*************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./edit-string.html */ "./frontend/src/edit-string/edit-string.html");
+
+const OTHER_OPTION = '__other';
+const NULL_OPTION = '__null';
+
+function normalizeEnumValues(enumValues) {
+  if (!Array.isArray(enumValues)) {
+    return [];
+  }
+
+  const deduped = [];
+  enumValues.forEach(value => {
+    if (value == null) {
+      return;
+    }
+    if (deduped.indexOf(value) === -1) {
+      deduped.push(value);
+    }
+  });
+
+  return deduped;
+}
+
+function getInitialSelection(value, normalizedEnumValues) {
+  if (value == null) {
+    return NULL_OPTION;
+  }
+  if (normalizedEnumValues.indexOf(value) !== -1) {
+    return value;
+  }
+  if (typeof value === 'string' && value === '') {
+    return OTHER_OPTION;
+  }
+  // For any other non-null, non-enum, non-empty string value, return OTHER_OPTION
+  return OTHER_OPTION;
+}
+
+module.exports = app => app.component('edit-string', {
+  template,
+  props: {
+    value: {
+      type: null,
+      default: undefined
+    },
+    enumValues: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['input'],
+  data() {
+    const normalizedEnums = normalizeEnumValues(this.enumValues);
+    const initialSelection = normalizedEnums.length > 0 ? getInitialSelection(this.value, normalizedEnums) : null;
+
+    return {
+      normalizedEnums,
+      selectedOption: initialSelection,
+      otherValue: initialSelection === OTHER_OPTION && typeof this.value === 'string' ? this.value : ''
+    };
+  },
+  computed: {
+    hasEnumValues() {
+      return this.normalizedEnums.length > 0;
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (!this.hasEnumValues) {
+        return;
+      }
+      const newSelection = getInitialSelection(newVal, this.normalizedEnums);
+      const selectionChanged = newSelection !== this.selectedOption;
+
+      if (selectionChanged) {
+        this.selectedOption = newSelection;
+      }
+
+      if (newSelection === OTHER_OPTION) {
+        const nextOtherValue = typeof newVal === 'string' ? newVal : '';
+        if (this.otherValue !== nextOtherValue) {
+          this.otherValue = nextOtherValue;
+        }
+      } else if (selectionChanged && this.otherValue !== '') {
+        this.otherValue = '';
+      }
+    },
+    enumValues(newValues) {
+      const normalized = normalizeEnumValues(newValues);
+      this.normalizedEnums = normalized;
+
+      if (!normalized.length) {
+        this.selectedOption = null;
+        this.otherValue = '';
+        return;
+      }
+
+      const newSelection = getInitialSelection(this.value, normalized);
+      const selectionChanged = newSelection !== this.selectedOption;
+
+      if (selectionChanged) {
+        this.selectedOption = newSelection;
+      }
+
+      if (newSelection === OTHER_OPTION) {
+        const sourceValue = typeof this.value === 'string' ? this.value : '';
+        if (this.otherValue !== sourceValue) {
+          this.otherValue = sourceValue;
+        }
+      } else if (this.otherValue !== '') {
+        this.otherValue = '';
+      }
+    }
+  },
+  methods: {
+    onSelectChange(event) {
+      if (!this.hasEnumValues) {
+        return;
+      }
+
+      const selected = event.target.value;
+      this.selectedOption = selected;
+
+      if (selected === NULL_OPTION) {
+        this.otherValue = '';
+        this.$emit('input', null);
+        return;
+      }
+      if (selected === OTHER_OPTION) {
+        if (this.otherValue === '' && typeof this.value === 'string' && this.normalizedEnums.indexOf(this.value) === -1) {
+          this.otherValue = this.value;
+        }
+        return;
+      }
+
+      this.otherValue = '';
+      this.$emit('input', selected);
+    },
+    onOtherInput(event) {
+      this.otherValue = event.target.value;
+      this.$emit('input', this.otherValue);
+    },
+    onTextInput(event) {
+      this.$emit('input', event.target.value);
+    }
+  }
+});
+
+
 /***/ }),
 
 /***/ "./frontend/src/edit-subdocument/edit-subdocument.html":
@@ -16367,7 +16609,7 @@ module.exports = function stringToParts(str) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.2","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"},"license":"Apache-2.0","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.1.4","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"},"license":"Apache-2.0","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"}}');
 
 /***/ })
 

package/frontend/public/tw.css

@@ -2446,6 +2446,11 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .hover\:text-slate-700:hover {
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));

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

@@ -19,6 +19,18 @@
       <span class="ml-2 text-sm text-gray-500">({{(path.instance || 'unknown').toLowerCase()}})</span>
     </div>
     <div class="flex items-center gap-2">
+      <button
+        type="button"
+        class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-gray-300 bg-white"
+        @click.stop.prevent="copyPropertyValue"
+        title="Copy value"
+        aria-label="Copy property value"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z" />
+        </svg>
+        {{copyButtonLabel}}
+      </button>
       <router-link
         v-if="path.ref && getValueForPath(path.path)"
         :to="`/model/${path.ref}/document/${getValueForPath(path.path)}`"
@@ -61,6 +73,7 @@
         :is="getEditComponentForPath(path)"
         :value="getEditValueForPath(path)"
         :format="dateType"
+        v-bind="getEditComponentProps(path)"
         @input="changes[path.path] = $event; delete invalid[path.path];"
         @error="invalid[path.path] = $event;"
         >

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

@@ -1,3 +1,5 @@
+/* global clearTimeout setTimeout */
+
 'use strict';
 
 const mpath = require('mpath');
@@ -13,9 +15,17 @@ module.exports = app => app.component('document-property', {
     return {
       dateType: 'picker', // picker, iso
       isCollapsed: false, // Start uncollapsed by default
-      isValueExpanded: false // Track if the value is expanded
+      isValueExpanded: false, // Track if the value is expanded
+      copyButtonLabel: 'Copy',
+      copyResetTimeoutId: null
     };
   },
+  beforeDestroy() {
+    if (this.copyResetTimeoutId) {
+      clearTimeout(this.copyResetTimeoutId);
+      this.copyResetTimeoutId = null;
+    }
+  },
   props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
   computed: {
     valueAsString() {
@@ -54,6 +64,9 @@ module.exports = app => app.component('document-property', {
       return 'detail-default';
     },
     getEditComponentForPath(path) {
+      if (path.instance === 'String') {
+        return 'edit-string';
+      }
       if (path.instance == 'Date') {
         return 'edit-date';
       }
@@ -71,6 +84,15 @@ module.exports = app => app.component('document-property', {
       }
       return 'edit-default';
     },
+    getEditComponentProps(path) {
+      const props = {};
+      if (path.instance === 'String') {
+        if (path.enum?.length > 0) {
+          props.enumValues = path.enum;
+        }
+      }
+      return props;
+    },
     getValueForPath(path) {
       if (this.document == null) {
         return undefined;
@@ -92,6 +114,53 @@ module.exports = app => app.component('document-property', {
     },
     toggleValueExpansion() {
       this.isValueExpanded = !this.isValueExpanded;
+    },
+    setCopyFeedback() {
+      this.copyButtonLabel = 'Copied';
+      if (this.copyResetTimeoutId) {
+        clearTimeout(this.copyResetTimeoutId);
+      }
+      this.copyResetTimeoutId = setTimeout(() => {
+        this.copyButtonLabel = 'Copy';
+        this.copyResetTimeoutId = null;
+      }, 5000);
+    },
+    copyPropertyValue() {
+      const textToCopy = this.valueAsString;
+      if (textToCopy == null) {
+        return;
+      }
+
+      const fallbackCopy = () => {
+        if (typeof document === 'undefined') {
+          return;
+        }
+        const textArea = document.createElement('textarea');
+        textArea.value = textToCopy;
+        textArea.setAttribute('readonly', '');
+        textArea.style.position = 'absolute';
+        textArea.style.left = '-9999px';
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand('copy');
+        } finally {
+          document.body.removeChild(textArea);
+        }
+        this.setCopyFeedback();
+      };
+
+      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(textToCopy)
+          .then(() => {
+            this.setCopyFeedback();
+          })
+          .catch(() => {
+            fallbackCopy();
+          });
+      } else {
+        fallbackCopy();
+      }
     }
   }
 });

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

@@ -0,0 +1,32 @@
+<div>
+  <div v-if="hasEnumValues" class="space-y-2">
+    <select
+      class="w-full px-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      :value="selectedOption"
+      @change="onSelectChange"
+    >
+      <option v-for="option in normalizedEnums" :key="`enum-${option}`" :value="option">
+        {{ option }}
+      </option>
+      <option :value="'__null'">null</option>
+      <option :value="'__other'">Other</option>
+    </select>
+    <input
+      v-if="selectedOption === '__other'"
+      type="text"
+      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      :value="otherValue"
+      @input="onOtherInput"
+      placeholder="Enter a value"
+    />
+  </div>
+  <div v-else>
+    <input
+      type="text"
+      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      :value="value != null ? value : ''"
+      @input="onTextInput"
+      placeholder="Enter a value"
+    />
+  </div>
+</div>

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

@@ -0,0 +1,148 @@
+'use strict';
+
+const template = require('./edit-string.html');
+
+const OTHER_OPTION = '__other';
+const NULL_OPTION = '__null';
+
+function normalizeEnumValues(enumValues) {
+  if (!Array.isArray(enumValues)) {
+    return [];
+  }
+
+  const deduped = [];
+  enumValues.forEach(value => {
+    if (value == null) {
+      return;
+    }
+    if (deduped.indexOf(value) === -1) {
+      deduped.push(value);
+    }
+  });
+
+  return deduped;
+}
+
+function getInitialSelection(value, normalizedEnumValues) {
+  if (value == null) {
+    return NULL_OPTION;
+  }
+  if (normalizedEnumValues.indexOf(value) !== -1) {
+    return value;
+  }
+  if (typeof value === 'string' && value === '') {
+    return OTHER_OPTION;
+  }
+  // For any other non-null, non-enum, non-empty string value, return OTHER_OPTION
+  return OTHER_OPTION;
+}
+
+module.exports = app => app.component('edit-string', {
+  template,
+  props: {
+    value: {
+      type: null,
+      default: undefined
+    },
+    enumValues: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['input'],
+  data() {
+    const normalizedEnums = normalizeEnumValues(this.enumValues);
+    const initialSelection = normalizedEnums.length > 0 ? getInitialSelection(this.value, normalizedEnums) : null;
+
+    return {
+      normalizedEnums,
+      selectedOption: initialSelection,
+      otherValue: initialSelection === OTHER_OPTION && typeof this.value === 'string' ? this.value : ''
+    };
+  },
+  computed: {
+    hasEnumValues() {
+      return this.normalizedEnums.length > 0;
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (!this.hasEnumValues) {
+        return;
+      }
+      const newSelection = getInitialSelection(newVal, this.normalizedEnums);
+      const selectionChanged = newSelection !== this.selectedOption;
+
+      if (selectionChanged) {
+        this.selectedOption = newSelection;
+      }
+
+      if (newSelection === OTHER_OPTION) {
+        const nextOtherValue = typeof newVal === 'string' ? newVal : '';
+        if (this.otherValue !== nextOtherValue) {
+          this.otherValue = nextOtherValue;
+        }
+      } else if (selectionChanged && this.otherValue !== '') {
+        this.otherValue = '';
+      }
+    },
+    enumValues(newValues) {
+      const normalized = normalizeEnumValues(newValues);
+      this.normalizedEnums = normalized;
+
+      if (!normalized.length) {
+        this.selectedOption = null;
+        this.otherValue = '';
+        return;
+      }
+
+      const newSelection = getInitialSelection(this.value, normalized);
+      const selectionChanged = newSelection !== this.selectedOption;
+
+      if (selectionChanged) {
+        this.selectedOption = newSelection;
+      }
+
+      if (newSelection === OTHER_OPTION) {
+        const sourceValue = typeof this.value === 'string' ? this.value : '';
+        if (this.otherValue !== sourceValue) {
+          this.otherValue = sourceValue;
+        }
+      } else if (this.otherValue !== '') {
+        this.otherValue = '';
+      }
+    }
+  },
+  methods: {
+    onSelectChange(event) {
+      if (!this.hasEnumValues) {
+        return;
+      }
+
+      const selected = event.target.value;
+      this.selectedOption = selected;
+
+      if (selected === NULL_OPTION) {
+        this.otherValue = '';
+        this.$emit('input', null);
+        return;
+      }
+      if (selected === OTHER_OPTION) {
+        if (this.otherValue === '' && typeof this.value === 'string' && this.normalizedEnums.indexOf(this.value) === -1) {
+          this.otherValue = this.value;
+        }
+        return;
+      }
+
+      this.otherValue = '';
+      this.$emit('input', selected);
+    },
+    onOtherInput(event) {
+      this.otherValue = event.target.value;
+      this.$emit('input', this.otherValue);
+    },
+    onTextInput(event) {
+      this.$emit('input', event.target.value);
+    }
+  }
+});

package/next.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const fs = require('fs');
+const frontend = require('./frontend');
 const path = require('path');
 
 module.exports = withMongooseStudio;
@@ -15,6 +16,15 @@ module.exports = withMongooseStudio;
 function withMongooseStudio(nextConfig = {}) {
   const studioPath = normalizeBasePath(nextConfig.studioPath || '/studio');
 
+  try {
+    copyStudioFrontend(studioPath);
+    frontend('/api/studio', true)
+      .then(() => console.log(`✅ Mongoose Studio: copied frontend+config to public${studioPath}`))
+      .catch(err => console.error(`❌ Mongoose Studio: failed to copy frontend`, err));
+  } catch (err) {
+    console.error('❌ Mongoose Studio: failed to copy frontend', err);
+  }
+
   return {
     ...nextConfig,
 
@@ -32,24 +42,7 @@ function withMongooseStudio(nextConfig = {}) {
       };
 
       return [...userRedirects, studioRedirect];
-    },
-
-    webpack(config, { isServer }) {
-       if (isServer) {
-         try {
-           copyStudioFrontend(studioPath);
-           console.log(`✅ Mongoose Studio: copied frontend to public${studioPath}`);
-         } catch (err) {
-           console.error('❌ Mongoose Studio: failed to copy frontend', err);
-         }
-       }
-
-       // Preserve user’s webpack config
-       if (typeof nextConfig.webpack === 'function') {
-         return nextConfig.webpack(config, { isServer });
-       }
-       return config;
-    },
+    }
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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": {