docs: recommend Vite DevTools kit for mounting built-in plugins into Vite

The migration note and each affected plugin's docs page now lead with
createPluginFromDevframe (@vitejs/devtools-kit/node) for a Vite DevTools
host, with devframeVite (@devframes/vite/dev-spa) as the DevTools-free
fallback — matching the existing framework/hub docs' stance that Vite
DevTools is the recommended integration path for a Vite app.

Created with the help of an agent.

Author: antfubot

docs/guide/migration-0.9.md

@@ -289,7 +289,7 @@ export default defineConfig({
 
 ## Built-in plugins' `/vite` subpath is removed
 
-`a11yVitePlugin`, `assetsVitePlugin`, `dataInspectorVitePlugin`, `inspectVitePlugin`, `messagesVitePlugin`, and `ogVitePlugin` — each plugin's `@devframes/plugin-<name>/vite` export — were one-line renames over `devframeVite(def, options)`. Call `devframeVite` directly against the plugin's default export instead:
+`a11yVitePlugin`, `assetsVitePlugin`, `dataInspectorVitePlugin`, `inspectVitePlugin`, `messagesVitePlugin`, and `ogVitePlugin` — each plugin's `@devframes/plugin-<name>/vite` export — were one-line renames over `devframeVite(def, options)`. For a Vite app, mount the plugin into [Vite DevTools](https://devtools.vite.dev) instead, with `createPluginFromDevframe` from `@vitejs/devtools-kit/node`:
 
 ```ts
 // 0.8.x
@@ -303,6 +303,17 @@ export default defineConfig({
 ```ts
 // 0.9
 import a11yDevframe from '@devframes/plugin-a11y'
+import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
+
+export default defineConfig({
+  plugins: [createPluginFromDevframe(a11yDevframe)],
+})
+```
+
+Without Vite DevTools, call `devframeVite` directly against the plugin's default export instead — the lower-level, DevTools-free path:
+
+```ts
+import a11yDevframe from '@devframes/plugin-a11y'
 import { devframeVite } from '@devframes/vite/dev-spa'
 
 export default defineConfig({

docs/plugins/a11y.md

@@ -54,6 +54,23 @@ Runs the panel alone, without a host page to scan — serves at `/__devframes_pl
 
 ## Mount into a Vite host
 
+For a [Vite DevTools](https://devtools.vite.dev) app, mount the panel with `createPluginFromDevframe` from `@vitejs/devtools-kit/node`:
+
+```ts
+// vite.config.ts
+import a11yDevframe from '@devframes/plugin-a11y'
+import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    createPluginFromDevframe(a11yDevframe),
+  ],
+})
+```
+
+Without Vite DevTools, `devframeVite` from `@devframes/vite/dev-spa` mounts the panel directly, no DevTools dock required:
+
 ```ts
 // vite.config.ts
 import a11yDevframe from '@devframes/plugin-a11y'

docs/plugins/assets.md

@@ -28,6 +28,23 @@ pnpx @devframes/plugin-assets --read-only # disable upload / rename / delete / m
 
 ## Mount into a Vite host
 
+For a [Vite DevTools](https://devtools.vite.dev) app, mount the panel with `createPluginFromDevframe` from `@vitejs/devtools-kit/node`:
+
+```ts
+// vite.config.ts
+import assetsDevframe from '@devframes/plugin-assets'
+import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    createPluginFromDevframe(assetsDevframe),
+  ],
+})
+```
+
+Without Vite DevTools, `devframeVite` from `@devframes/vite/dev-spa` mounts the panel directly, no DevTools dock required:
+
 ```ts
 // vite.config.ts
 import assetsDevframe from '@devframes/plugin-assets'

docs/plugins/data-inspector.md

@@ -106,16 +106,18 @@ pnpx @devframes/plugin-data-inspector attach               # attach to a process
 
 ## Mount into a Vite host
 
+For a [Vite DevTools](https://devtools.vite.dev) app, mount the panel with `createPluginFromDevframe` from `@vitejs/devtools-kit/node`:
+
 ```ts
 import dataInspectorDevframe from '@devframes/plugin-data-inspector'
 import { registerDataSource } from '@devframes/plugin-data-inspector/registry'
 // vite.config.ts
-import { devframeVite } from '@devframes/vite/dev-spa'
+import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [
-    devframeVite(dataInspectorDevframe),
+    createPluginFromDevframe(dataInspectorDevframe),
     {
       name: 'my-app:data-sources',
       configureServer(server) {
@@ -131,6 +133,14 @@ export default defineConfig({
 })
 ```
 
+Without Vite DevTools, `devframeVite` from `@devframes/vite/dev-spa` mounts the panel directly, no DevTools dock required — swap it in for `createPluginFromDevframe` above:
+
+```ts
+import { devframeVite } from '@devframes/vite/dev-spa'
+
+devframeVite(dataInspectorDevframe)
+```
+
 Hub hosts mount the default export like any devframe definition.
 
 ## Programmatic

docs/plugins/inspect.md

@@ -42,6 +42,23 @@ Opens the inspector against a fresh standalone devframe connection — handy as
 
 ## Mount into a Vite host
 
+For a [Vite DevTools](https://devtools.vite.dev) app, mount the panel with `createPluginFromDevframe` from `@vitejs/devtools-kit/node`:
+
+```ts
+// vite.config.ts
+import inspectDevframe from '@devframes/plugin-inspect'
+import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    createPluginFromDevframe(inspectDevframe),
+  ],
+})
+```
+
+Without Vite DevTools, `devframeVite` from `@devframes/vite/dev-spa` mounts the panel directly, no DevTools dock required:
+
 ```ts
 // vite.config.ts
 import inspectDevframe from '@devframes/plugin-inspect'

docs/plugins/og.md

@@ -22,6 +22,23 @@ pnpx @devframes/plugin-og
 
 ## Mount into a Vite host
 
+For a [Vite DevTools](https://devtools.vite.dev) app, mount the panel with `createPluginFromDevframe` from `@vitejs/devtools-kit/node`:
+
+```ts
+// vite.config.ts
+import ogDevframe from '@devframes/plugin-og'
+import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    createPluginFromDevframe(ogDevframe),
+  ],
+})
+```
+
+Without Vite DevTools, `devframeVite` from `@devframes/vite/dev-spa` mounts the panel directly, no DevTools dock required:
+
 ```ts
 // vite.config.ts
 import ogDevframe from '@devframes/plugin-og'