nuxtseo-layer-devtools 0.2.3 → 0.2.5

package/components/DevtoolsLayout.vue

@@ -62,7 +62,9 @@ const isRouteNav = computed(() => navItems.some(item => item.to))
 
 const modeDropdownOpen = ref(false)
 const modeDropdownRef = ref<HTMLElement>()
-onClickOutside(modeDropdownRef, () => { modeDropdownOpen.value = false })
+onClickOutside(modeDropdownRef, () => {
+  modeDropdownOpen.value = false
+})
 
 function selectMode(mode: 'local' | 'production') {
   previewSource.value = mode

package/nuxt.config.ts

@@ -18,6 +18,18 @@ export default defineNuxtConfig({
     ],
   },
 
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@vueuse/core',
+      ],
+    },
+  },
+
+  imports: {
+    autoImport: true,
+  },
+
   devtools: {
     enabled: false,
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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)
+  })
+})
 ```