@mongoosejs/studio 0.3.2 → 0.3.4

package/frontend/public/dark-theme.css

@@ -60,10 +60,49 @@
   background-color: var(--studio-bg-success);
 }
 
+/* Status card/badge backgrounds (100-level) */
+.dark .bg-yellow-100 {
+  background-color: var(--studio-bg-warning);
+}
+
+.dark .bg-green-100 {
+  background-color: var(--studio-bg-success);
+}
+
+.dark .bg-red-100 {
+  background-color: var(--studio-bg-error);
+}
+
 .dark .bg-blue-100 {
   background-color: var(--studio-bg-info);
 }
 
+/* Status pill active/selected backgrounds (200-level) */
+.dark .bg-yellow-200 {
+  background-color: var(--studio-bg-warning-active);
+}
+
+.dark .bg-green-200 {
+  background-color: var(--studio-bg-success-active);
+}
+
+.dark .bg-red-200 {
+  background-color: var(--studio-bg-error-active);
+}
+
+/* Status card/badge hover backgrounds */
+.dark .hover\:bg-yellow-100:hover {
+  background-color: var(--studio-bg-warning-hover);
+}
+
+.dark .hover\:bg-green-100:hover {
+  background-color: var(--studio-bg-success-hover);
+}
+
+.dark .hover\:bg-red-100:hover {
+  background-color: var(--studio-bg-error-hover);
+}
+
 .dark .border-red-200 {
   border-color: var(--studio-border-error);
 }
@@ -76,6 +115,55 @@
   border-color: var(--studio-border-success);
 }
 
+/* Hover/other status borders (200-level is handled above) */
+.dark .border-yellow-300 {
+  border-color: var(--studio-border-warning);
+}
+
+.dark .border-green-300 {
+  border-color: var(--studio-border-success);
+}
+
+.dark .border-red-300 {
+  border-color: var(--studio-border-error);
+}
+
+.dark .hover\:border-yellow-300:hover {
+  border-color: var(--studio-border-warning);
+}
+
+.dark .hover\:border-green-300:hover {
+  border-color: var(--studio-border-success);
+}
+
+.dark .hover\:border-red-300:hover {
+  border-color: var(--studio-border-error);
+}
+
+/* Status text colors – label (600-level) and value (700–900-level) */
+.dark .text-yellow-600,
+.dark .text-yellow-700,
+.dark .text-yellow-800,
+.dark .text-yellow-900 {
+  color: var(--studio-text-warning);
+}
+
+.dark .text-green-600,
+.dark .text-green-800,
+.dark .text-green-900 {
+  color: var(--studio-text-success);
+}
+
+.dark .text-red-600,
+.dark .text-red-800,
+.dark .text-red-900 {
+  color: var(--studio-text-error);
+}
+
+.dark .text-blue-800 {
+  color: var(--studio-text-info);
+}
+
 .dark .text-red-700 {
   color: var(--studio-text-error);
 }
@@ -92,6 +180,28 @@
   --tw-ring-color: var(--studio-ring-muted);
 }
 
+/* Status ring colors in dark mode */
+.dark .ring-yellow-400,
+.dark .ring-yellow-500 {
+  --tw-ring-color: var(--studio-ring-warning);
+}
+
+.dark .ring-green-400,
+.dark .ring-green-500 {
+  --tw-ring-color: var(--studio-ring-success);
+}
+
+.dark .ring-red-400,
+.dark .ring-red-500 {
+  --tw-ring-color: var(--studio-ring-error);
+}
+
+.dark .ring-gray-400,
+.dark .ring-gray-500,
+.dark .ring-slate-500 {
+  --tw-ring-color: var(--studio-ring-muted);
+}
+
 /* ---- Ring / shadow ---- */
 .dark .ring-black\/5,
 .dark .ring-opacity-5 {
@@ -358,6 +468,62 @@
 }
 
 
+/* ---- Task action button gradients (dark mode) ---- */
+.dark .from-blue-500 {
+  --tw-gradient-from: #1d4ed8;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 78 216 / 0));
+}
+
+.dark .to-blue-600 {
+  --tw-gradient-to: #1e40af;
+}
+
+.dark .hover\:from-blue-600:hover {
+  --tw-gradient-from: #2563eb;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(37 99 235 / 0));
+}
+
+.dark .hover\:to-blue-700:hover {
+  --tw-gradient-to: #1d4ed8;
+}
+
+.dark .from-green-500 {
+  --tw-gradient-from: #15803d;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(21 128 61 / 0));
+}
+
+.dark .to-green-600 {
+  --tw-gradient-to: #166534;
+}
+
+.dark .hover\:from-green-600:hover {
+  --tw-gradient-from: #16a34a;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(22 163 74 / 0));
+}
+
+.dark .hover\:to-green-700:hover {
+  --tw-gradient-to: #15803d;
+}
+
+/* Red action buttons: pending cancel (dark mode) */
+.dark .from-red-500 {
+  --tw-gradient-from: #b91c1c;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(185 28 28 / 0));
+}
+
+.dark .to-red-600 {
+  --tw-gradient-to: #991b1b;
+}
+
+.dark .hover\:from-red-600:hover {
+  --tw-gradient-from: #dc2626;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(220 38 38 / 0));
+}
+
+.dark .hover\:to-red-700:hover {
+  --tw-gradient-to: #b91c1c;
+}
+
 /* ---- Input placeholder contrast ---- */
 .dark ::placeholder,
 .dark .placeholder\:text-gray-400::placeholder {

package/frontend/public/theme-variables.css

@@ -47,13 +47,23 @@
   --studio-bg-warning: #fefce8;
   --studio-bg-success: #f0fdf4;
   --studio-bg-info: #eff6ff;
+  --studio-bg-warning-active: #fef9c3;
+  --studio-bg-success-active: #dcfce7;
+  --studio-bg-error-active: #fee2e2;
+  --studio-bg-warning-hover: #fef08a;
+  --studio-bg-success-hover: #bbf7d0;
+  --studio-bg-error-hover: #fecaca;
   --studio-border-error: #fecaca;
   --studio-border-warning: #fde047;
   --studio-border-success: #bbf7d0;
   --studio-border-info: #bfdbfe;
   --studio-text-error: #b91c1c;
+  --studio-text-warning: #92400e;
   --studio-text-success: #15803d;
+  --studio-text-info: #1e40af;
   --studio-ring-success: rgba(34, 197, 94, 0.2);
+  --studio-ring-warning: rgba(245, 158, 11, 0.2);
+  --studio-ring-error: rgba(239, 68, 68, 0.2);
   --studio-ring-muted: rgba(75, 85, 99, 0.2);
 
   /* Tooltip */
@@ -150,13 +160,23 @@
   --studio-bg-warning: #422006;
   --studio-bg-success: #052e16;
   --studio-bg-info: #1e3a8a;
+  --studio-bg-warning-active: #713f12;
+  --studio-bg-success-active: #14532d;
+  --studio-bg-error-active: #7f1d1d;
+  --studio-bg-warning-hover: #4d2a0a;
+  --studio-bg-success-hover: #073b1c;
+  --studio-bg-error-hover: #500d0d;
   --studio-border-error: #7f1d1d;
   --studio-border-warning: #854d0e;
   --studio-border-success: #14532d;
   --studio-border-info: #1e40af;
   --studio-text-error: #fca5a5;
+  --studio-text-warning: #fcd34d;
   --studio-text-success: #86efac;
+  --studio-text-info: #93c5fd;
   --studio-ring-success: rgba(34, 197, 94, 0.3);
+  --studio-ring-warning: rgba(252, 211, 77, 0.25);
+  --studio-ring-error: rgba(252, 165, 165, 0.25);
   --studio-ring-muted: rgba(75, 85, 99, 0.4);
 
   /* Tooltip */
@@ -229,13 +249,23 @@
   --studio-bg-warning: #422006;
   --studio-bg-success: #052e16;
   --studio-bg-info: #1e3a8a;
+  --studio-bg-warning-active: #713f12;
+  --studio-bg-success-active: #14532d;
+  --studio-bg-error-active: #7f1d1d;
+  --studio-bg-warning-hover: #4d2a0a;
+  --studio-bg-success-hover: #073b1c;
+  --studio-bg-error-hover: #500d0d;
   --studio-border-error: #7f1d1d;
   --studio-border-warning: #854d0e;
   --studio-border-success: #14532d;
   --studio-border-info: #1e40af;
   --studio-text-error: #fca5a5;
+  --studio-text-warning: #fcd34d;
   --studio-text-success: #86efac;
+  --studio-text-info: #93c5fd;
   --studio-ring-success: rgba(34, 197, 94, 0.3);
+  --studio-ring-warning: rgba(252, 211, 77, 0.25);
+  --studio-ring-error: rgba(252, 165, 165, 0.25);
   --studio-ring-muted: rgba(75, 85, 99, 0.4);
   --studio-tooltip-bg: #252525;
   --studio-tooltip-text: #e8e8e8;

package/frontend/public/tw.css

@@ -759,6 +759,10 @@ video {
   top: 90%;
 }
 
+.top-full {
+  top: 100%;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -787,6 +791,10 @@ video {
   z-index: 10001;
 }
 
+.z-\[100\] {
+  z-index: 100;
+}
+
 .z-\[9999\] {
   z-index: 9999;
 }
@@ -1128,6 +1136,10 @@ video {
   max-height: 10rem;
 }
 
+.max-h-48 {
+  max-height: 12rem;
+}
+
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1244,6 +1256,10 @@ video {
   width: 240px;
 }
 
+.w-\[calc\(100\%-1rem\)\] {
+  width: calc(100% - 1rem);
+}
+
 .w-full {
   width: 100%;
 }
@@ -1256,6 +1272,10 @@ video {
   min-width: 140px;
 }
 
+.min-w-\[180px\] {
+  min-width: 180px;
+}
+
 .min-w-\[220px\] {
   min-width: 220px;
 }
@@ -1292,6 +1312,10 @@ video {
   max-width: 80rem;
 }
 
+.max-w-\[280px\] {
+  max-width: 280px;
+}
+
 .max-w-\[calc\(100vw-3rem\)\] {
   max-width: calc(100vw - 3rem);
 }
@@ -1344,6 +1368,10 @@ video {
   flex-grow: 1;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .border-separate {
   border-collapse: separate;
 }
@@ -1503,6 +1531,14 @@ video {
   justify-content: space-between;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1762,6 +1798,10 @@ video {
   border-top-width: 4px;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-none {
   border-style: none;
 }
@@ -1784,11 +1824,6 @@ video {
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -2027,6 +2062,10 @@ video {
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
 
+.bg-slate-50\/50 {
+  background-color: rgb(248 250 252 / 0.5);
+}
+
 .bg-slate-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -2065,11 +2104,6 @@ video {
   background-color: rgb(202 56 56 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-yellow-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
@@ -2168,6 +2202,11 @@ video {
   padding: 1.5rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2358,6 +2397,10 @@ video {
   text-align: right;
 }
 
+.align-top {
+  vertical-align: top;
+}
+
 .align-middle {
   vertical-align: middle;
 }
@@ -2495,11 +2538,6 @@ video {
   color: rgb(5 150 105 / var(--tw-text-opacity));
 }
 
-.text-forest-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(0 242 58 / var(--tw-text-opacity));
-}
-
 .text-forest-green-600 {
   --tw-text-opacity: 1;
   color: rgb(0 202 44 / var(--tw-text-opacity));
@@ -2945,6 +2983,14 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.placeholder\:text-content-tertiary::-moz-placeholder {
+  color: var(--color-content-tertiary);
+}
+
+.placeholder\:text-content-tertiary::placeholder {
+  color: var(--color-content-tertiary);
+}
+
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2959,6 +3005,10 @@ video {
   margin-bottom: 0px;
 }
 
+.last\:border-r-0:last-child {
+  border-right-width: 0px;
+}
+
 .focus-within\:border-transparent:focus-within {
   border-color: transparent;
 }
@@ -3026,16 +3076,15 @@ video {
   border-color: var(--color-edge-strong);
 }
 
-.hover\:border-gray-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
 .hover\:border-green-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity));
 }
 
+.hover\:border-primary:hover {
+  border-color: var(--color-primary);
+}
+
 .hover\:border-red-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
@@ -3046,6 +3095,11 @@ video {
   border-color: rgb(203 213 225 / var(--tw-border-opacity));
 }
 
+.hover\:border-valencia-200:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 207 207 / var(--tw-border-opacity));
+}
+
 .hover\:border-yellow-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(253 224 71 / var(--tw-border-opacity));
@@ -3086,6 +3140,11 @@ video {
   background-color: rgb(0 242 58 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -3096,11 +3155,6 @@ video {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -3121,11 +3175,6 @@ video {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-green-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-indigo-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(224 231 255 / var(--tw-bg-opacity));
@@ -3172,11 +3221,6 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-red-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-slate-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
@@ -3207,6 +3251,11 @@ video {
   background-color: rgb(235 126 126 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-valencia-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 243 243 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-valencia-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 73 73 / var(--tw-bg-opacity));
@@ -3284,6 +3333,11 @@ video {
   color: rgb(51 65 85 / var(--tw-text-opacity));
 }
 
+.hover\:text-valencia-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(202 56 56 / var(--tw-text-opacity));
+}
+
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -3333,11 +3387,6 @@ video {
   border-color: transparent;
 }
 
-.focus\:border-ultramarine-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(63 83 255 / var(--tw-border-opacity));
-}
-
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -3390,6 +3439,10 @@ video {
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-edge:focus {
+  --tw-ring-color: var(--color-edge);
+}
+
 .focus\:ring-forest-green-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 242 58 / var(--tw-ring-opacity));
@@ -3418,9 +3471,8 @@ video {
   --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-ultramarine-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 83 255 / var(--tw-ring-opacity));
+.focus\:ring-valencia-500\/30:focus {
+  --tw-ring-color: rgb(220 73 73 / 0.3);
 }
 
 .focus\:ring-offset-0:focus {
@@ -3538,9 +3590,8 @@ video {
   opacity: 0.5;
 }
 
-.disabled\:hover\:bg-white:hover:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+.disabled\:hover\:bg-surface:hover:disabled {
+  background-color: var(--color-surface);
 }
 
 .group:focus-within .group-focus-within\:pointer-events-auto {
@@ -3742,4 +3793,17 @@ video {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+}
+
+:is(:where(.dark) .dark\:bg-shark-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(33 37 41 / var(--tw-bg-opacity));
+}
+
+:is(:where(.dark) .dark\:bg-shark-800\/30) {
+  background-color: rgb(33 37 41 / 0.3);
+}
+
+:is(:where(.dark) .dark\:bg-shark-800\/80) {
+  background-color: rgb(33 37 41 / 0.8);
 }

package/frontend/src/api.js

@@ -127,9 +127,12 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
     },
+    getSuggestedProjection: function getSuggestedProjection(params) {
+      return client.post('', { action: 'Model.getSuggestedProjection', ...params }).then(res => res.data);
+    },
     getDocumentsStream: async function* getDocumentsStream(params) {
       const data = await client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
-      yield { schemaPaths: data.schemaPaths };
+      yield { schemaPaths: data.schemaPaths, suggestedFields: data.suggestedFields };
       yield { numDocs: data.numDocs };
       for (const doc of data.docs) {
         yield { document: doc };
@@ -342,6 +345,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocuments: function getDocuments(params) {
       return client.post('/Model/getDocuments', params).then(res => res.data);
     },
+    getSuggestedProjection: function getSuggestedProjection(params) {
+      return client.post('/Model/getSuggestedProjection', params).then(res => res.data);
+    },
     getDocumentsStream: async function* getDocumentsStream(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/getDocumentsStream?' + new URLSearchParams(params).toString();

package/frontend/src/dashboard/dashboard.js

@@ -157,7 +157,7 @@ module.exports = {
       return this.dashboardResults.length > 0 ? this.dashboardResults[0] : null;
     }
   },
-  mounted: async function () {
+  mounted: async function() {
     window.pageState = this;
 
     document.addEventListener('click', this.handleDocumentClick);

package/frontend/src/list-mixed/list-mixed.html

@@ -1,7 +1,6 @@
 <div class="list-mixed tooltip">
   <pre>
     <code ref="MixedCode" class="language-javascript">{{shortenValue}}</code>
-    <span class="tooltiptext" @click.stop="copyText(value)">copy &#x1F4CB;</span>
   </pre>
 </div>
   

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

@@ -1,4 +1,3 @@
 <div class="list-string tooltip" ref="itemData">
   {{displayValue}}
-  <span class="tooltiptext" @click.stop="copyText(value)">copy &#x1F4CB;</span>
 </div>