nuxtseo-layer-devtools 0.1.1 → 0.1.3

package/assets/css/global.css

@@ -42,8 +42,8 @@
   --color-surface: var(--color-neutral-950);
   --color-surface-elevated: var(--color-neutral-900);
   --color-surface-sunken: oklch(7% 0.004 260);
-  --color-border: var(--color-neutral-800);
-  --color-border-subtle: oklch(16% 0.008 260);
+  --color-border: oklch(25% 0.012 260);
+  --color-border-subtle: oklch(20% 0.01 260);
   --color-text: var(--color-neutral-100);
   --color-text-muted: var(--color-neutral-400);
   --color-text-subtle: var(--color-neutral-500);
@@ -234,6 +234,12 @@ h1, h2, h3, h4, h5, h6 {
   background: transparent !important;
 }
 
+.shiki,
+.shiki span {
+  color: var(--shiki-light) !important;
+  background-color: transparent !important;
+}
+
 .dark .shiki,
 .dark .shiki span {
   color: var(--shiki-dark) !important;
@@ -501,42 +507,26 @@ html.dark {
 }
 
 /* Preview source toggle */
-.devtools-preview-toggle {
-  display: flex;
-  gap: 1px;
-  background: var(--color-border);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.devtools-preview-btn {
-  display: flex;
+.devtools-mode-btn {
+  display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
+  padding: 0.2rem 0.5rem;
   font-size: 0.6875rem;
   font-weight: 500;
   color: var(--color-text-muted);
   background: var(--color-surface-sunken);
-  border: none;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
   cursor: pointer;
-  transition: color 150ms, background 150ms;
+  transition: color 150ms, background 150ms, border-color 150ms;
   white-space: nowrap;
 }
 
-.devtools-preview-btn:hover {
+.devtools-mode-btn:hover {
   color: var(--color-text);
   background: var(--color-surface-elevated);
-}
-
-.devtools-preview-btn.active {
-  color: var(--color-text);
-  background: var(--color-surface-elevated);
-  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
-}
-
-.dark .devtools-preview-btn.active {
-  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.2);
+  border-color: var(--color-border-hover, var(--color-border));
 }
 
 /* Production URL badge */

package/components/DevtoolsLayout.vue

@@ -92,8 +92,21 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
                 v-if="version"
                 class="font-mono text-[10px] sm:text-xs hidden sm:inline-flex"
               >
-                {{ version }}
+                v{{ version }}
               </UBadge>
+              <UDropdownMenu
+                v-if="hasProductionUrl"
+                :items="[
+                  { label: 'Local', icon: 'carbon:laptop', onSelect: () => previewSource = 'local' },
+                  { label: `Production (${productionHostname})`, icon: 'carbon:cloud', onSelect: () => previewSource = 'production' },
+                ]"
+              >
+                <button type="button" class="devtools-mode-btn">
+                  <UIcon :name="isProductionMode ? 'carbon:cloud' : 'carbon:laptop'" class="w-3.5 h-3.5" />
+                  <span class="hidden sm:inline">{{ isProductionMode ? 'Production' : 'Local' }}</span>
+                  <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50" />
+                </button>
+              </UDropdownMenu>
             </div>
           </div>
 
@@ -150,36 +163,6 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
               </template>
             </div>
 
-            <!-- Preview source toggle -->
-            <div v-if="hasProductionUrl" class="devtools-preview-toggle">
-              <button
-                type="button"
-                class="devtools-preview-btn"
-                :class="{ active: previewSource === 'local' }"
-                @click="previewSource = 'local'"
-              >
-                <UIcon name="carbon:laptop" class="w-3.5 h-3.5" aria-hidden="true" />
-                <span class="hidden sm:inline">Local</span>
-              </button>
-              <button
-                type="button"
-                class="devtools-preview-btn"
-                :class="{ active: previewSource === 'production' }"
-                @click="previewSource = 'production'"
-              >
-                <UIcon name="carbon:cloud" class="w-3.5 h-3.5" aria-hidden="true" />
-                <span class="hidden sm:inline">Production</span>
-              </button>
-            </div>
-
-            <!-- Production URL indicator -->
-            <UTooltip v-if="isProductionMode" :text="productionUrl">
-              <span class="devtools-production-badge">
-                <span class="devtools-production-dot" />
-                <span class="hidden sm:inline text-xs">{{ productionHostname }}</span>
-              </span>
-            </UTooltip>
-
             <!-- Actions -->
             <div class="flex items-center gap-1">
               <slot name="actions" />
@@ -211,7 +194,9 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
       <div class="devtools-main">
         <main class="mx-auto flex flex-col w-full max-w-7xl">
           <DevtoolsLoading v-if="loading" />
-          <slot v-else />
+          <div v-show="!loading">
+            <slot />
+          </div>
         </main>
       </div>
     </div>

package/composables/shiki.ts

@@ -3,7 +3,6 @@ import type { ComputedRef, MaybeRef, Ref } from 'vue'
 import { createHighlighterCore } from 'shiki/core'
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 import { computed, ref, toValue } from 'vue'
-import { colorMode } from './rpc'
 
 export const shiki: Ref<HighlighterCore | undefined> = ref()
 
@@ -40,10 +39,12 @@ export function useRenderCodeHighlight(code: MaybeRef<string>, lang: string): Co
   return computed(() => {
     if (!shiki.value)
       return ''
-    const theme = colorMode.value === 'dark' ? 'vitesse-dark' : 'vitesse-light'
     return shiki.value.codeToHtml(toValue(code) || '', {
       lang,
-      theme,
+      themes: {
+        light: 'vitesse-light',
+        dark: 'vitesse-dark',
+      },
     }) || ''
   })
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",