@mongoosejs/studio 0.2.13 → 0.3.0

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.html

@@ -1,30 +1,32 @@
 <div :class="responsive ? 'h-full' : ''">
   <div v-if="header && !fullscreen" class="border-b border-gray-100 px-2 pb-2 flex items-center gap-1">
     <div class="text-xl font-bold">{{header}}</div>
-    <button
-      class="ml-auto px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors"
-      @click="exportPNG"
-      title="Export PNG">
-      <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
-    </button>
-    <button
-      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center"
-      @click="$emit('fullscreen')"
-      aria-label="Expand dashboard result">
-      <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5" />
-      </svg>
-    </button>
+    <template v-if="showControls">
+      <button
+        class="ml-auto px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors"
+        @click="exportPNG"
+        title="Export PNG">
+        <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+      </button>
+      <button
+        class="px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
+        @click="$emit('fullscreen')"
+        aria-label="Expand dashboard result">
+        <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5" />
+        </svg>
+      </button>
+    </template>
   </div>
-  <div v-else-if="!fullscreen" class="pt-1 border-b border-gray-100 px-2 pb-2 text-right flex items-center justify-end gap-1 w-full">
+  <div v-else-if="!fullscreen && showControls" class="pt-1 border-b border-gray-100 px-2 pb-2 text-right flex items-center justify-end gap-1 w-full">
     <button
-      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors"
+      class="px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors"
       @click="exportPNG"
       title="Export PNG">
       <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
     </button>
     <button
-      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center"
+      class="px-2 py-1 text-xs bg-primary text-primary-text border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center"
       @click="$emit('fullscreen')"
       aria-label="Expand dashboard result">
       <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js

@@ -2,6 +2,86 @@
 
 const template = require('./dashboard-chart.html');
 
+function getChartThemeColor(cssVar, fallback) {
+  if (typeof document === 'undefined') return fallback;
+  const val = getComputedStyle(document.documentElement).getPropertyValue(cssVar)?.trim();
+  return val || fallback;
+}
+
+function getThemeColors() {
+  return {
+    tickColor: getChartThemeColor('--studio-text-primary', '#111827'),
+    gridColor: getChartThemeColor('--studio-border', '#e5e7eb')
+  };
+}
+
+const SCALELESS_TYPES = ['pie', 'doughnut', 'polarArea', 'radar'];
+
+function applyThemeChartOptions(config) {
+  const { tickColor, gridColor } = getThemeColors();
+  const type = config.type || '';
+  const options = config.options || {};
+  const plugins = { ...options.plugins };
+  const legend = plugins.legend || {};
+  plugins.legend = {
+    ...legend,
+    labels: { ...legend.labels, color: tickColor }
+  };
+
+  // Pie/doughnut/polarArea/radar don't use cartesian scales
+  if (SCALELESS_TYPES.includes(type)) {
+    return {
+      ...config,
+      options: { ...options, plugins }
+    };
+  }
+
+  const scales = { ...options.scales };
+  const applyScaleTheme = (id) => {
+    const scale = scales[id] || {};
+    scales[id] = {
+      ...scale,
+      ticks: { ...scale.ticks, color: tickColor },
+      grid: { ...scale.grid, color: gridColor }
+    };
+  };
+  ['x', 'y'].forEach(id => {
+    if (!scales[id]) scales[id] = {};
+    applyScaleTheme(id);
+  });
+  Object.keys(scales).forEach(id => {
+    if (id !== 'x' && id !== 'y') applyScaleTheme(id);
+  });
+  return {
+    ...config,
+    options: {
+      ...options,
+      scales,
+      plugins
+    }
+  };
+}
+
+function recreateChartWithTheme(component) {
+  if (!component.$refs.chart || !component.value?.$chart) return;
+  const canvas = component.$refs.chart;
+  const Chart = typeof window !== 'undefined' && window.Chart;
+  if (!Chart) return;
+  const existing = Chart.getChart(canvas);
+  if (existing) {
+    try {
+      existing.destroy();
+    } catch (_) { /* ignore teardown errors */ }
+  }
+  component.chart = null;
+  try {
+    const config = applyThemeChartOptions(component.value.$chart);
+    component.chart = new Chart(canvas, config);
+  } catch (err) {
+    console.warn('Dashboard chart recreate failed:', err);
+  }
+}
+
 module.exports = app => app.component('dashboard-chart', {
   template: template,
   props: ['value', 'fullscreen'],
@@ -11,8 +91,20 @@ module.exports = app => app.component('dashboard-chart', {
     showDetailModal: false
   }),
   mounted() {
-    const ctx = this.$refs.chart.getContext('2d');
-    this.chart = new Chart(ctx, this.value.$chart);
+    const config = applyThemeChartOptions(this.value.$chart);
+    this.chart = new Chart(this.$refs.chart, config);
+    this._onStudioThemeChanged = () => recreateChartWithTheme(this);
+    document.documentElement.addEventListener('studio-theme-changed', this._onStudioThemeChanged);
+  },
+  beforeUnmount() {
+    document.documentElement.removeEventListener('studio-theme-changed', this._onStudioThemeChanged);
+    const existing = typeof window !== 'undefined' && window.Chart && window.Chart.getChart(this.$refs.chart);
+    if (existing) {
+      try {
+        existing.destroy();
+      } catch (_) { /* ignore */ }
+    }
+    this.chart = null;
   },
   methods: {
     exportPNG() {
@@ -34,6 +126,9 @@ module.exports = app => app.component('dashboard-chart', {
         return this.value.$chart.header;
       }
       return null;
+    },
+    showControls() {
+      return this.fullscreen !== undefined;
     }
   }
 });

package/frontend/src/dashboard-result/dashboard-map/dashboard-map.js

@@ -3,15 +3,25 @@
 
 const template = require('./dashboard-map.html');
 
+function getMapTileLayerOptions() {
+  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+  return isDark
+    ? { url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>', subdomains: 'abcd', maxZoom: 20 }
+    : { url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '&copy; OpenStreetMap contributors' };
+}
+
 module.exports = app => app.component('dashboard-map', {
   template: template,
   props: ['value', 'height'],
+  data() {
+    return { _map: null, _tileLayer: null };
+  },
   mounted() {
     const fc = this.value.$featureCollection.featureCollection || this.value.$featureCollection;
     const map = L.map(this.$refs.map).setView([0, 0], 1);
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; OpenStreetMap contributors'
-    }).addTo(map);
+    this._map = map;
+    const opts = getMapTileLayerOptions();
+    this._tileLayer = L.tileLayer(opts.url, opts).addTo(map);
     const layer = L.geoJSON(fc).addTo(map);
 
     this.$nextTick(() => {
@@ -21,6 +31,20 @@ module.exports = app => app.component('dashboard-map', {
         map.fitBounds(bounds);
       }
     });
+    this._onStudioThemeChanged = () => this._updateMapTileLayer();
+    document.documentElement.addEventListener('studio-theme-changed', this._onStudioThemeChanged);
+  },
+  beforeDestroy() {
+    document.documentElement.removeEventListener('studio-theme-changed', this._onStudioThemeChanged);
+  },
+  methods: {
+    _updateMapTileLayer() {
+      if (!this._map || !this._tileLayer || typeof L === 'undefined') return;
+      this._tileLayer.remove();
+      this._tileLayer = null;
+      const opts = getMapTileLayerOptions();
+      this._tileLayer = L.tileLayer(opts.url, opts).addTo(this._map);
+    }
   },
   computed: {
     mapStyle() {

package/frontend/src/dashboard-result/dashboard-result.html

@@ -2,7 +2,7 @@
   <div v-if="Array.isArray(result)">
     <div v-for="el in result" :key="el._id || el.finishedEvaluatingAt">
       <component
-        class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
+        class="bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
         :is="getComponentForValue(el)"
         :value="el">
       </component>
@@ -10,14 +10,14 @@
   </div>
   <div v-else>
     <component
-      class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
+      class="bg-surface shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
       :is="getComponentForValue(result)"
       :value="result"
       :fullscreen="fullscreen"
       @fullscreen="$emit('fullscreen')">
     </component>
   </div>
-  <div class="text-right text-sm text-gray-700 mt-1" v-if="finishedEvaluatingAt && !fullscreen">
+  <div class="text-right text-sm text-content-secondary mt-1" v-if="finishedEvaluatingAt && !fullscreen">
     Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}
   </div>
 </div>

package/frontend/src/dashboards/dashboards.html

@@ -1,119 +1,111 @@
-<div class="dashboards max-w-5xl mx-auto mt-8">
-  <div v-if="status === 'loading'" class="text-center mt-4">
-    <svg
-      class="inline w-8 h-8 animate-spin text-ultramarine-600"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        class="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      ></circle>
-      <path
-        class="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
-      ></path>
-    </svg>
-  </div>
-    <div v-if="status === 'loaded' && dashboards.length === 0">
-      <div class="text-center">
-        <h3 class="mt-2 text-sm font-semibold text-gray-900">No dashboards yet</h3>
-        <p class="mt-1 text-sm text-gray-500">Get started by creating a new dashboard.</p>
-        <div class="mt-6">
-          <button type="button" class="inline-flex items-center rounded-md bg-ultramarine-600 px-3 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">
-            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-            </svg>
-            New Dashboard
-          </button>
-        </div>
-      </div>
+<div class="dashboards bg-page min-h-[calc(100vh-55px)]">
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-lg font-semibold text-content">Dashboards</h1>
+      <button
+        type="button"
+        @click="showCreateDashboardModal = true"
+        class="rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+        New Dashboard
+      </button>
     </div>
 
-    <div class="px-4 sm:px-6 lg:px-8">
-      <div class="sm:flex sm:items-center">
-        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-gray-900">Dashboards</h1>
-        </div>
-        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-          <button
-            type="button"
-            @click="showCreateDashboardModal = true"
-            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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">Create New Dashboard</button>
-        </div>
+    <div v-if="status === 'loading'" class="text-center py-12">
+      <svg
+        class="inline w-8 h-8 animate-spin text-gray-400"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+      </svg>
+    </div>
+
+    <div v-else-if="dashboards.length === 0" class="text-center py-12">
+      <h3 class="text-sm font-semibold text-content">No dashboards yet</h3>
+      <p class="mt-1 text-sm text-content-tertiary">Get started by creating a new dashboard.</p>
+      <div class="mt-4">
+        <button
+          type="button"
+          @click="showCreateDashboardModal = true"
+          class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">
+          <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+          </svg>
+          New Dashboard
+        </button>
       </div>
-      <div class="mt-8 flow-root">
-        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-          <div class="inline-block min-w-full py-2 align-middle">
-            <table class="min-w-full divide-y divide-gray-300">
-              <thead>
-                <tr>
-                  <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Title</th>
-                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]">Description</th>
-                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                  </th>
-                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="divide-y divide-gray-200 bg-white">
-                <tr v-for="dashboard in dashboards">
-                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{dashboard.title}}</td>
-                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                    <router-link
-                      :to="'/dashboard/' + dashboard._id + '?edit=true'"
-                      class="text-ultramarine-600 hover:text-ultramarine-900">
-                      Edit
-                    </router-link>
-                  </td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                    <router-link
-                      :to="'/dashboard/' + dashboard._id"
-                      class="text-ultramarine-600 hover:text-ultramarine-900">
-                      View
-                    </router-link>
-                  </td>
-                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                    <button
-                      @click="showDeleteDashboardModal=dashboard"
-                      class="text-ultramarine-600 hover:text-ultramarine-900">
-                      Delete
-                    </button>
-                  </td>
-                </tr>
+    </div>
 
-                <!-- More people... -->
-              </tbody>
-            </table>
+    <div v-else class="space-y-3">
+      <div
+        v-for="dashboard in dashboards"
+        :key="dashboard._id"
+        class="bg-surface rounded-lg border border-edge px-5 py-4 flex items-center justify-between hover:border-edge-strong transition-colors"
+      >
+        <div class="min-w-0 flex-1 mr-4">
+          <router-link
+            :to="'/dashboard/' + dashboard._id"
+            class="text-sm font-semibold text-content hover:text-primary block truncate">
+            {{ dashboard.title }}
+          </router-link>
+          <p v-if="dashboard.description" class="mt-0.5 text-sm text-content-tertiary truncate">{{ dashboard.description }}</p>
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          <router-link
+            :to="'/dashboard/' + dashboard._id"
+            class="rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">
+            View
+          </router-link>
+          <div class="relative" v-click-outside="() => closeMenu(dashboard._id)">
+            <button
+              type="button"
+              @click="toggleMenu(dashboard._id)"
+              class="rounded-md bg-surface px-2 py-1.5 text-content-tertiary ring-1 ring-inset ring-gray-300 hover:bg-page">
+              <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">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+              </svg>
+            </button>
+            <div
+              v-if="openMenuId === dashboard._id"
+              class="absolute right-0 mt-1 w-36 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 z-10"
+            >
+              <div class="py-1">
+                <router-link
+                  :to="'/dashboard/' + dashboard._id + '?edit=true'"
+                  class="block px-4 py-2 text-sm text-content-secondary hover:bg-muted">
+                  Edit
+                </router-link>
+                <button
+                  @click="showDeleteDashboardModal = dashboard; openMenuId = null"
+                  type="button"
+                  class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-muted">
+                  Delete
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <modal v-if="showCreateDashboardModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
-
-        <create-dashboard @close="insertNewDashboard"></create-dashboard>
-      </template>
-    </modal>
+  <modal v-if="showCreateDashboardModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
+      <create-dashboard @close="insertNewDashboard"></create-dashboard>
+    </template>
+  </modal>
 
-    <modal v-if="showDeleteDashboardModal">
-      <template v-slot:body>
-        <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
-        <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
-        <div class="flex space-x-2">
-          <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
-          <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600" @click="showDeleteDashboardModal=null;">Cancel</button>
-        </div>
-      </template>
-    </modal>
-  </div>
-</div>
+  <modal v-if="showDeleteDashboardModal">
+    <template v-slot:body>
+      <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
+      <h2>Are you sure you want to delete "{{showDeleteDashboardModal.title}}"?</h2>
+      <div class="flex space-x-2 mt-4">
+        <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 text-sm font-semibold" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
+        <button class="px-4 py-2 bg-muted text-content-secondary rounded-md hover:bg-muted text-sm font-semibold" @click="showDeleteDashboardModal=null;">Cancel</button>
+      </div>
+    </template>
+  </modal>
+</div>

package/frontend/src/dashboards/dashboards.js

@@ -10,9 +10,18 @@ module.exports = app => app.component('dashboards', {
     status: 'loading',
     dashboards: [],
     showCreateDashboardModal: false,
-    showDeleteDashboardModal: null
+    showDeleteDashboardModal: null,
+    openMenuId: null
   }),
   methods: {
+    toggleMenu(id) {
+      this.openMenuId = this.openMenuId === id ? null : id;
+    },
+    closeMenu(id) {
+      if (this.openMenuId === id) {
+        this.openMenuId = null;
+      }
+    },
     async deleteDashboard(dashboard) {
       if (!dashboard) {
         return;
@@ -28,6 +37,21 @@ module.exports = app => app.component('dashboards', {
       this.showCreateDashboardModal = false;
     }
   },
+  directives: {
+    clickOutside: {
+      beforeMount(el, binding) {
+        el._clickOutside = (event) => {
+          if (!(event.target === el || el.contains(event.target))) {
+            binding.value();
+          }
+        };
+        document.body.addEventListener('click', el._clickOutside);
+      },
+      unmounted(el) {
+        document.body.removeEventListener('click', el._clickOutside);
+      }
+    }
+  },
   async mounted() {
     const { dashboards } = await api.Dashboard.getDashboards();
     this.dashboards = dashboards;

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

@@ -1,6 +1,6 @@
 <div class="w-full">
-  <pre v-if="!isGeoJsonGeometry || !mapVisible" class="w-full whitespace-pre-wrap break-words font-mono text-sm text-gray-700 m-0">{{displayValue}}</pre>
-  <div v-show="isGeoJsonGeometry && mapVisible" class="mt-2 border border-gray-200 rounded relative">
+  <pre v-if="!isGeoJsonGeometry || !mapVisible" class="w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0">{{displayValue}}</pre>
+  <div v-show="isGeoJsonGeometry && mapVisible" class="mt-2 border border-edge rounded relative">
     <div ref="map" class="h-64 w-full" style="min-height: 256px; height: 256px;"></div>
     <!-- Undo button below map -->
     <div v-if="isEditable && canUndo" class="mt-2 flex justify-end">

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

@@ -47,6 +47,7 @@ module.exports = app => app.component('detail-default', {
       mapVisible: false,
       mapInstance: null,
       mapLayer: null,
+      mapTileLayer: null,
       draggableMarker: null,
       draggableMarkers: [], // For polygon vertices
       hasUnsavedChanges: false,
@@ -138,6 +139,7 @@ module.exports = app => app.component('detail-default', {
   },
   beforeDestroy() {
     this.hideContextMenu();
+    document.documentElement.removeEventListener('studio-theme-changed', this._onStudioThemeChanged);
     if (this.draggableMarker) {
       this.draggableMarker.remove();
       this.draggableMarker = null;
@@ -150,6 +152,10 @@ module.exports = app => app.component('detail-default', {
     });
     this.draggableMarkers = [];
     if (this.mapInstance) {
+      if (this.mapTileLayer) {
+        this.mapTileLayer.remove();
+        this.mapTileLayer = null;
+      }
       this.mapInstance.remove();
       this.mapInstance = null;
       this.mapLayer = null;
@@ -190,9 +196,9 @@ module.exports = app => app.component('detail-default', {
             mapContainer.style.position = 'relative';
           }
 
-          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap contributors'
-          }).addTo(this.mapInstance);
+          this.updateMapTileLayer();
+          this._onStudioThemeChanged = () => this.updateMapTileLayer();
+          document.documentElement.addEventListener('studio-theme-changed', this._onStudioThemeChanged);
 
           // Explicitly invalidate size after creation to ensure proper rendering
           this.$nextTick(() => {
@@ -212,6 +218,21 @@ module.exports = app => app.component('detail-default', {
         }
       });
     },
+    getMapTileLayerOptions() {
+      const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+      return isDark
+        ? { url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>', subdomains: 'abcd', maxZoom: 20 }
+        : { url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '&copy; OpenStreetMap contributors' };
+    },
+    updateMapTileLayer() {
+      if (!this.mapInstance || typeof L === 'undefined') return;
+      if (this.mapTileLayer) {
+        this.mapTileLayer.remove();
+        this.mapTileLayer = null;
+      }
+      const opts = this.getMapTileLayerOptions();
+      this.mapTileLayer = L.tileLayer(opts.url, opts).addTo(this.mapInstance);
+    },
     updateMapLayer() {
       if (!this.mapInstance || !this.isGeoJsonGeometry) {
         return;

package/frontend/src/document/confirm-changes/confirm-changes.html

@@ -10,7 +10,7 @@
         Confirm
     </async-button>
     <button 
-        class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
+        class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-edge-strong"
         @click="closeConfirm">
         Cancel
     </button>

package/frontend/src/document/confirm-delete/confirm-delete.html

@@ -10,7 +10,7 @@
       Confirm
   </async-button>
   <button
-      class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
+      class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-edge-strong"
       @click="closeDelete">
       Cancel
   </button>

package/frontend/src/document/document.css

@@ -3,7 +3,7 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  background-color: white;
+  background-color: var(--studio-bg-surface);
   border-radius: 5px;
   padding: 15px 15px;
   margin: -15px 0 15px 0;