feat: add @devframes/json-render and @devframes/json-render-ui packages

Introduce JSON-render as an opt-in capability a devframe app adds, rather
than a cost the hub or a plain app pays.

- @devframes/json-render: framework-neutral protocol layer — base catalog +
  per-component Zod prop schemas, serializable JsonRenderViewRef, curated
  ./core re-exports of @json-render/core, and a ./node createJsonRenderView
  runtime factory (scoped stable ids, patch-enabled shared state, JSON-Pointer
  state patches, ingress prop + serializability validation, disposal). A
  ./hub subpath contributes the json-render dock type to the hub's open dock
  union without making the hub depend on json-render.
- @devframes/json-render-ui: official Vue reference frontend on @antfu/design —
  the fourteen base components, base registry, renderer shell with reset
  semantics, an unrestricted action bridge that tracks per-action loading and
  surfaces failures, render-time prop isolation, a hub dock renderer, and
  Storybook coverage.
- Hub: open the dock union via an augmentable registry and drop the closed
  json-render variant, createJsonRenderer, and the hand-written json-render
  types; add registerRenderer routing (with dispose-on-deactivation) to the
  client host.
- devframe core: add RpcSharedStateHost.delete, load immer patches for
  patch-enabled shared state, and remove stale createJsonRenderer references.
- Docs: error pages DF0038-DF0041. tsnapi snapshots + exports tests updated.

Created with the help of an agent.

Author: antfubot

alias.ts

@@ -46,6 +46,12 @@ export const alias = {
   '@devframes/hub': r('hub/src/index.ts'),
   '@devframes/nuxt/runtime/plugin.client': r('nuxt/src/runtime/plugin.client.ts'),
   '@devframes/nuxt': r('nuxt/src/index.ts'),
+  '@devframes/json-render/core': r('json-render/src/core.ts'),
+  '@devframes/json-render/hub': r('json-render/src/hub.ts'),
+  '@devframes/json-render/node': r('json-render/src/node/index.ts'),
+  '@devframes/json-render': r('json-render/src/index.ts'),
+  '@devframes/json-render-ui/components': r('json-render-ui/src/components/index.ts'),
+  '@devframes/json-render-ui': r('json-render-ui/src/index.ts'),
   '@devframes/plugin-code-server/client': p('code-server/src/client/index.ts'),
   '@devframes/plugin-code-server/node': p('code-server/src/node/index.ts'),
   '@devframes/plugin-code-server/constants': p('code-server/src/constants.ts'),

docs/errors/DF0038.md

@@ -0,0 +1,37 @@
+---
+outline: deep
+---
+
+# DF0038: Invalid JSON-Render Element Props
+
+## Message
+
+> JSON-render view "`{id}`" received invalid props on element "`{key}`": `{issues}`
+
+## Cause
+
+`@devframes/json-render` validates every element's props against the base catalog's per-component Zod schema at spec ingress (`createJsonRenderView` / `view.update`). Upstream `@json-render/core` only checks component *names*, so this per-component prop check is the one validation Devframes adds. An element whose props don't match its component's schema is rejected here rather than failing silently at render.
+
+## Example
+
+```ts
+// ✗ Bad — `variant` is not one of the Button variants
+createJsonRenderView(ctx, {
+  id: 'toolbar',
+  spec: { root: 'a', elements: { a: { type: 'Button', props: { variant: 'nope' }, children: [] } } },
+})
+
+// ✓ Good
+createJsonRenderView(ctx, {
+  id: 'toolbar',
+  spec: { root: 'a', elements: { a: { type: 'Button', props: { variant: 'primary', label: 'Save' }, children: [] } } },
+})
+```
+
+## Fix
+
+Match the element props to the base catalog's prop schema for that component. Dynamic `$state` / `$bindState` expressions are accepted wherever a scalar prop is expected, so a valid binding never triggers this.
+
+## Source
+
+- [`packages/json-render/src/node/create-view.ts`](https://github.com/devframes/devframe/blob/main/packages/json-render/src/node/create-view.ts) — `validateElementProps()` throws this at ingress and on `update`.

docs/errors/DF0039.md

@@ -0,0 +1,34 @@
+---
+outline: deep
+---
+
+# DF0039: Duplicate JSON-Render View
+
+## Message
+
+> A JSON-render view with id "`{id}`" already exists in scope "`{scope}`".
+
+## Cause
+
+Each JSON-render view has a stable, author-supplied id that forms its shared-state key `devframe:json-render:<scope>:<id>`. Ids must be unique within a scope so the client keeps a stable subscription across reconnects. Creating a second view with the same id in the same scope throws instead of clobbering the first.
+
+## Example
+
+```ts
+// ✗ Bad — same id twice in the same scope
+createJsonRenderView(ctx, { id: 'metrics', spec })
+createJsonRenderView(ctx, { id: 'metrics', spec }) // DF0039
+
+// ✓ Good — dispose the previous view first, or use a distinct id
+const view = createJsonRenderView(ctx, { id: 'metrics', spec })
+view.dispose()
+createJsonRenderView(ctx, { id: 'metrics', spec })
+```
+
+## Fix
+
+Give each view a stable id unique within its scope, or dispose the previous view before recreating it. Scope defaults to the context namespace (or `global`); pass `scope` to isolate ids explicitly.
+
+## Source
+
+- [`packages/json-render/src/node/create-view.ts`](https://github.com/devframes/devframe/blob/main/packages/json-render/src/node/create-view.ts) — `createJsonRenderView()` throws this when the scoped id is already live.

docs/errors/DF0040.md

@@ -0,0 +1,29 @@
+---
+outline: deep
+---
+
+# DF0040: JSON-Render View Used After Disposal
+
+## Message
+
+> JSON-render view "`{id}`" was used after it was disposed.
+
+## Cause
+
+`view.dispose()` unregisters the view's shared state and its broadcast listeners. Calling `update` or `patchState` on a disposed handle is a lifecycle bug — the shared state it targeted no longer exists.
+
+## Example
+
+```ts
+const view = createJsonRenderView(ctx, { id: 'metrics', spec })
+view.dispose()
+view.update(nextSpec) // DF0040
+```
+
+## Fix
+
+Create a fresh view with `createJsonRenderView` instead of reusing a disposed handle. The id is free to reuse once disposed.
+
+## Source
+
+- [`packages/json-render/src/node/create-view.ts`](https://github.com/devframes/devframe/blob/main/packages/json-render/src/node/create-view.ts) — `update` / `patchState` throw this after `dispose()`.

docs/errors/DF0041.md

@@ -0,0 +1,33 @@
+---
+outline: deep
+---
+
+# DF0041: JSON-Render Spec Is Not JSON-Serializable
+
+## Message
+
+> JSON-render view "`{id}`" spec is not JSON-serializable: `{reason}`
+
+## Cause
+
+Specs and state travel across the RPC / static boundary as strict JSON. A spec containing functions, symbols, class instances, `Map`/`Set`, or circular references cannot cross that boundary, so it is rejected at ingress.
+
+## Example
+
+```ts
+// ✗ Bad — circular reference
+const spec: any = { root: 'a', elements: {} }
+spec.self = spec
+createJsonRenderView(ctx, { id: 'x', spec }) // DF0041
+
+// ✓ Good — plain JSON data
+createJsonRenderView(ctx, { id: 'x', spec: { root: 'a', elements: { a: { type: 'Text', props: { text: 'hi' }, children: [] } } } })
+```
+
+## Fix
+
+Keep specs and state strict JSON — remove functions, symbols, class instances, `Map`/`Set`, or circular references.
+
+## Source
+
+- [`packages/json-render/src/node/create-view.ts`](https://github.com/devframes/devframe/blob/main/packages/json-render/src/node/create-view.ts) — `assertJsonSerializable()` throws this at ingress and on `update`.

packages/devframe/src/client/rpc-shared-state.ts

@@ -5,6 +5,7 @@ import { createSharedState } from 'devframe/utils/shared-state'
 
 export function createRpcSharedStateClientHost(rpc: DevframeRpcClient): RpcSharedStateHost {
   const sharedState = new Map<string, SharedState<any>>()
+  const stateDisposers = new Map<string, () => void>()
   const initialValues = new Map<string, any>()
   const keyAddedListeners = new Set<(key: string) => void>()
   const isStaticBackend = rpc.connectionMeta.backend === 'static'
@@ -68,6 +69,14 @@ export function createRpcSharedStateClientHost(rpc: DevframeRpcClient): RpcShare
         keyAddedListeners.delete(fn)
       }
     },
+    delete(key) {
+      const dispose = stateDisposers.get(key)
+      stateDisposers.delete(key)
+      const existed = sharedState.delete(key)
+      initialValues.delete(key)
+      dispose?.()
+      return existed
+    },
     get: async <T extends object>(key: string, options?: RpcSharedStateGetOptions<T>) => {
       if (options?.initialValue !== undefined) {
         initialValues.set(key, options.initialValue)
@@ -97,7 +106,7 @@ export function createRpcSharedStateClientHost(rpc: DevframeRpcClient): RpcShare
             .catch((error) => {
               console.error('Error getting server state', error)
             })
-          registerSharedState(key, state)
+          stateDisposers.set(key, registerSharedState(key, state))
           return state
         }
         else {
@@ -106,7 +115,7 @@ export function createRpcSharedStateClientHost(rpc: DevframeRpcClient): RpcShare
           sharedState.set(key, state)
           for (const fn of keyAddedListeners)
             fn(key)
-          registerSharedState(key, state)
+          stateDisposers.set(key, registerSharedState(key, state))
           return state
         }
       }

packages/devframe/src/node/context.ts

@@ -28,8 +28,8 @@ export interface CreateHostContextOptions {
  * Wires the RPC host, view (HTTP file-serving) host, diagnostics, and
  * agent subsystems. Host adapters can wrap this to augment `ctx` with
  * extra surfaces — for example, `@vitejs/devtools-kit`'s
- * `createKitContext` attaches `docks`, `terminals`, `messages`,
- * `commands`, and `createJsonRenderer` when mounted into Vite DevTools.
+ * `createKitContext` attaches `docks`, `terminals`, `messages`, and
+ * `commands` when mounted into Vite DevTools.
  */
 export async function createHostContext(options: CreateHostContextOptions): Promise<DevframeNodeContext> {
   const { cwd, workspaceRoot = cwd, mode, host, builtinRpcDeclarations = [] } = options

packages/devframe/src/node/rpc-shared-state.ts

@@ -11,6 +11,7 @@ export function createRpcSharedStateServerHost(
   rpc: RpcFunctionsHost,
 ): RpcSharedStateHost {
   const sharedState = new Map<string, SharedState<any>>()
+  const stateDisposers = new Map<string, () => void>()
   const keyAddedListeners = new Set<(key: string) => void>()
 
   function registerSharedState<T extends object>(key: string, state: SharedState<T>) {
@@ -57,7 +58,7 @@ export function createRpcSharedStateServerHost(
         initialValue: options.initialValue as T,
         enablePatches: false,
       })
-      registerSharedState(key, state)
+      stateDisposers.set(key, registerSharedState(key, state))
       sharedState.set(key, state)
       for (const fn of keyAddedListeners)
         fn(key)
@@ -72,6 +73,15 @@ export function createRpcSharedStateServerHost(
         keyAddedListeners.delete(fn)
       }
     },
+    delete(key) {
+      const dispose = stateDisposers.get(key)
+      if (!dispose)
+        return false
+      dispose()
+      stateDisposers.delete(key)
+      sharedState.delete(key)
+      return true
+    },
   }
 
   // Wire methods that the client-side `client/rpc-shared-state.ts`

packages/devframe/src/types/context.ts

@@ -15,7 +15,9 @@ export interface DevframeCapabilities {
  * agent + the view-host (HTTP file-serving). Host adapters can wrap this
  * to add their own surfaces; for example, `@vitejs/devtools-kit`'s
  * `createKitContext` adds `docks`, `terminals`, `messages`, and
- * `commands` when mounted into Vite DevTools.
+ * `commands` when mounted into Vite DevTools. JSON rendering is an opt-in
+ * integration (`@devframes/json-render`) layered on top, not part of this
+ * core surface.
  */
 export interface DevframeNodeContext {
   readonly workspaceRoot: string

packages/devframe/src/types/rpc.ts

@@ -81,6 +81,13 @@ export interface RpcSharedStateHost {
    * as dynamic resources.
    */
   onKeyAdded: (fn: (key: string) => void) => () => void
+  /**
+   * Unregister a shared state and drop its broadcast listeners. Returns
+   * `true` when a state was removed, `false` when the key was unknown.
+   * Used by short-lived states (e.g. a disposed JSON-render view) to avoid
+   * leaking listeners and lingering entries for the context lifetime.
+   */
+  delete: (key: string) => boolean
 }
 
 /**