nuxtseo-layer-devtools 5.2.1 → 5.2.2

package/assets/css/global.css

@@ -619,6 +619,20 @@ html.dark {
   50% { opacity: 0.4; }
 }
 
+/* Remote (standalone) dev-server badge inside the source select */
+.devtools-remote-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  font-weight: 500;
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
 /* Main content wrapper */
 .devtools-main {
   flex: 1;

package/components/DevtoolsLayout.vue

@@ -160,46 +160,61 @@ function disconnectStandalone() {
                   <span v-if="hasUpdate" class="update-dot" />
                 </a>
               </UTooltip>
-              <!-- Mode dropdown: embedded with production URL -->
-              <div v-if="hasProductionUrl && !isStandalone" ref="modeDropdownRef" class="mode-dropdown-wrapper">
+              <!-- Unified source select. One control for every data source (Local,
+                   Production, and a remote/standalone dev server). Always a select,
+                   never a dismissable chip; the standalone disconnect lives in the menu. -->
+              <div v-if="isConnected || isStandalone" ref="modeDropdownRef" class="mode-dropdown-wrapper">
                 <button type="button" class="devtools-mode-btn" @click="modeDropdownOpen = !modeDropdownOpen">
                   <UIcon :name="isProductionMode ? 'carbon:cloud' : 'carbon:laptop'" class="w-3.5 h-3.5" />
                   <span class="hidden sm:inline">{{ isProductionMode ? 'Production' : 'Local' }}</span>
-                  <template v-if="isProductionMode">
-                    <span class="devtools-production-badge">
-                      <span class="devtools-production-dot" />
-                      {{ productionHostname }}
-                    </span>
-                  </template>
+                  <span v-if="isProductionMode" class="devtools-production-badge">
+                    <span class="devtools-production-dot" />
+                    {{ productionHostname }}
+                  </span>
+                  <span v-else-if="isStandalone" class="devtools-remote-badge">
+                    <UIcon name="carbon:plug" class="w-3 h-3" />
+                    {{ standaloneHostname }}
+                  </span>
                   <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50 transition-transform" :class="modeDropdownOpen ? 'rotate-180' : ''" />
                 </button>
                 <Transition name="dropdown">
                   <div v-if="modeDropdownOpen" class="mode-dropdown-menu">
-                    <button type="button" class="mode-dropdown-item" @click="selectMode('local')">
+                    <button type="button" class="mode-dropdown-item" :class="!isProductionMode ? 'is-active' : ''" @click="selectMode('local')">
                       <UIcon name="carbon:laptop" class="w-4 h-4" />
                       <span>Local</span>
+                      <UIcon v-if="!isProductionMode" name="carbon:checkmark" class="w-3.5 h-3.5 ml-auto text-[var(--seo-green)]" />
                     </button>
-                    <button type="button" class="mode-dropdown-item" @click="selectMode('production')">
+                    <button
+                      type="button"
+                      class="mode-dropdown-item"
+                      :class="[isProductionMode ? 'is-active' : '', !hasProductionUrl ? 'is-disabled' : '']"
+                      :disabled="!hasProductionUrl"
+                      @click="hasProductionUrl && selectMode('production')"
+                    >
                       <UIcon name="carbon:cloud" class="w-4 h-4" />
                       <span>Production</span>
-                      <span class="devtools-production-badge text-[10px]">
+                      <span v-if="hasProductionUrl" class="devtools-production-badge text-[10px]">
                         <span class="devtools-production-dot" />
                         {{ productionHostname }}
                       </span>
+                      <span v-else class="text-[10px] opacity-60 ml-auto">Set site url</span>
+                      <UIcon v-if="isProductionMode" name="carbon:checkmark" class="w-3.5 h-3.5 ml-1 text-[var(--seo-green)]" />
                     </button>
+                    <!-- Remote connection context: shown when reading from a standalone dev server -->
+                    <template v-if="isStandalone">
+                      <div class="mode-dropdown-divider" />
+                      <div class="mode-dropdown-meta">
+                        <UIcon name="carbon:plug" class="w-3.5 h-3.5 text-[var(--seo-green)]" />
+                        <span class="truncate">{{ standaloneHostname }}</span>
+                      </div>
+                      <button type="button" class="mode-dropdown-item" @click="disconnectStandalone(); modeDropdownOpen = false">
+                        <UIcon name="carbon:logout" class="w-4 h-4" />
+                        <span>Disconnect</span>
+                      </button>
+                    </template>
                   </div>
                 </Transition>
               </div>
-              <!-- Standalone mode indicator -->
-              <div v-if="isStandalone" class="standalone-indicator">
-                <UIcon name="carbon:plug" class="w-3.5 h-3.5 text-[var(--seo-green)]" />
-                <span class="text-xs font-mono">{{ standaloneHostname }}</span>
-                <UTooltip text="Disconnect">
-                  <button type="button" class="standalone-disconnect" @click="disconnectStandalone">
-                    <UIcon name="carbon:close" class="w-3 h-3" />
-                  </button>
-                </UTooltip>
-              </div>
             </div>
           </div>
 
@@ -408,6 +423,36 @@ function disconnectStandalone() {
   color: var(--color-text);
 }
 
+.mode-dropdown-item.is-active {
+  color: var(--color-text);
+}
+
+.mode-dropdown-item.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mode-dropdown-item.is-disabled:hover {
+  background: transparent;
+  color: var(--color-text-muted);
+}
+
+.mode-dropdown-divider {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--color-border);
+}
+
+.mode-dropdown-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.6875rem;
+  font-family: var(--font-mono);
+  color: var(--color-text-subtle);
+}
+
 .dropdown-enter-active {
   transition: opacity 150ms ease, transform 150ms ease;
 }

package/components/DevtoolsSnippet.vue

@@ -46,7 +46,7 @@ const {
   border-radius: var(--radius-sm);
   font-size: 0.6875rem;
   line-height: 1.6;
-  padding: 0.5rem 0.625rem !important;
+  padding: 0.875rem 1rem !important;
   max-height: 300px;
   overflow-y: auto;
 }

package/composables/host.ts

@@ -0,0 +1,70 @@
+import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
+import type { BirpcReturn } from 'birpc'
+import type { $Fetch } from 'nitropack/types'
+import type { Ref } from 'vue'
+
+/**
+ * A narrow, version-resilient view over the Nuxt DevTools host.
+ *
+ * The devtools-kit iframe client (`NuxtDevtoolsIframeClient`) only types a small
+ * stable surface (`host.app.$fetch`, `host.nuxt.$router`, `host.app.colorMode`,
+ * `devtools.extendClientRpc`). Module clients historically reached *past* it into
+ * Vue runtime internals (`vueApp._context.provides`, `vueApp._instance.appContext`,
+ * `globalProperties.$route`), which differ across @nuxt/devtools versions and
+ * threw, wedging the panel. This adapter is the single guarded place that touches
+ * those internals; every module reads from it instead.
+ */
+export interface DevtoolsHost {
+  /** `host.app.$fetch`, or undefined when the embedded host hasn't exposed it. */
+  fetch: $Fetch | undefined
+  /** Current host route, derived from the typed `$router`, never `globalProperties.$route`. */
+  route: Ref<any> | undefined
+  /** Host app base URL, resolved from runtime config then router history, falling back to '/'. */
+  baseURL: string
+  /** Resolve an app-level provide (e.g. `'usehead'`) regardless of which Vue internal exposes it. */
+  inject: <T>(key: string | symbol) => T | undefined
+  /** Open a birpc channel to the host, or undefined when the devtools bridge is unavailable. */
+  rpc: <ServerFunctions = Record<string, never>, ClientFunctions = Record<string, never>>(
+    namespace: string,
+    handlers: ClientFunctions,
+  ) => BirpcReturn<ServerFunctions, ClientFunctions> | undefined
+  /** Open a file in the user's editor via the built-in devtools RPC (no-op if unavailable). */
+  openInEditor: (path: string) => void
+}
+
+/**
+ * Build a {@link DevtoolsHost} from a raw devtools-kit client.
+ *
+ * Pure: no import-time side effects, no connection logic. Takes the client as an
+ * argument so it can be unit-tested against a malformed host without booting devtools.
+ */
+export function createDevtoolsHost(client: NuxtDevtoolsIframeClient | undefined): DevtoolsHost {
+  const nuxt: any = client?.host?.nuxt
+  const $router: any = nuxt?.$router
+  const baseURL: string = nuxt?.$config?.app?.baseURL
+    || $router?.options?.history?.base
+    // @ts-expect-error host.app.baseURL is not in the typed surface; kept only as a last resort
+    || client?.host?.app?.baseURL
+    || '/'
+
+  return {
+    // @ts-expect-error host.app.$fetch is untyped on some versions
+    fetch: client?.host?.app?.$fetch,
+    route: $router?.currentRoute,
+    baseURL,
+    inject<T>(key: string | symbol): T | undefined {
+      const app: any = nuxt?.vueApp
+      const provides = app?._context?.provides ?? app?._instance?.appContext?.provides
+      return provides?.[key]
+    },
+    rpc(namespace, handlers) {
+      const extend = client?.devtools?.extendClientRpc
+      if (typeof extend !== 'function')
+        return undefined
+      return extend(namespace, handlers) as any
+    },
+    openInEditor(path) {
+      client?.devtools?.rpc?.openInEditor?.(path)
+    },
+  }
+}

package/composables/rpc.ts

@@ -1,17 +1,25 @@
 import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/types'
 import type { $Fetch } from 'nitropack/types'
 import type { Ref } from 'vue'
+import type { DevtoolsHost } from './host'
 import { onDevtoolsClientConnected, useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
 import { ofetch } from 'ofetch'
 import { ref, watch, watchEffect } from 'vue'
-import { isConnected, refreshSources, standaloneUrl } from './state'
+import { createDevtoolsHost } from './host'
+import { base, isConnected, path, query, refreshSources, standaloneUrl } from './state'
 
 export const appFetch: Ref<$Fetch | undefined> = ref()
 export const devtools: Ref<NuxtDevtoolsClient | undefined> = ref()
 export const colorMode: Ref<'dark' | 'light'> = ref('dark')
 
 export interface DevtoolsConnectionOptions {
-  onConnected?: (client: any) => void
+  /**
+   * Called once the embedded host is connected, with a guarded {@link DevtoolsHost}.
+   * Only needed by modules that read host provides or open an RPC channel — route,
+   * fetch, colorMode and base are already wired into layer state by the time this fires.
+   */
+  onConnected?: (host: DevtoolsHost) => void
+  /** Called on every host route change (the layer already refreshes data itself). */
   onRouteChange?: (route: any) => void
 }
 
@@ -33,29 +41,49 @@ export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}):
   // Embedded mode: connect via devtools-kit iframe client
   onDevtoolsClientConnected(async (client) => {
     isConnected.value = true
-    // @ts-expect-error untyped
-    appFetch.value = client.host?.app?.$fetch
+    const host = createDevtoolsHost(client)
+    appFetch.value = host.fetch
+    devtools.value = client.devtools
+    // Kick an initial data load on connect regardless of route availability, so
+    // modules that only needed "refresh once connected" require no onConnected.
+    refreshSources()
+
     watchEffect(() => {
       colorMode.value = client.host?.app?.colorMode?.value ?? (
         window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
       )
     })
-    devtools.value = client.devtools
-    options.onConnected?.(client)
 
-    if (options.onRouteChange) {
-      const $route = client.host?.nuxt?.vueApp?.config?.globalProperties?.$route
-      if ($route)
-        options.onRouteChange($route)
-      const $router = client.host?.nuxt?.$router
-      if ($router) {
-        const removeAfterEach = $router.afterEach((route: any) => {
-          options.onRouteChange!(route)
-        })
-        // Clean up when devtools client disconnects
-        // @ts-expect-error app:unmount exists at runtime but is not in RuntimeNuxtHooks
-        client.host.nuxt.hook('app:unmount', removeAfterEach)
-      }
+    // The layer owns host route tracking so individual modules never have to
+    // reach into the host Vue app. path/query/base feed every module's
+    // useAsyncData(watch: [refreshTime]); refreshSources() bumps that clock.
+    base.value = host.baseURL
+    const applyRoute = (route: any): void => {
+      if (!route)
+        return
+      path.value = route.path || '/'
+      query.value = route.query
+      refreshSources()
+      options.onRouteChange?.(route)
+    }
+    applyRoute(host.route?.value)
+    const $router = client.host?.nuxt?.$router
+    if ($router) {
+      const removeAfterEach = $router.afterEach((route: any) => applyRoute(route))
+      // Clean up when devtools client disconnects
+      // @ts-expect-error app:unmount exists at runtime but is not in RuntimeNuxtHooks
+      client.host?.nuxt?.hook('app:unmount', removeAfterEach)
+    }
+
+    // Module-specific wiring (host provides / RPC channels) with the guarded host.
+    // A throw here must not wedge the panel on "Connecting…": data loading only
+    // needs appFetch (set above) plus a refreshTime bump, so recover with a refresh.
+    try {
+      options.onConnected?.(host)
+    }
+    catch (err) {
+      console.error('[nuxt-seo] devtools onConnected handler failed, recovering with data refresh:', err)
+      refreshSources()
     }
   })
 

package/composables/shiki.ts

@@ -4,6 +4,10 @@ import { createHighlighterCore } from 'shiki/core'
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 import { computed, ref, toValue } from 'vue'
 
+// Re-exported so consuming layers can type custom grammars without depending on
+// `shiki` directly (it isn't a dependency of the module repos, only of this layer).
+export type { LanguageRegistration } from 'shiki'
+
 export const shiki: Ref<HighlighterCore | undefined> = ref()
 
 export interface LoadShikiOptions {
@@ -41,6 +45,11 @@ export function useRenderCodeHighlight(code: MaybeRef<string>, lang: string): Co
       return ''
     return shiki.value.codeToHtml(toValue(code) || '', {
       lang,
+      // Emit `--shiki-light` / `--shiki-dark` CSS variables instead of a baked-in
+      // `color:` so global.css can swap colors per devtools color mode. Without this,
+      // shiki writes `color:#xxx` inline and the `.shiki span { color: var(--shiki-light) }`
+      // rule resolves to an undefined variable, wiping every syntax color to plain text.
+      defaultColor: false,
       themes: {
         light: 'vitesse-light',
         dark: 'vitesse-dark',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",
@@ -51,7 +51,7 @@
     "shiki": "^4.2.0",
     "tailwindcss": "^4.0.0",
     "ufo": "^1.6.4",
-    "nuxtseo-shared": "5.2.1"
+    "nuxtseo-shared": "5.2.2"
   },
   "devDependencies": {
     "nuxt": "^4.4.7",