docs: update

Author: antfu

docs/app/assets/css/devframe.css

@@ -45,3 +45,8 @@
 .mermaid svg {
   width: 100%;
 }
+
+/* Do not render "description" slot */
+[data-slot="description"] {
+  display: none;
+}

docs/content/1.guide/10.standalone-cli.md

@@ -32,7 +32,7 @@ import { resolve } from 'pathe'
 
 const clientAssets = resolve(import.meta.dirname, '../dist/public')
 
-const devframe = defineDevframe({
+const myDevframe = defineDevframe({
   id: 'my-tool',
   name: 'My Tool',
   clientAssets,
@@ -62,7 +62,7 @@ const devframe = defineDevframe({
   },
 })
 
-await createCac(devframe, {
+await createCac(myDevframe, {
   onReady({ origin }) {
     console.log(c.green`My Tool ready at ${origin}`)
   },
@@ -292,7 +292,7 @@ import { defineDevframe } from 'devframe'
 import { createBuild } from 'devframe/adapters/build'
 import { createDevServer } from 'devframe/adapters/dev'
 
-const devframe = defineDevframe({
+const myDevframe = defineDevframe({
   id: 'my-tool',
   name: 'My Tool',
   clientAssets: './dist/public',
@@ -307,7 +307,7 @@ program
   .option('-p, --port <port>', 'Port', '7777')
   .option('--config <file>', 'Config file path')
   .action(async (opts) => {
-    const handle = await createDevServer(devframe, {
+    const handle = await createDevServer(myDevframe, {
       port: Number(opts.port),
       flags: { config: opts.config },
       onReady: ({ origin }) => console.log(`Ready at ${origin}`),
@@ -318,7 +318,7 @@ program
 program
   .command('build')
   .option('--out-dir <dir>', 'Output directory', 'dist-static')
-  .action(opts => createBuild(devframe, { outDir: opts.outDir }))
+  .action(opts => createBuild(myDevframe, { outDir: opts.outDir }))
 
 await program.parseAsync()
 ```

docs/content/1.guide/11.client.md

@@ -14,7 +14,7 @@ import { connectDevframe } from 'devframe/client'
 
 const rpc = await connectDevframe()
 
-const modules = await rpc.call('my-devframe:get-modules', { limit: 10 })
+const modules = await rpc.call('my-tool:get-modules', { limit: 10 })
 ```
 
 At the default mount path, `connectDevframe` needs no arguments — it auto-detects the backend via `__devframe/__connection.json`.
@@ -120,7 +120,7 @@ const ok = await rpc.requestTrustWithToken('a1b2c3…')
 Derive a [scoped client](/guide/scoped-context) for namespaced ids:
 
 ```ts
-const my = (await connectDevframe()).scope('my-devframe')
+const my = (await connectDevframe()).scope('my-tool')
 
 // Standard call — awaits a response or throws.
 const modules = await my.rpc.call('get-modules', { limit: 10 })
@@ -142,7 +142,7 @@ Register functions the node side calls via `rpc.broadcast`:
 import { defineRpcFunction } from 'devframe'
 
 my.rpc.register(defineRpcFunction({
-  name: 'on-file-changed', // -> my-devframe:on-file-changed
+  name: 'on-file-changed', // -> my-tool:on-file-changed
   type: 'event',
   setup: () => ({
     handler: async ({ file }: { file: string }) => {
@@ -155,7 +155,7 @@ my.rpc.register(defineRpcFunction({
 ## Shared state
 
 ```ts
-const state = await my.rpc.sharedState('state') // -> my-devframe:state
+const state = await my.rpc.sharedState('state') // -> my-tool:state
 
 console.log(state.value())
 
@@ -329,7 +329,7 @@ render()
 // 2. Handle a failing call.
 async function loadModules() {
   try {
-    return await rpc.call('my-devframe:get-modules', { limit: 10 })
+    return await rpc.call('my-tool:get-modules', { limit: 10 })
   }
   catch (error) {
     if (error instanceof DevframeConnectionError) {

docs/content/1.guide/14.agent-native.md

@@ -111,9 +111,9 @@ Programmatically:
 import { defineDevframe } from 'devframe'
 import { createMcpServer } from 'devframe/adapters/mcp'
 
-const devframe = defineDevframe({ /* … */ })
+const myDevframe = defineDevframe({ /* … */ })
 
-await createMcpServer(devframe, { transport: 'stdio' })
+await createMcpServer(myDevframe, { transport: 'stdio' })
 ```
 
 `@modelcontextprotocol/server` is a peer dependency.
@@ -125,9 +125,9 @@ In `claude_desktop_config.json`:
 ```json
 {
   "mcpServers": {
-    "my-devframe": {
+    "my-tool": {
       "command": "pnpm",
-      "args": ["--filter", "my-devframe", "exec", "devframe", "mcp"]
+      "args": ["--filter", "my-tool", "exec", "devframe", "mcp"]
     }
   }
 }

docs/content/1.guide/2.devframe-definition.md

@@ -12,21 +12,21 @@ import { defineDevframe, defineRpcFunction } from 'devframe'
 import * as v from 'valibot' // npm i valibot
 
 export default defineDevframe({
-  id: 'my-devframe',
-  name: 'My Devframe',
+  id: 'my-tool',
+  name: 'My Tool',
   version: '1.0.0',
-  packageName: 'my-devframe',
+  packageName: 'my-tool',
   importMetaUrl: import.meta.url,
-  homepage: 'https://github.com/me/my-devframe',
+  homepage: 'https://github.com/me/my-tool',
   description: 'A one-line summary of what the tool does.',
   icon: 'ph:gauge-duotone',
   setup(ctx) {
     // A scoped context auto-namespaces ids with your devframe `id`.
-    const my = ctx.scope('my-devframe')
+    const my = ctx.scope('my-tool')
 
     // Register your RPC functions, shared state, etc. here.
     my.rpc.register(defineRpcFunction({
-      name: 'hello', // stored as `my-devframe:hello`
+      name: 'hello', // stored as `my-tool:hello`
       type: 'static',
       jsonSerializable: true,
       handler: () => ({ message: 'hello' }),
@@ -64,8 +64,8 @@ Import metadata from `package.json` (`name` → `packageName`; devframe `name` i
 import pkg from '../package.json' with { type: 'json' }
 
 export default defineDevframe({
-  id: 'my-devframe',
-  name: 'My Devframe', // display label
+  id: 'my-tool',
+  name: 'My Tool', // display label
   version: pkg.version,
   packageName: pkg.name,
   importMetaUrl: import.meta.url,
@@ -83,10 +83,10 @@ export default defineDevframe({
 export default defineDevframe({
   // …metadata as above
   importMetaUrl: import.meta.url,
-  // Served from the locally installed `my-devframe--assets`, resolved via
+  // Served from the locally installed `my-tool--assets`, resolved via
   // `importMetaUrl` — works under pnpm's strict layout with zero network.
   clientAssets: { package: `${pkg.name}--assets`, version: pkg.version },
-  // Imported from `my-devframe`'s own dependency graph.
+  // Imported from `my-tool`'s own dependency graph.
   services: [{ package: '@scope/my-service', version: pkg.version }],
   setup(ctx) { /* … */ },
 })
@@ -117,8 +117,8 @@ For assets you host yourself, call `ctx.views.hostStatic` in `setup` — [Client
 
 ```ts
 defineDevframe({
-  id: 'my-devframe',
-  name: 'My Devframe',
+  id: 'my-tool',
+  name: 'My Tool',
   setup(ctx) {
     if (ctx.mode === 'build') {
       // Static-only work — baked into the RPC dump.
@@ -200,11 +200,11 @@ Hosted adapters can augment `ctx` — e.g. the [`vite` adapter](/adapters/vite)'
 
 ```ts
 defineDevframe({
-  id: 'my-devframe',
-  name: 'My Devframe',
+  id: 'my-tool',
+  name: 'My Tool',
   clientAssets: './client/dist', // built SPA served as the UI
   cli: {
-    command: 'my-devframe', // binary name; default: the `id`
+    command: 'my-tool', // binary name; default: the `id`
     port: 9876, // preferred port; default: 9999
     portRange: [9876, 10000], // forwarded to get-port-please
     random: false, // forwarded to get-port-please
@@ -243,16 +243,16 @@ import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
 import { createBuild } from 'devframe/adapters/build'
 import { createCac } from 'devframe/adapters/cac'
 
-const devframe = defineDevframe({ id: 'my-devframe', name: 'My Devframe', setup() {} })
+const myDevframe = defineDevframe({ id: 'my-tool', name: 'My Tool', setup() {} })
 
 // 1. Standalone CLI:
-await createCac(devframe).parse()
+await createCac(myDevframe).parse()
 
 // 2. Offline snapshot:
-await createBuild(devframe, { outDir: 'dist-static' })
+await createBuild(myDevframe, { outDir: 'dist-static' })
 
 // 3. Mount into a host framework (Vite DevTools shown — others can implement equivalents):
-export const myPlugin = () => createPluginFromDevframe(devframe)
+export const myPlugin = () => createPluginFromDevframe(myDevframe)
 ```
 
 ## What's next

docs/content/1.guide/3.rpc.md

@@ -12,7 +12,7 @@ import { defineRpcFunction } from 'devframe'
 import * as v from 'valibot' // npm i valibot (or use zod / arktype)
 
 export const getModules = defineRpcFunction({
-  name: 'get-modules', // bare — the scope namespaces it to `my-devframe:get-modules`
+  name: 'get-modules', // bare — the scope namespaces it to `my-tool:get-modules`
   type: 'query',
   args: [v.object({ limit: v.number() })],
   returns: v.array(v.object({ id: v.string(), size: v.number() })),
@@ -32,18 +32,18 @@ import { defineDevframe } from 'devframe'
 import { getModules } from './rpc/functions/get-modules'
 
 export default defineDevframe({
-  id: 'my-devframe',
-  name: 'My Devframe',
+  id: 'my-tool',
+  name: 'My Tool',
   setup(ctx) {
-    const my = ctx.scope('my-devframe')
+    const my = ctx.scope('my-tool')
     my.rpc.register(getModules)
   },
 })
 ```
 
 ### Naming convention
 
-Scope with your devframe id, then a kebab-case action: `my-devframe:get-modules`.
+Scope with your devframe id, then a kebab-case action: `my-tool:get-modules`.
 
 ### Function types
 
@@ -68,13 +68,13 @@ Use `setup(ctx)` (returns `{ handler, dump? }`) when the handler needs `Devframe
 
 ```ts
 defineDevframe({
-  id: 'my-devframe',
-  name: 'My Devframe',
+  id: 'my-tool',
+  name: 'My Tool',
   setup(ctx) {
-    const my = ctx.scope('my-devframe')
+    const my = ctx.scope('my-tool')
     watcher.on('change', (file) => {
       void my.rpc.broadcast({
-        method: 'on-file-changed', // -> my-devframe:on-file-changed
+        method: 'on-file-changed', // -> my-tool:on-file-changed
         args: [{ file }],
       })
     })
@@ -95,7 +95,7 @@ defineDevframe({
 For node-side→browser-side chunk feeds, use [streaming channels](/guide/streaming):
 
 ```ts
-const channel = ctx.rpc.streaming.create<string>('my-devframe:chat', {
+const channel = ctx.rpc.streaming.create<string>('my-tool:chat', {
   replayWindow: 256,
 })
 const stream = channel.start()
@@ -107,7 +107,7 @@ sourceReadable.pipeTo(stream.writable)
 A scoped `rpc.call` invokes a node-side function directly, skipping the transport:
 
 ```ts
-const my = ctx.scope('my-devframe')
+const my = ctx.scope('my-tool')
 const modules = await my.rpc.call('get-modules', { limit: 10 })
 ```
 
@@ -122,7 +122,7 @@ From the browser, [`connectDevframe`](/guide/client) (or `getDevframeRpcClient`)
 import { connectDevframe } from 'devframe/client'
 
 const client = await connectDevframe()
-const my = client.scope('my-devframe')
+const my = client.scope('my-tool')
 
 const modules = await my.rpc.call('get-modules', { limit: 10 })
 ```
@@ -141,7 +141,7 @@ const serverFunctions = [getModules, getFile] as const
 
 declare module 'devframe' {
   interface DevframeRpcServerFunctions
-    extends RpcDefinitionsToFunctionsWithNamespace<'my-devframe', typeof serverFunctions> {}
+    extends RpcDefinitionsToFunctionsWithNamespace<'my-tool', typeof serverFunctions> {}
 }
 ```
 

docs/content/1.guide/4.shared-state.md

@@ -30,12 +30,12 @@ A [scoped context](/guide/scoped-context)'s `rpc.sharedState(key, options)` name
 import { defineDevframe } from 'devframe'
 
 export default defineDevframe({
-  id: 'my-devframe',
-  name: 'My Devframe',
+  id: 'my-tool',
+  name: 'My Tool',
   async setup(ctx) {
-    const my = ctx.scope('my-devframe')
+    const my = ctx.scope('my-tool')
 
-    const state = await my.rpc.sharedState('state', { // -> my-devframe:state
+    const state = await my.rpc.sharedState('state', { // -> my-tool:state
       initialValue: {
         count: 0,
         items: [] as { id: string, name: string }[],
@@ -77,7 +77,7 @@ Devframe applies the recipe to a draft, emits `updated` (with `SharedStatePatch[
 Enable patches for minimal network diffs; `updated` then carries `Patch[]`:
 
 ```ts
-const state = await ctx.rpc.sharedState.get('my-devframe:big-state', {
+const state = await ctx.rpc.sharedState.get('my-tool:big-state', {
   initialValue: largeTree,
   // sharedState-level enablePatches is opt-in:
   sharedState: createSharedState({ initialValue: largeTree, enablePatches: true }),
@@ -99,9 +99,9 @@ The same key is on the browser RPC client, scoped identically; browser-side muta
 ```ts
 import { connectDevframe } from 'devframe/client'
 
-const my = (await connectDevframe()).scope('my-devframe')
+const my = (await connectDevframe()).scope('my-tool')
 
-const state = await my.rpc.sharedState('state') // -> my-devframe:state
+const state = await my.rpc.sharedState('state') // -> my-tool:state
 
 console.log(state.value().count)
 
@@ -133,7 +133,7 @@ Augment `DevframeRpcSharedStates` to type each key once; lookups stay typed:
 ```ts
 declare module 'devframe' {
   interface DevframeRpcSharedStates {
-    'my-devframe:state': {
+    'my-tool:state': {
       count: number
       items: { id: string, name: string }[]
     }