nuxtseo-layer-devtools 0.2.2 → 0.2.4

package/assets/css/global.css

@@ -216,7 +216,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .dark .glass {
-  background: oklch(9% 0.005 260 / 0.85);
+  background: oklch(9% 0.005 260 / 0.7);
 }
 
 /* Code block styling */
@@ -565,19 +565,29 @@ html.dark {
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0.75rem;
   min-height: calc(100vh - 60px);
 }
 
+.devtools-main-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 0.75rem 1rem;
+}
+
 @media (min-width: 640px) {
-  .devtools-main {
-    padding: 1rem;
+  .devtools-main-content {
+    padding: 1rem 1.25rem;
   }
 }
 
 @media (max-height: 600px) {
   .devtools-main {
-    padding: 0;
     min-height: 0;
   }
+  .devtools-main-content {
+    padding: 0;
+  }
 }

package/components/DevtoolsLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref } from 'vue'
 import { colorMode } from '../composables/rpc'
 import { hasProductionUrl, isProductionMode, previewSource, productionUrl } from '../composables/state'
 
@@ -58,6 +59,17 @@ const productionHostname = computed(() => {
 })
 
 const isRouteNav = computed(() => navItems.some(item => item.to))
+
+const modeDropdownOpen = ref(false)
+const modeDropdownRef = ref<HTMLElement>()
+onClickOutside(modeDropdownRef, () => {
+  modeDropdownOpen.value = false
+})
+
+function selectMode(mode: 'local' | 'production') {
+  previewSource.value = mode
+  modeDropdownOpen.value = false
+}
 </script>
 
 <template>
@@ -94,15 +106,8 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
               >
                 v{{ version }}
               </UBadge>
-              <UDropdownMenu
-                v-if="hasProductionUrl"
-                :items="[
-                  { label: 'Local', icon: 'carbon:laptop', onSelect: () => previewSource = 'local' },
-                  { label: 'Production', icon: 'carbon:cloud', hostname: productionHostname, onSelect: () => previewSource = 'production' },
-                ]"
-                :portal="false"
-              >
-                <button type="button" class="devtools-mode-btn">
+              <div v-if="hasProductionUrl" 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">
@@ -111,16 +116,25 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
                       {{ productionHostname }}
                     </span>
                   </template>
-                  <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50" />
+                  <UIcon name="carbon:chevron-down" class="w-3 h-3 opacity-50 transition-transform" :class="modeDropdownOpen ? 'rotate-180' : ''" />
                 </button>
-                <template #item-label="{ item }">
-                  <span>{{ item.label }}</span>
-                  <span v-if="(item as any).hostname" class="devtools-production-badge text-[10px]">
-                    <span class="devtools-production-dot" />
-                    {{ (item as any).hostname }}
-                  </span>
-                </template>
-              </UDropdownMenu>
+                <Transition name="dropdown">
+                  <div v-if="modeDropdownOpen" class="mode-dropdown-menu">
+                    <button type="button" class="mode-dropdown-item" @click="selectMode('local')">
+                      <UIcon name="carbon:laptop" class="w-4 h-4" />
+                      <span>Local</span>
+                    </button>
+                    <button type="button" class="mode-dropdown-item" @click="selectMode('production')">
+                      <UIcon name="carbon:cloud" class="w-4 h-4" />
+                      <span>Production</span>
+                      <span class="devtools-production-badge text-[10px]">
+                        <span class="devtools-production-dot" />
+                        {{ productionHostname }}
+                      </span>
+                    </button>
+                  </div>
+                </Transition>
+              </div>
             </div>
           </div>
 
@@ -206,7 +220,7 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
 
       <!-- Main Content -->
       <div class="devtools-main">
-        <main class="mx-auto flex flex-col w-full max-w-7xl">
+        <main class="devtools-main-content">
           <DevtoolsLoading v-if="loading" />
           <div v-show="!loading">
             <slot />
@@ -216,3 +230,59 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
     </div>
   </UApp>
 </template>
+
+<style scoped>
+.mode-dropdown-wrapper {
+  position: relative;
+}
+
+.mode-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 180px;
+  padding: 4px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-elevated);
+  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.12);
+  z-index: 100;
+}
+
+.dark .mode-dropdown-menu {
+  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.4);
+}
+
+.mode-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 100ms, color 100ms;
+}
+
+.mode-dropdown-item:hover {
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+}
+
+.dropdown-enter-active {
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.dropdown-leave-active {
+  transition: opacity 100ms ease, transform 100ms ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",
@@ -9,6 +9,12 @@
     "url": "https://harlanzw.com/"
   },
   "license": "MIT",
+  "exports": {
+    ".": "./nuxt.config.ts",
+    "./composables/shiki": "./composables/shiki.ts",
+    "./composables/rpc": "./composables/rpc.ts",
+    "./composables/state": "./composables/state.ts"
+  },
   "main": "./nuxt.config.ts",
   "files": [
     "app.config.ts",

package/skills/devtools-layer-skilld/SKILL.md

@@ -19,7 +19,7 @@ Shared Nuxt layer providing components, composables, and a design system for all
 
 1. ALWAYS extend `nuxtseo-layer-devtools` in client/nuxt.config.ts
 2. ALWAYS create `client/composables/rpc.ts` that calls `useDevtoolsConnection()`
-3. ALWAYS use layer components over custom HTML: `DevtoolsSection` not custom details, `DevtoolsKeyValue` not custom tables, `DevtoolsSnippet` not custom code blocks
+3. ALWAYS use layer components over custom HTML: `DevtoolsSection` not custom details, `DevtoolsKeyValue` not custom tables, `DevtoolsSnippet` not custom code blocks. Use `KeyValueItem.code` for inline code rendering instead of separate snippets
 4. NEVER add custom CSS that duplicates what the layer provides
 5. NEVER enable SSR in the client (it runs in an iframe)
 6. ALWAYS disable the module itself in the client nuxt config (e.g. `robots: false`)
@@ -52,7 +52,7 @@ For full component/composable API reference, read [reference.md](./reference.md)
 ```ts
 export default defineNuxtConfig({
   extends: ['nuxtseo-layer-devtools'],
-  <moduleName>: false,
+  // <moduleName>: false,
   app: { baseURL: '/__<module-route>' },
   nitro: { output: { publicDir: resolve('./dist/client') } },
 })
@@ -93,7 +93,9 @@ if (nuxt.options.dev) {
 const activeTab = ref('overview')
 const loading = ref(true)
 const { data } = await useAsyncData('debug', () => $fetch('/__<module>__/debug.json'), { watch: [refreshTime] })
-watch(data, () => { loading.value = false })
+watch(data, () => {
+  loading.value = false
+})
 </script>
 
 <template>

package/skills/devtools-layer-skilld/reference.md

@@ -15,7 +15,7 @@
 
 | Component | Props | Key Slots | Purpose |
 |---|---|---|---|
-| `DevtoolsAlert` | `icon?`, `variant` ('info'\|'warning'\|'success'\|'production') | default, `action` | Color coded status bar |
+| `DevtoolsAlert` | `icon?`, `variant` ('info'\|'warning'\|'error'\|'success'\|'production') | default, `action` | Color coded status bar |
 | `DevtoolsError` | `icon?`, `title?`, `error?` | default | Centered error display |
 | `DevtoolsEmptyState` | `icon?`, `title`, `description?`, `variant` ('default'\|'error') | default, `description` | No results placeholder |
 | `DevtoolsProductionError` | `error?` | none | Production URL unreachable |
@@ -25,10 +25,10 @@
 
 | Component | Props | Key Slots | Purpose |
 |---|---|---|---|
-| `DevtoolsKeyValue` | `items: KeyValueItem[]`, `striped?` | none | Key value table with copy, links, booleans |
+| `DevtoolsKeyValue` | `items: KeyValueItem[]`, `striped?` | none | Key value table with copy, links, booleans, inline code |
 | `DevtoolsMetric` | `label?`, `value`, `icon?`, `variant` | none | Small inline metric badge |
 | `DevtoolsCopyButton` | `text` | none | Copy to clipboard button |
-| `DevtoolsSnippet` | `label?`, `code`, `lang` ('js'\|'json'\|'xml') | `header` | Code block with header and copy |
+| `DevtoolsSnippet` | `label?`, `code`, `lang` ('js'\|'json'\|'xml') | `header` | Code block with header, copy, max 300px scroll |
 | `OCodeBlock` | `code`, `lang`, `lines?`, `transformRendered?` | none | Shiki syntax highlighted pre |
 | `DevtoolsDocs` | `url` | none | Full height iframe |
 
@@ -41,6 +41,8 @@ interface KeyValueItem {
   copyable?: boolean
   mono?: boolean
   link?: string
+  /** Render value using DevtoolsSnippet. Pass the language for syntax highlighting. */
+  code?: 'js' | 'json' | 'xml'
 }
 ```
 
@@ -68,8 +70,8 @@ const path: Ref<string>
 const query: Ref<any>
 const base: Ref<string>
 const host: ComputedRef<string>
-const refreshSources: Function // Debounced 200ms
-const slowRefreshSources: Function // Debounced 1000ms
+const refreshSources: () => void // Debounced 200ms
+const slowRefreshSources: () => void // Debounced 1000ms
 
 // Production preview mode
 const previewSource: Ref<'local' | 'production'> // localStorage persisted
@@ -101,7 +103,7 @@ Do NOT add custom CSS unless layer components are insufficient.
 
 ### Utility Classes
 
-`.glass` (backdrop blur), `.gradient-bg` (green/blue radials), `.card` (elevated hover), `.code-block`, `.status-enabled/.status-disabled`, `.link-external` (with arrow), `.hint-callout`, `.panel-grids`, `.animate-fade-up/.scale-in/.spin`, `.stagger-children`
+`.glass` (backdrop blur), `.gradient-bg` (green/blue radials), `.card` (elevated hover), `.code-block`, `.status-enabled/.status-disabled`, `.link-external` (with arrow), `.hint-callout`, `.panel-grids`, `.animate-fade-up/.scale-in/.spin`, `.stagger-children`, `.devtools-main-content` (max-width 80rem centered container)
 
 ### Nuxt UI Defaults (app.config.ts)
 
@@ -127,7 +129,9 @@ watch(isProductionMode, refreshSources)
 import { loadShiki as _loadShiki } from '#imports'
 
 const customLang: LanguageRegistration = { name: 'my-lang', scopeName: 'source.my-lang', patterns: [] }
-export function loadShiki() { return _loadShiki({ extraLangs: [customLang] }) }
+export function loadShiki() {
+  return _loadShiki({ extraLangs: [customLang] })
+}
 ```
 
 ### Fallback Connection
@@ -135,14 +139,26 @@ export function loadShiki() { return _loadShiki({ extraLangs: [customLang] }) }
 ```ts
 const connectionState = ref<'connecting' | 'connected' | 'fallback' | 'failed'>('connecting')
 useDevtoolsConnection({
-  onConnected() { connectionState.value = 'connected'; refreshSources() },
-  onRouteChange(route) { path.value = route.path; refreshSources() },
-})
-setTimeout(() => {
-  if (connectionState.value === 'connecting') {
-    connectionState.value = 'fallback'
-    appFetch.value = $fetch.create({ baseURL: 'http://localhost:3000' })
+  onConnected() {
+    connectionState.value = 'connected'
+    refreshSources()
+  },
+  onRouteChange(route) {
+    path.value = route.path
     refreshSources()
-  }
-}, 2000)
+  },
+})
+onMounted(() => {
+  const timer = setTimeout(() => {
+    if (connectionState.value === 'connecting') {
+      connectionState.value = 'fallback'
+      appFetch.value = $fetch.create({ baseURL: 'http://localhost:3000' })
+      refreshSources()
+    }
+  }, 2000)
+
+  onUnmounted(() => {
+    clearTimeout(timer)
+  })
+})
 ```