@mongoosejs/studio 0.0.131 → 0.0.133

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/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/package.json

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