@mongoosejs/studio 0.0.131 → 0.0.135

package/frontend/public/tw.css

@@ -2160,6 +2160,16 @@ video {
   --tw-ring-color: rgb(0 168 165 / var(--tw-ring-opacity));
 }
 
+.hover\:translate-x-0:hover {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:translate-x-0\.5:hover {
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));

package/frontend/src/async-button/async-button.html

@@ -1,6 +1,6 @@
 <button v-bind="attrsToBind" :disabled="isDisabled" @click="handleClick">
   <div v-if="status === 'in_progress'" style="text-align: center">
-    <svg style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <svg style="height: 1em" class="mx-auto" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <g>
         <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />
         <path d="M12 2a10 10 0 0 1 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">

package/frontend/src/async-button/async-button.js

@@ -9,19 +9,28 @@ module.exports = app => app.component('async-button', {
   inheritAttrs: false,
   methods: {
     async handleClick(ev) {
-      if (this.status === 'in_progress') {
-        return;
-      }
+      if (this.status === 'in_progress') return;
+
+      const btn = this.$el;
+      const prevWidth = btn.offsetWidth;
+      const prevHeight = btn.offsetHeight;
+      btn.style.width = `${prevWidth}px`;
+      btn.style.height = `${prevHeight}px`;
+
       this.status = 'in_progress';
 
       try {
-        await this.$attrs.onClick(ev);
+        if (typeof this.$attrs.onClick === 'function') {
+          await this.$attrs.onClick(ev);
+        }
+        this.status = 'success';
       } catch (err) {
-        this.status = 'error';
+        this.status = 'init';
         throw err;
+      } finally {
+        btn.style.width = null;
+        btn.style.height = null;
       }
-
-      this.status = 'success';
     }
   },
   computed: {
@@ -36,4 +45,4 @@ module.exports = app => app.component('async-button', {
     }
   },
   template: template
-});
+});

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

@@ -1,3 +1,3 @@
-<div>
-  {{value}}
+<div class="w-full">
+  <pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-gray-700 m-0">{{displayValue}}</pre>
 </div>

package/frontend/src/detail-default/detail-default.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const template = require('./detail-default.html');
-
 module.exports = app => app.component('detail-default', {
   template: template,
   props: ['value'],
@@ -13,7 +12,17 @@ module.exports = app => app.component('detail-default', {
       if (this.value === undefined) {
         return 'undefined';
       }
-      return this.value;
+      if (typeof this.value === 'string') {
+        return this.value;
+      }
+      if (typeof this.value === 'number' || typeof this.value === 'boolean' || typeof this.value === 'bigint') {
+        return String(this.value);
+      }
+      try {
+        return JSON.stringify(this.value, null, 2);
+      } catch (err) {
+        return String(this.value);
+      }
     }
   }
 });

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

@@ -21,18 +21,3 @@
     float: right;
     margin-top: -7px;
   }
-
-  .truncated-value-container,
-  .expanded-value-container {
-    position: relative;
-  }
-
-  .truncated-value-container button,
-  .expanded-value-container button {
-    transition: all 0.2s ease;
-  }
-
-  .truncated-value-container button:hover,
-  .expanded-value-container button:hover {
-    transform: translateX(2px);
-  }

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

@@ -68,11 +68,11 @@
     </div>
     <div v-else>
       <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->
-      <div v-if="needsTruncation && !isValueExpanded" class="truncated-value-container">
+      <div v-if="needsTruncation && !isValueExpanded" class="relative">
         <div class="text-gray-700 whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
         <button
           @click="toggleValueExpansion"
-          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
+          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"
         >
           <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="M19 9l-7 7-7-7"></path>
@@ -80,11 +80,11 @@
           Show more ({{valueAsString.length}} characters)
         </button>
       </div>
-      <div v-else-if="needsTruncation && isValueExpanded" class="expanded-value-container">
+      <div v-else-if="needsTruncation && isValueExpanded" class="relative">
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
         <button
           @click="toggleValueExpansion"
-          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
+          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"
         >
           <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>

package/frontend/src/splash/splash.html

@@ -17,7 +17,7 @@
         <async-button
           type="button"
           @click="loginWithGithub"
-          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">
+          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 disabled:bg-gray-500">
           <svg viewBox="0 0 98 98" class="inline mr-1" height="1.5em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
           Login With GitHub
         </async-button>
@@ -26,7 +26,7 @@
         <async-button
           type="button"
           @click="loginWithGoogle"
-          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">
+          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 disabled:bg-gray-500">
           <svg class="inline" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><path fill="#fff" d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"/><path fill="#fff" d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"/><path fill="#fff" d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"/><path fill="#fff" d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"/></svg>
           Login With Google
         </async-button>

package/package.json

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

package/astra.js

@@ -1,159 +0,0 @@
-'use strict';
-
-const mongoose = require('mongoose');
-const { createAstraUri, driver, Vectorize } = require('@datastax/astra-mongoose');
-const express = require('express');
-const studio = require('./express');
-
-const app = express();
-
-const m = new mongoose.Mongoose();
-m.setDriver(driver);
-m.set('autoCreate', false);
-m.set('autoIndex', false);
-
-(function () {
-  const schema = new m.Schema({
-    email: {
-      type: String,
-      required: true,
-      unique: true
-    },
-    firstName: {
-      type: String,
-      required: true
-    },
-    lastName: {
-      type: String,
-      required: true
-    }
-  });
-
-  schema.virtual('displayName').get(function() {
-    return this.firstName + ' ' + this.lastName.slice(0, 1) + '.';
-  });
-
-  m.model('User', schema);
-})();
-
-(function () {
-  const schema = new m.Schema({
-    make: {
-      type: String,
-      required: true
-    },
-    model: {
-      type: String,
-      required: true
-    },
-    year: {
-      type: Number,
-      required: true,
-      validate: (v) => Number.isInteger(v) && v >= 1950
-    },
-    images: {
-      type: [String]
-    },
-    numReviews: {
-      type: Number,
-      required: true,
-      default: 0
-    },
-    averageReview: {
-      type: Number,
-      required: true,
-      default: 0
-    }
-  });
-
-  m.model('Vehicle', schema);
-})();
-
-(function () {
-  const schema = new m.Schema({
-    rating: {
-      type: Number,
-      required: true,
-      validate: (v) => Number.isInteger(v)
-    },
-    text: {
-      type: String,
-      required: true,
-      validate: (v) => v.length >= 30
-    },
-    userId: {
-      type: 'ObjectId',
-      required: true
-    },
-    vehicleId: {
-      type: 'ObjectId',
-      required: true
-    }
-  }, { timestamps: true });
-
-  schema.virtual('user', {
-    ref: 'User',
-    localField: 'userId',
-    foreignField: '_id',
-    justOne: true
-  });
-
-  schema.virtual('vehicle', {
-    ref: 'Vehicle',
-    localField: 'vehicleId',
-    foreignField: '_id',
-    justOne: true
-  });
-
-  schema.pre('save', async function updateVehicleRating() {
-    if (!this.isNew) {
-      return;
-    }
-    const vehicle = await mongoose.model('Vehicle').findById(this.vehicleId).orFail();
-    vehicle.numReviews += 1;
-    const vehicleReviews = await mongoose.model('Review').find({ vehicleId: this.vehicleId });
-    const reviewRatings = vehicleReviews.map((entry) => entry.rating);
-    reviewRatings.push(this.rating);
-    const average = calculateAverage(reviewRatings);
-    vehicle.averageReview = average;
-    await vehicle.save();
-  });
-
-  function calculateAverage(ratings) {
-    if (ratings.length === 0) {
-      return 0;
-    }
-    let sum = 0;
-    for (let i = 0; i < ratings.length; i++) {
-      sum += ratings[i];
-    }
-    const average = sum / ratings.length;
-    return average;
-  }
-
-  m.model('Review', schema);
-})();
-
-const uri = createAstraUri(
-  'https://fbced748-d6ed-40b1-ab9d-b618015a2c2c-us-east-2.apps.astra.datastax.com',
-  'AstraCS:kjSUArrrkLKrDlrMpUQOUYlw:50c9eda620df1099ad2dd77eb36e7755daaa48494acb158ff6de8df3deee40f6',
-  'reviews_dev2'
-);
-
-void async function main() {
-  await m.connect(uri);
-  const studioConnection = await mongoose.createConnection('mongodb://127.0.0.1:27017/mongoose_studio_test').asPromise();
-
-  app.use('/studio', await studio('/studio/api', m, { __build: true, apiKey: '123456789', studioConnection }));
-
-  await app.listen(7770);
-  console.log('Listening on port 7770');
-}();
-
-/*
-# Astra Notes
-
-1. Must use collections. Tables don't support `countDocuments()` or `estimatedDocumentCount()`.
-2. Collections don't let you store keys that start with '$', which is problematic for `$chart`. Ended up creating separate connection to store ChatMessages in MongoDB.
-3. `countDocuments()` with filter erroring out with more than 1000 documents caused trouble. Worked around it by converting `countDocuments()` to `find()` using Mongoose middleware.
-*/

package/valnotes.md

@@ -1,2 +0,0 @@
-1. Export to PNG causes charts to scroll down
-2. Chat summarization broken