diff --git a/alias.ts b/alias.ts
index 9b95034f..e284552c 100644
--- a/alias.ts
+++ b/alias.ts
@@ -108,6 +108,12 @@ export const alias = {
   '@devframes/plugin-messages/cli': p('messages/src/cli.ts'),
   '@devframes/plugin-messages/vite': p('messages/src/vite.ts'),
   '@devframes/plugin-messages': p('messages/src/index.ts'),
+  '@devframes/plugin-assets/client': p('assets/src/client/index.ts'),
+  '@devframes/plugin-assets/node': p('assets/src/node/index.ts'),
+  '@devframes/plugin-assets/rpc': p('assets/src/rpc/index.ts'),
+  '@devframes/plugin-assets/cli': p('assets/src/cli.ts'),
+  '@devframes/plugin-assets/vite': p('assets/src/vite.ts'),
+  '@devframes/plugin-assets': p('assets/src/index.ts'),
 }
 
 // update tsconfig.base.json — CSS aliases exist for Vite resolution only;
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 738d1a5d..b3ce436a 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -71,6 +71,7 @@ function pluginsItems(prefix: string) {
     { text: 'Git', link: `${prefix}/plugins/git` },
     { text: 'Terminals', link: `${prefix}/plugins/terminals` },
     { text: 'Code Server', link: `${prefix}/plugins/code-server` },
+    { text: 'Assets', link: `${prefix}/plugins/assets` },
   ] satisfies DefaultTheme.NavItemWithLink[]
 }
 
diff --git a/docs/errors/DF0042.md b/docs/errors/DF0042.md
new file mode 100644
index 00000000..96c364c4
--- /dev/null
+++ b/docs/errors/DF0042.md
@@ -0,0 +1,32 @@
+---
+outline: deep
+---
+
+# DF0042: Static Build Disabled By The Definition
+
+## Message
+
+> "`{id}`" declares `capabilities.build: false` — its static export is not meaningful (writes are excluded and any live-served data won't be there).
+
+## Cause
+
+`createBuild` runs unconditionally when called directly, but a definition can opt out of static export via `capabilities.build: false` — typically because the devframe is inherently live (it manages real files on disk, spawns a process, etc.) and a `mode: 'build'` export would only ever produce a broken, write-less shell of the tool. `createCac` already skips registering the `build` subcommand for such a definition; this diagnostic covers the remaining path — a caller invoking `createBuild()` directly, bypassing the CLI.
+
+## Example
+
+```ts
+// ✗ Bad — builds a devframe that opted out of static export
+await createBuild(assetsDevframe) // throws DF0042
+
+// ✓ Good — the degraded export is still useful to you
+await createBuild(assetsDevframe, { force: true })
+```
+
+## Fix
+
+- Pass `{ force: true }` to `createBuild()` if the degraded export is still useful to you.
+- Otherwise, drop `capabilities.build: false` on the definition if a static export should be supported after all.
+
+## Source
+
+- [`packages/devframe/src/adapters/build.ts`](https://github.com/devframes/devframe/blob/main/packages/devframe/src/adapters/build.ts) — `createBuild()` throws this when `capabilities.build` is `false` and `force` isn't set.
diff --git a/docs/plugins/assets.md b/docs/plugins/assets.md
new file mode 100644
index 00000000..a13699de
--- /dev/null
+++ b/docs/plugins/assets.md
@@ -0,0 +1,90 @@
+---
+outline: deep
+---
+
+# Assets
+
+Browse, preview, upload, rename, and delete the files in a directory, built as a **Vue** SPA on `@antfu/design` — a framework-neutral port of Nuxt DevTools' Assets tab.
+
+Package: `@devframes/plugin-assets` · framework: **Vue + @antfu/design**
+
+## What it does
+
+Search by name and filter by type from an inline chip row, switch between a thumbnail grid (grouped by folder) and a file tree, and open a resizable right-hand details panel with a live preview (image, video, audio, font, or text), file metadata, and ready-to-copy usage snippets (`<img>`, CSS `background-image`, `@font-face`, a download link). Upload files with the toolbar button (native file picker) or by dropping them anywhere on the frame, and select multiple assets to delete them together. A live file watcher keeps every connected client's listing in sync with changes made outside the UI.
+
+The standalone server requires devframe's trust handshake by default because it can read, write, and delete real files. Uploads, renames, deletes, and folder creation are enabled by default — pass `{ write: false }` (or `--read-only` on the standalone CLI) for a browse-only deployment.
+
+## Standalone
+
+```sh
+pnpx @devframes/plugin-assets             # manages <cwd>/public
+pnpx @devframes/plugin-assets --read-only # disable upload / rename / delete / mkdir
+```
+
+## Mount into a Vite host
+
+```ts
+// vite.config.ts
+import { assetsVitePlugin } from '@devframes/plugin-assets/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    assetsVitePlugin(),
+  ],
+})
+```
+
+## Programmatic
+
+`createAssetsDevframe(options)` returns a definition you can deploy through any adapter:
+
+```ts
+import { createAssetsDevframe } from '@devframes/plugin-assets'
+
+export default createAssetsDevframe({
+  dir: 'static', // defaults to `<cwd>/public`
+  baseURL: '/', // the URL the host serves `dir` at
+  write: true,
+  uploadExtensions: ['png', 'jpg', 'svg', 'webp'], // defaults to Nuxt DevTools' own allow-list, or '*' for any
+})
+```
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `dir` | `<cwd>/public` | Directory this devframe manages. |
+| `baseURL` | `/` | URL base the host serves `dir` at — each asset's `publicPath` is `baseURL` + its path. Match a non-root deployment base (e.g. Nuxt's `app.baseURL`). |
+| `write` | `true` | Enable upload, rename, delete, and folder creation from the UI. |
+| `uploadExtensions` | Nuxt DevTools' allow-list | Extensions `upload` accepts, or `'*'` for any. |
+| `serveStatic` | `false` | Serve the directory's bytes from this devframe itself. Left off when mounted into a host that already serves `public/`; the standalone CLI turns it on. |
+| `build` | `false` | Register the `build` CLI subcommand. See [why it's off by default](#static-export) below. |
+
+## How previews are served
+
+Asset previews (`<img>`, `<video>`, download links) load the files by their **public URL**, and the host the plugin is mounted into serves those files — Vite, Nuxt, and most frameworks already serve their `public/` folder at `/`. The plugin never stands up its own byte-serving route; it just resolves each asset's `publicPath` as `baseURL` + the file's path. Point `baseURL` at wherever the host serves `dir` (the default `/` matches the usual `public/` convention). The standalone CLI (`pnpx @devframes/plugin-assets`) is its own host, so it flips `serveStatic` on and serves the directory under a dedicated base.
+
+## RPC surface
+
+All functions are namespaced `devframes:plugin:assets:*`:
+
+| Function | Type | Notes |
+|----------|------|-------|
+| `list` | `query`, `snapshot: true` | Every file under the managed directory, with type, size, and last-modified time. |
+| `capabilities` | `query`, `snapshot: true` | Whether write actions are enabled, and the upload allow-list — lets the UI gate itself proactively. |
+| `read-image-meta` | `query` | Width, height, and orientation for an image asset. |
+| `read-text` | `query` | Truncated text content, for preview. |
+| `upload` | `action` | Allocates a streaming upload slot; the client pipes the file's bytes over the paired channel. |
+| `rename` | `action` | Renames an asset within its folder, preserving its extension. |
+| `delete` | `action` | Deletes one or more assets in a single call. |
+| `mkdir` | `action` | Creates a folder, including missing parents. |
+| `open-in-editor` / `reveal-in-folder` | `action` | Launch the asset in your editor, or reveal its containing folder in the OS file manager. Always registered, regardless of `write`. |
+
+`upload` / `rename` / `delete` / `mkdir` are registered only when `write` is enabled.
+
+## Static export
+
+Every devframe's `build` CLI subcommand is disabled here by default (`capabilities: { build: false }`). A static export has no live host serving the files, and every write action is inherently excluded from a static dump. Rather than ship a broken, preview-less, write-less shell of the tool, the `build` command is simply not registered. Pass `{ build: true }` to `createAssetsDevframe()` (and `{ force: true }` if calling `createBuild()` directly) if that degraded export is still useful to you — the file listing itself still bakes into the static RPC dump.
+
+## Source
+
+[`plugins/assets`](https://github.com/devframes/devframe/tree/main/plugins/assets)
diff --git a/docs/plugins/index.md b/docs/plugins/index.md
index afccdc2c..d7d6e351 100644
--- a/docs/plugins/index.md
+++ b/docs/plugins/index.md
@@ -17,6 +17,7 @@ Each plugin is built with a **different UI framework**. That is deliberate: devf
 | [Git](./git) | React (Next.js) | A repository dashboard — status, a commit graph, branches, and diffs, with optional staging and committing. |
 | [Terminals](./terminals) | Svelte | Stream read-only command output and run fully interactive PTY shells in the browser. |
 | [Code Server](./code-server) | Vue | Launch VS Code in the browser (code-server, `code serve-web`, or a tunnel) on demand and embed it in an auto-authenticated iframe. |
+| [Assets](./assets) | Vue | Browse, preview, upload, rename, and delete the files in a managed directory. |
 
 ## One client, any framework
 
@@ -32,6 +33,7 @@ Most plugins publish a `bin`, so the quickest path is `pnpx`:
 pnpx @devframes/plugin-inspect      # the Devframe Inspector, standalone
 pnpx @devframes/plugin-og           # inspect Open Graph metadata and social cards
 pnpx @devframes/plugin-git          # the Git dashboard against the current repo
+pnpx @devframes/plugin-assets       # manage the files under <cwd>/public
 ```
 
 Each also exports a `create…Devframe` factory (or, for the Accessibility Inspector, a ready-made definition) you can drive through any adapter — see the individual pages for the factory name, options, and host-mount snippets.
diff --git a/examples/vite-devframe-hub/package.json b/examples/vite-devframe-hub/package.json
index 5e8271fb..ab5ba3f7 100644
--- a/examples/vite-devframe-hub/package.json
+++ b/examples/vite-devframe-hub/package.json
@@ -16,6 +16,7 @@
     "@devframes/json-render": "workspace:*",
     "@devframes/json-render-ui": "workspace:*",
     "@devframes/plugin-a11y": "workspace:*",
+    "@devframes/plugin-assets": "workspace:*",
     "@devframes/plugin-code-server": "workspace:*",
     "@devframes/plugin-data-inspector": "workspace:*",
     "@devframes/plugin-git": "workspace:*",
diff --git a/examples/vite-devframe-hub/vite.config.ts b/examples/vite-devframe-hub/vite.config.ts
index 60363386..08506acb 100644
--- a/examples/vite-devframe-hub/vite.config.ts
+++ b/examples/vite-devframe-hub/vite.config.ts
@@ -1,6 +1,7 @@
 import { mountDevframe } from '@devframes/hub/node'
 import { toJsonRenderDockEntry } from '@devframes/json-render/hub'
 import a11yDevframe, { a11yAgentBundlePath } from '@devframes/plugin-a11y'
+import assetsDevframe from '@devframes/plugin-assets'
 import codeServerDevframe from '@devframes/plugin-code-server'
 import dataInspectorDevframe from '@devframes/plugin-data-inspector'
 import { registerDataSource } from '@devframes/plugin-data-inspector/registry'
@@ -72,6 +73,7 @@ export default defineConfig({
         a11yDevframe,
         messagesDevframe,
         ogDevframe,
+        assetsDevframe,
       ],
       // Attach the a11y inspector's in-page agent as its dock's client script.
       // The hub client runtime (booted in src/client/main.ts) imports it into
diff --git a/packages/devframe/src/adapters/__tests__/build.test.ts b/packages/devframe/src/adapters/__tests__/build.test.ts
new file mode 100644
index 00000000..516ac687
--- /dev/null
+++ b/packages/devframe/src/adapters/__tests__/build.test.ts
@@ -0,0 +1,63 @@
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { defineDevframe } from '../../types/devframe'
+import { createBuild } from '../build'
+
+function makeTmpDist(): string {
+  const dir = mkdtempSync(join(tmpdir(), 'devframe-build-test-'))
+  writeFileSync(join(dir, 'index.html'), '<!doctype html><title>test</title>', 'utf-8')
+  return dir
+}
+
+function baseDevframe(overrides: Partial<ReturnType<typeof defineDevframe>> = {}) {
+  const distDir = makeTmpDist()
+  return defineDevframe({
+    id: 'devframe-build-test',
+    name: 'Devframe Build Test',
+    version: '0.0.0',
+    packageName: 'devframe-build-test',
+    homepage: 'https://example.test',
+    description: 'Test devframe.',
+    cli: { distDir },
+    setup: () => {},
+    ...overrides,
+  })
+}
+
+describe('adapters/build', () => {
+  it('rejects a definition with capabilities.build: false by default', async () => {
+    const outDir = mkdtempSync(join(tmpdir(), 'devframe-build-test-out-'))
+    try {
+      await expect(
+        createBuild(baseDevframe({ capabilities: { build: false } }), { outDir }),
+      ).rejects.toThrow(/capabilities\.build: false/)
+    }
+    finally {
+      rmSync(outDir, { recursive: true, force: true })
+    }
+  })
+
+  it('proceeds past capabilities.build: false when force is set', async () => {
+    const outDir = mkdtempSync(join(tmpdir(), 'devframe-build-test-out-'))
+    try {
+      await expect(
+        createBuild(baseDevframe({ capabilities: { build: false } }), { outDir, force: true }),
+      ).resolves.toBeUndefined()
+    }
+    finally {
+      rmSync(outDir, { recursive: true, force: true })
+    }
+  })
+
+  it('proceeds normally when capabilities.build is unset', async () => {
+    const outDir = mkdtempSync(join(tmpdir(), 'devframe-build-test-out-'))
+    try {
+      await expect(createBuild(baseDevframe(), { outDir })).resolves.toBeUndefined()
+    }
+    finally {
+      rmSync(outDir, { recursive: true, force: true })
+    }
+  })
+})
diff --git a/packages/devframe/src/adapters/__tests__/cac.test.ts b/packages/devframe/src/adapters/__tests__/cac.test.ts
new file mode 100644
index 00000000..c0eb9ea6
--- /dev/null
+++ b/packages/devframe/src/adapters/__tests__/cac.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { defineDevframe } from '../../types/devframe'
+import { createCac } from '../cac'
+
+function baseDevframe(overrides: Partial<ReturnType<typeof defineDevframe>> = {}) {
+  return defineDevframe({
+    id: 'devframe-test',
+    name: 'Devframe Test',
+    version: '0.0.0',
+    packageName: 'devframe-test',
+    homepage: 'https://example.test',
+    description: 'Test devframe.',
+    setup: () => {},
+    ...overrides,
+  })
+}
+
+describe('adapters/cac', () => {
+  it('registers the build subcommand by default', () => {
+    const { cli } = createCac(baseDevframe())
+    expect(cli.commands.map(c => c.name)).toContain('build')
+  })
+
+  it('skips the build subcommand when capabilities.build is false', () => {
+    const { cli } = createCac(baseDevframe({ capabilities: { build: false } }))
+    expect(cli.commands.map(c => c.name)).not.toContain('build')
+  })
+
+  it('still registers build when capabilities.build is true or a record', () => {
+    const truthy = createCac(baseDevframe({ capabilities: { build: true } }))
+    expect(truthy.cli.commands.map(c => c.name)).toContain('build')
+
+    const record = createCac(baseDevframe({ capabilities: { build: { dump: true } } }))
+    expect(record.cli.commands.map(c => c.name)).toContain('build')
+  })
+
+  it('always registers the dev and mcp commands regardless of capabilities.build', () => {
+    const { cli } = createCac(baseDevframe({ capabilities: { build: false } }))
+    const names = cli.commands.map(c => c.name)
+    expect(names).toContain('mcp')
+    // The dev command is registered as the catch-all `[...args]` command,
+    // which cac surfaces with an empty `name`.
+    expect(cli.commands.some(c => c.rawName === '[...args]')).toBe(true)
+  })
+})
diff --git a/packages/devframe/src/adapters/build.ts b/packages/devframe/src/adapters/build.ts
index 3ea701ef..5b833d08 100644
--- a/packages/devframe/src/adapters/build.ts
+++ b/packages/devframe/src/adapters/build.ts
@@ -12,6 +12,7 @@ import {
   DEVFRAME_RPC_DUMP_MANIFEST_FILENAME,
 } from '../constants'
 import { createHostContext } from '../node/context'
+import { diagnostics } from '../node/diagnostics'
 import { createH3DevframeHost } from '../node/host-h3'
 import { collectStaticRpcDump } from '../rpc/dump/static'
 import { strictJsonStringify } from '../rpc/serialization'
@@ -34,6 +35,13 @@ export interface CreateBuildOptions {
    * minified. Set `true` when you need to diff / read the dumps by hand.
    */
   pretty?: boolean
+  /**
+   * Proceed even when the definition declares `capabilities.build: false`.
+   * `createCac` already skips registering the `build` subcommand for such
+   * a definition — this only matters for a caller invoking `createBuild`
+   * directly, bypassing the CLI.
+   */
+  force?: boolean
 }
 
 /**
@@ -50,6 +58,9 @@ export interface CreateBuildOptions {
  *     works at `/`, `/devframe/`, or any base, no rewriting required.
  */
 export async function createBuild(d: DevframeDefinition, options: CreateBuildOptions = {}): Promise<void> {
+  if (d.capabilities?.build === false && !options.force)
+    throw diagnostics.DF0042({ id: d.id })
+
   const outDir = resolve(options.outDir ?? 'dist-static')
   const distDir = options.distDir ?? d.cli?.distDir
   if (!distDir)
diff --git a/packages/devframe/src/adapters/cac.ts b/packages/devframe/src/adapters/cac.ts
index c51bc05b..a513e220 100644
--- a/packages/devframe/src/adapters/cac.ts
+++ b/packages/devframe/src/adapters/cac.ts
@@ -108,14 +108,19 @@ export function createCac(d: DevframeDefinition, options: CreateCacOptions = {})
     })
   })
 
-  cli
-    .command('build', 'Build a self-contained static deploy of the devframe')
-    .option('--out-dir <outDir>', 'Output directory', { default: 'dist-static' })
-    .option('--base <base>', 'URL base', { default: '/' })
-    .option('--pretty', 'Pretty-print dump JSON (larger on disk)')
-    .action(async (flags: { outDir: string, base?: string, pretty?: boolean }) => {
-      await createBuild(d, { outDir: flags.outDir, base: flags.base, pretty: flags.pretty })
-    })
+  // `capabilities.build === false` opts a devframe out of the `build`
+  // subcommand entirely, rather than registering it only to have it
+  // produce a broken or misleading static export.
+  if (d.capabilities?.build !== false) {
+    cli
+      .command('build', 'Build a self-contained static deploy of the devframe')
+      .option('--out-dir <outDir>', 'Output directory', { default: 'dist-static' })
+      .option('--base <base>', 'URL base', { default: '/' })
+      .option('--pretty', 'Pretty-print dump JSON (larger on disk)')
+      .action(async (flags: { outDir: string, base?: string, pretty?: boolean }) => {
+        await createBuild(d, { outDir: flags.outDir, base: flags.base, pretty: flags.pretty })
+      })
+  }
 
   cli
     .command('mcp', 'Start an MCP server exposing agent-facing tools (stdio) [experimental]')
diff --git a/packages/devframe/src/node/diagnostics.ts b/packages/devframe/src/node/diagnostics.ts
index 58d4be24..000247ea 100644
--- a/packages/devframe/src/node/diagnostics.ts
+++ b/packages/devframe/src/node/diagnostics.ts
@@ -76,5 +76,9 @@ export const diagnostics = defineDiagnostics({
       why: (p: { id: string }) => `A service is already provided under "${p.id}".`,
       fix: 'Service ids are unique per context. Revoke the existing provider first (the `provide()` call returns a revoke function), or namespace the id with your plugin id to avoid collisions.',
     },
+    DF0042: {
+      why: (p: { id: string }) => `"${p.id}" declares \`capabilities.build: false\` — its static export is not meaningful (writes are excluded and any live-served data won't be there).`,
+      fix: 'Pass `{ force: true }` to `createBuild()` if the degraded export is still useful to you, or drop `capabilities.build: false` on the definition.',
+    },
   },
 })
diff --git a/packages/devframe/src/types/devframe.ts b/packages/devframe/src/types/devframe.ts
index 5f57777f..cd650357 100644
--- a/packages/devframe/src/types/devframe.ts
+++ b/packages/devframe/src/types/devframe.ts
@@ -296,6 +296,16 @@ export interface DevframeDefinition {
    * @default 'warn'
    */
   duplicationStrategy?: DevframeDuplicationStrategy
+  /**
+   * Declares which runtimes meaningfully support this devframe. Consulted
+   * by adapters that can act on a plain `false` before doing any work:
+   * `createCac` skips registering the `build` subcommand entirely when
+   * `capabilities.build` is `false` — useful for a devframe whose value is
+   * inherently live (e.g. it manages real files on disk), so a static
+   * export would only ever produce a broken, write-less shell of the tool.
+   * The `Record<string, boolean>` shape is reserved for finer-grained
+   * sub-capabilities and currently unconsumed by any adapter.
+   */
   capabilities?: {
     dev?: boolean | Record<string, boolean>
     build?: boolean | Record<string, boolean>
diff --git a/plugins/assets/.storybook/main.ts b/plugins/assets/.storybook/main.ts
new file mode 100644
index 00000000..1e2921c3
--- /dev/null
+++ b/plugins/assets/.storybook/main.ts
@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { mergeConfig } from 'vite'
+import { alias } from '../../../alias'
+
+const config: StorybookConfig = {
+  stories: ['../src/spa/app/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  async viteFinal(viteConfig) {
+    return mergeConfig(viteConfig, {
+      resolve: { alias },
+      plugins: [vue(), UnoCSS()],
+      // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels, tailnets),
+      // e.g. when iframed by the storybook-hub example: accept any Host header.
+      server: { allowedHosts: true },
+    })
+  },
+}
+
+export default config
diff --git a/plugins/assets/.storybook/preview.ts b/plugins/assets/.storybook/preview.ts
new file mode 100644
index 00000000..2e2ef757
--- /dev/null
+++ b/plugins/assets/.storybook/preview.ts
@@ -0,0 +1,40 @@
+import type { Decorator, Preview } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import 'virtual:uno.css'
+import 'floating-vue/dist/style.css'
+import '@antfu/design/styles.css'
+
+const withTheme: Decorator = (story, context) => {
+  const theme = context.globals.theme ?? 'dark'
+  document.documentElement.classList.toggle('dark', theme !== 'light')
+  return () => h(
+    'div',
+    { class: 'flex h-svh justify-center bg-base p-6 color-base font-sans' },
+    [h('div', { class: 'flex h-full w-full max-w-2xl flex-col overflow-hidden rounded-lg border border-base p-3' }, [h(story())])],
+  )
+}
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    controls: { expanded: true },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Color theme',
+      defaultValue: 'dark',
+      toolbar: {
+        title: 'Theme',
+        icon: 'contrast',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [withTheme],
+}
+
+export default preview
diff --git a/plugins/assets/.storybook/shims.d.ts b/plugins/assets/.storybook/shims.d.ts
new file mode 100644
index 00000000..c1fdbad2
--- /dev/null
+++ b/plugins/assets/.storybook/shims.d.ts
@@ -0,0 +1,3 @@
+// Side-effect style imports used by the Storybook preview.
+declare module '*.css' {}
+declare module 'virtual:uno.css' {}
diff --git a/plugins/assets/README.md b/plugins/assets/README.md
new file mode 100644
index 00000000..8db27d64
--- /dev/null
+++ b/plugins/assets/README.md
@@ -0,0 +1,13 @@
+# `@devframes/plugin-assets`
+
+Browse, preview, upload, rename, and delete the files in a directory — a framework-neutral port of Nuxt DevTools' Assets tab, built as a **Vue** SPA on `@antfu/design`.
+
+```sh
+pnpx @devframes/plugin-assets
+```
+
+Manages `<cwd>/public` by default. The package exports `createAssetsDevframe()` for custom definitions and `assetsVitePlugin()` from `@devframes/plugin-assets/vite` for Vite hosts. Pass `{ dir }` to manage a different directory, `{ baseURL }` to match where the host serves it, or `{ write: false }` (`--read-only` on the standalone CLI) for a browse-only deployment.
+
+Asset previews load files by their public URL, served by the host the plugin is mounted into (Vite/Nuxt/etc. already serve `public/` at `/`) — the plugin doesn't serve the bytes itself. The standalone CLI is its own host, so it serves the directory for you.
+
+The standalone server requires devframe's trust handshake by default because it can read, write, and delete real files. The `build` CLI subcommand is disabled by default — see the docs page for why.
diff --git a/plugins/assets/bin.mjs b/plugins/assets/bin.mjs
new file mode 100755
index 00000000..6f40a699
--- /dev/null
+++ b/plugins/assets/bin.mjs
@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import process from 'node:process'
+import { createAssetsCli } from './dist/cli.mjs'
+
+async function main() {
+  await createAssetsCli().parse()
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/plugins/assets/package.json b/plugins/assets/package.json
new file mode 100644
index 00000000..3a5162b5
--- /dev/null
+++ b/plugins/assets/package.json
@@ -0,0 +1,92 @@
+{
+  "name": "@devframes/plugin-assets",
+  "type": "module",
+  "version": "0.7.15",
+  "description": "Devframe plugin for browsing, previewing, uploading, and managing static assets in a directory — a framework-neutral port of Nuxt DevTools' Assets tab.",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/devframes/devframe#readme",
+  "repository": {
+    "directory": "plugins/assets",
+    "type": "git",
+    "url": "git+https://github.com/devframes/devframe.git"
+  },
+  "bugs": "https://github.com/devframes/devframe/issues",
+  "keywords": [
+    "devframe",
+    "devframe-plugin",
+    "devtools",
+    "assets",
+    "static-files"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./client": "./dist/client/index.mjs",
+    "./cli": "./dist/cli.mjs",
+    "./node": "./dist/node/index.mjs",
+    "./rpc": "./dist/rpc/index.mjs",
+    "./vite": "./dist/vite.mjs",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "bin": {
+    "devframe-assets": "./bin.mjs"
+  },
+  "files": [
+    "bin.mjs",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown && vite build --config src/spa/vite.config.ts",
+    "dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
+    "watch": "tsdown --watch",
+    "storybook": "storybook dev -p 6013 --host 0.0.0.0",
+    "storybook:build": "storybook build",
+    "prepack": "pnpm build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "devframe": "workspace:*",
+    "vite": "^7.0.0 || ^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "cac": "catalog:deps",
+    "chokidar": "catalog:deps",
+    "image-meta": "catalog:deps",
+    "nostics": "catalog:deps",
+    "pathe": "catalog:deps",
+    "perfect-debounce": "catalog:deps",
+    "tinyglobby": "catalog:deps",
+    "ufo": "catalog:deps",
+    "valibot": "catalog:deps"
+  },
+  "devDependencies": {
+    "@antfu/design": "catalog:frontend",
+    "@iconify-json/ph": "catalog:frontend",
+    "@storybook/addon-a11y": "catalog:storybook",
+    "@storybook/addon-docs": "catalog:storybook",
+    "@storybook/vue3-vite": "catalog:storybook",
+    "@types/node": "catalog:types",
+    "@vitejs/plugin-vue": "catalog:build",
+    "colorjs.io": "catalog:frontend",
+    "devframe": "workspace:*",
+    "floating-vue": "catalog:frontend",
+    "get-port-please": "catalog:deps",
+    "h3": "catalog:deps",
+    "reka-ui": "catalog:frontend",
+    "storybook": "catalog:storybook",
+    "tsdown": "catalog:build",
+    "unocss": "catalog:frontend",
+    "vite": "catalog:build",
+    "vitest": "catalog:testing",
+    "vue": "catalog:frontend",
+    "ws": "catalog:deps"
+  }
+}
diff --git a/plugins/assets/public/data/notes.md b/plugins/assets/public/data/notes.md
new file mode 100644
index 00000000..c5ff0266
--- /dev/null
+++ b/plugins/assets/public/data/notes.md
@@ -0,0 +1,7 @@
+# Sample notes
+
+These files are **fixtures** for the assets plugin's dev server (`pnpm dev`).
+
+- Edit this file from the details panel to exercise the text editor.
+- Rename or delete it to exercise the write actions.
+- Drop new files anywhere on the frame to exercise uploads.
diff --git a/plugins/assets/public/data/site.json b/plugins/assets/public/data/site.json
new file mode 100644
index 00000000..8cb2d983
--- /dev/null
+++ b/plugins/assets/public/data/site.json
@@ -0,0 +1,12 @@
+{
+  "name": "Devframe Assets",
+  "description": "Sample fixtures for the assets plugin dev server.",
+  "theme": {
+    "primary": "#3a6a45",
+    "surface": "#ffffff"
+  },
+  "nav": [
+    { "label": "Home", "href": "/" },
+    { "label": "Docs", "href": "/docs" }
+  ]
+}
diff --git a/plugins/assets/public/favicon.svg b/plugins/assets/public/favicon.svg
new file mode 100644
index 00000000..1f91f717
--- /dev/null
+++ b/plugins/assets/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" role="img" aria-label="Favicon">
+  <rect width="32" height="32" rx="7" fill="#517158" />
+  <circle cx="16" cy="16" r="7" fill="none" stroke="#fff" stroke-width="3" />
+</svg>
diff --git a/plugins/assets/public/images/banner.svg b/plugins/assets/public/images/banner.svg
new file mode 100644
index 00000000..dcb53b02
--- /dev/null
+++ b/plugins/assets/public/images/banner.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="200" viewBox="0 0 640 200" role="img" aria-label="Banner">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#3a6a45" />
+      <stop offset="1" stop-color="#8fb996" />
+    </linearGradient>
+  </defs>
+  <rect width="640" height="200" fill="url(#g)" />
+  <text x="40" y="115" fill="#fff" font-family="sans-serif" font-size="48" font-weight="700">Assets</text>
+</svg>
diff --git a/plugins/assets/public/images/tile-green.png b/plugins/assets/public/images/tile-green.png
new file mode 100644
index 00000000..8d0ca233
Binary files /dev/null and b/plugins/assets/public/images/tile-green.png differ
diff --git a/plugins/assets/public/images/tile-sage.png b/plugins/assets/public/images/tile-sage.png
new file mode 100644
index 00000000..0877fe73
Binary files /dev/null and b/plugins/assets/public/images/tile-sage.png differ
diff --git a/plugins/assets/public/logo.svg b/plugins/assets/public/logo.svg
new file mode 100644
index 00000000..d645a0bf
--- /dev/null
+++ b/plugins/assets/public/logo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" role="img" aria-label="Devframe Assets logo">
+  <rect width="128" height="128" rx="24" fill="#3a6a45" />
+  <path d="M40 84V44l24 16 24-16v40" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />
+  <circle cx="64" cy="98" r="6" fill="#fff" />
+</svg>
diff --git a/plugins/assets/public/robots.txt b/plugins/assets/public/robots.txt
new file mode 100644
index 00000000..c2a49f4f
--- /dev/null
+++ b/plugins/assets/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/plugins/assets/public/styles/theme.css b/plugins/assets/public/styles/theme.css
new file mode 100644
index 00000000..c75667c3
--- /dev/null
+++ b/plugins/assets/public/styles/theme.css
@@ -0,0 +1,11 @@
+:root {
+  --color-primary: #3a6a45;
+  --color-surface: #ffffff;
+  --radius: 0.5rem;
+}
+
+.button {
+  background: var(--color-primary);
+  border-radius: var(--radius);
+  color: #fff;
+}
diff --git a/plugins/assets/src/cli.ts b/plugins/assets/src/cli.ts
new file mode 100644
index 00000000..b631e6ce
--- /dev/null
+++ b/plugins/assets/src/cli.ts
@@ -0,0 +1,10 @@
+import type { CacHandle } from 'devframe/adapters/cac'
+import { createCac } from 'devframe/adapters/cac'
+import { createAssetsDevframe } from './index'
+
+export function createAssetsCli(): CacHandle {
+  // The standalone CLI is its own host, so it serves the managed directory
+  // itself (under a dedicated base) — unlike the mounted plugin, which
+  // defers to the Vite/framework dev server it's attached to.
+  return createCac(createAssetsDevframe({ serveStatic: true }))
+}
diff --git a/plugins/assets/src/client/index.ts b/plugins/assets/src/client/index.ts
new file mode 100644
index 00000000..16674c77
--- /dev/null
+++ b/plugins/assets/src/client/index.ts
@@ -0,0 +1,8 @@
+import type { DevframeRpcClientOptions } from 'devframe/client'
+import { connectDevframe } from 'devframe/client'
+
+export type { AssetImageMeta, AssetInfo, AssetType, CodeSnippet } from '../types'
+
+export function connectAssets(options?: DevframeRpcClientOptions) {
+  return connectDevframe(options)
+}
diff --git a/plugins/assets/src/constants.ts b/plugins/assets/src/constants.ts
new file mode 100644
index 00000000..991b3482
--- /dev/null
+++ b/plugins/assets/src/constants.ts
@@ -0,0 +1,5 @@
+/** Broadcast whenever a file is added, removed, or changed under the managed directory. */
+export const CHANGED_EVENT = 'devframes:plugin:assets:changed'
+
+/** Preferred standalone CLI port. */
+export const DEFAULT_PORT = 9015
diff --git a/plugins/assets/src/diagnostics.ts b/plugins/assets/src/diagnostics.ts
new file mode 100644
index 00000000..fad59a0b
--- /dev/null
+++ b/plugins/assets/src/diagnostics.ts
@@ -0,0 +1,38 @@
+import { defineDiagnostics } from 'nostics'
+
+// Uses the plugin's own `DP_ASSETS_` prefix per the built-in plugin
+// convention, keeping it collision-free with devframe core (`DF`) and the
+// hub (`DF8xxx`).
+export const diagnostics = defineDiagnostics({
+  docsBase: 'https://devfra.me/errors',
+  codes: {
+    DP_ASSETS_0001: {
+      why: (p: { path: string }) => `"${p.path}" resolves outside the managed directory.`,
+      fix: 'Use a path relative to the configured `dir`, without leading `/` or `..` segments.',
+    },
+    DP_ASSETS_0002: {
+      why: (p: { path: string, extension: string, allowed: readonly string[] }) => `Cannot upload "${p.path}" because the "${p.extension}" extension is not allowed. Allowed extensions: ${p.allowed.join(', ')}.`,
+      fix: 'Configure `uploadExtensions` on the assets devframe to allow this extension, or pass `\'*\'` to allow any.',
+    },
+    DP_ASSETS_0003: {
+      why: (p: { path: string }) => `Cannot rename to "${p.path}" because a file already exists there.`,
+      fix: 'Choose a different name.',
+    },
+    DP_ASSETS_0004: {
+      why: (p: { path: string }) => `No asset found at "${p.path}".`,
+      fix: 'Refresh the asset list — it may have been moved or deleted already.',
+    },
+    DP_ASSETS_0005: {
+      why: (p: { path: string }) => `Cannot create folder "${p.path}" because a file already exists there.`,
+      fix: 'Choose a different folder name.',
+    },
+    DP_ASSETS_0006: {
+      why: (p: { name: string }) => `"${p.name}" is not a valid file name.`,
+      fix: 'Names must be non-empty and cannot contain `/` or `\\`.',
+    },
+    DP_ASSETS_0007: {
+      why: 'The upload streaming channel is unavailable because this devframe was set up with `write: false`.',
+      fix: 'This indicates an internal registration bug — `upload` should never be reachable without `write: true`. Please report it.',
+    },
+  },
+})
diff --git a/plugins/assets/src/index.ts b/plugins/assets/src/index.ts
new file mode 100644
index 00000000..bf9c897b
--- /dev/null
+++ b/plugins/assets/src/index.ts
@@ -0,0 +1,133 @@
+import type { DevframeDefinition } from 'devframe/types'
+import { fileURLToPath } from 'node:url'
+import { defineDevframe } from 'devframe/types'
+import { dirname, resolve } from 'pathe'
+import pkg from '../package.json' with { type: 'json' }
+import { DEFAULT_PORT } from './constants'
+import { setupAssets } from './node/index'
+import { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS } from './types'
+
+export type { AssetImageMeta, AssetInfo, AssetType, CodeSnippet } from './types'
+export { DEFAULT_ALLOWED_UPLOAD_EXTENSIONS } from './types'
+
+// Package root, resolved one level up from this module — which sits at
+// `<root>/src/index.ts` in dev and `<root>/dist/index.mjs` once built, so
+// the bundled SPA is always `<root>/dist/spa`.
+const PKG_ROOT = dirname(dirname(fileURLToPath(import.meta.url)))
+
+const DEFAULT_ID = 'devframes_plugin_assets'
+
+export interface AssetsDevframeOptions {
+  id?: string
+  name?: string
+  icon?: string
+  /**
+   * Directory this devframe manages. Defaults to `<cwd>/public` — the
+   * conventional static-asset folder for Nuxt, Vite, and most static-site
+   * frameworks. Pass an absolute path, or one relative to the devframe's
+   * own `cwd`.
+   */
+  dir?: string
+  /**
+   * URL base the **host** serves the managed directory at, used to build
+   * each asset's `publicPath`. Defaults to `/` — Vite, Nuxt, and most
+   * frameworks serve their `public/` folder at the site root. Set this to
+   * match a non-root deployment base (e.g. Nuxt's `app.baseURL`).
+   */
+  baseURL?: string
+  /**
+   * Serve the managed directory's bytes from this devframe itself.
+   * Defaults to `false`: when mounted into a host (Vite/Nuxt/…) that host
+   * already serves `public/` at {@link baseURL}, so the plugin references
+   * those URLs instead of standing up its own route. The standalone CLI
+   * sets this to `true` (it is its own host), serving the directory under
+   * a dedicated base so it doesn't collide with the SPA at `/`.
+   */
+  serveStatic?: boolean
+  basePath?: string
+  distDir?: string
+  /** Preferred standalone CLI port (default 9015). */
+  port?: number
+  /**
+   * Enable upload, rename, delete, and folder creation from the UI.
+   * Enabled by default — set `false` (or pass `--read-only` on the
+   * standalone CLI) for a browse-only deployment.
+   */
+  write?: boolean
+  /**
+   * Extensions `upload` accepts, or `'*'` to accept any file. Defaults to
+   * the same allow-list Nuxt DevTools ships.
+   */
+  uploadExtensions?: readonly string[] | '*'
+  /**
+   * Require the trust handshake on the standalone server. Enabled by
+   * default — this devframe can read, write, and delete real files.
+   */
+  auth?: boolean
+  /**
+   * Register the `build` CLI subcommand. Disabled by default: a static
+   * export can only ever list file metadata from a baked snapshot — there
+   * is no live host serving the files, and every write action is inherently
+   * excluded from a static dump — so the command would produce a broken,
+   * write-less shell of the tool. Opt back in if that degraded export is
+   * still useful to you.
+   */
+  build?: boolean
+}
+
+/**
+ * Create the assets manager devframe — a framework-neutral port of Nuxt
+ * DevTools' Assets tab. Mount it into any host via devframe's adapters, or
+ * run it standalone with the bundled CLI (`devframe-assets`).
+ *
+ * @experimental This plugin is experimental and may change without a major
+ * version bump until it stabilizes.
+ */
+export function createAssetsDevframe(options: AssetsDevframeOptions = {}): DevframeDefinition {
+  const id = options.id ?? DEFAULT_ID
+  const distDir = options.distDir ?? resolve(PKG_ROOT, 'dist/spa')
+  const write = options.write ?? true
+  const serveStatic = options.serveStatic ?? false
+  // When self-serving (standalone CLI), mount under a dedicated base so the
+  // asset bytes don't collide with the SPA served at `/`. Otherwise trust the
+  // host to serve `public/` at `baseURL` (default `/`).
+  const baseURL = options.baseURL ?? (serveStatic ? `/__${id}-raw/` : '/')
+
+  return defineDevframe({
+    id,
+    name: options.name ?? 'Assets',
+    version: pkg.version,
+    packageName: pkg.name,
+    homepage: pkg.homepage,
+    description: pkg.description,
+    icon: options.icon ?? 'ph:image-square-duotone',
+    basePath: options.basePath,
+    capabilities: { build: options.build ?? false },
+    cli: {
+      command: 'devframe-assets',
+      port: options.port ?? DEFAULT_PORT,
+      distDir,
+      auth: options.auth ?? true,
+      configure(cli) {
+        cli.option('--read-only', 'Disable upload, rename, delete, and folder creation')
+      },
+    },
+    spa: { loader: 'none' },
+    dock: { category: '~builtin' },
+    async setup(ctx, info) {
+      const readOnlyFlag = info?.flags?.readOnly === true
+      const dir = options.dir ? resolve(ctx.cwd, options.dir) : resolve(ctx.cwd, 'public')
+      await setupAssets(ctx, {
+        dir,
+        write: readOnlyFlag ? false : write,
+        uploadExtensions: options.uploadExtensions ?? DEFAULT_ALLOWED_UPLOAD_EXTENSIONS,
+        baseURL,
+        serveStatic,
+      })
+    },
+  })
+}
+
+const assetsDevframe: DevframeDefinition = createAssetsDevframe()
+
+export default assetsDevframe
diff --git a/plugins/assets/src/node/context.ts b/plugins/assets/src/node/context.ts
new file mode 100644
index 00000000..67ff7ce2
--- /dev/null
+++ b/plugins/assets/src/node/context.ts
@@ -0,0 +1,60 @@
+import type { DevframeNodeContext, RpcStreamingChannel } from 'devframe/types'
+import { resolveAssetPath } from './paths'
+
+export interface AssetsConfig {
+  /** Directory this devframe manages. */
+  dir: string
+  /** Whether upload / rename / delete / mkdir are registered. */
+  write: boolean
+  /** Extensions `upload` accepts, or `'*'` to accept any. */
+  uploadExtensions: readonly string[] | '*'
+  /**
+   * URL base the managed directory is served at. Normally the host
+   * (Vite / Nuxt / …) serves `public/` at `/`, so asset `publicPath`s are
+   * `joinURL(baseURL, path)` and the plugin serves nothing itself.
+   */
+  baseURL: string
+  /** The upload streaming channel, created once in `setupAssets` when `write` is enabled. */
+  uploadChannel?: RpcStreamingChannel<Uint8Array>
+}
+
+export interface AssetsContext extends AssetsConfig {
+  /** Resolve a root-relative path to an absolute one, rejecting escapes. */
+  resolvePath: (relativePath: string) => string
+}
+
+const configs = new WeakMap<DevframeNodeContext, AssetsConfig>()
+const contexts = new WeakMap<DevframeNodeContext, AssetsContext>()
+
+/**
+ * Record the managed directory and write policy for a context. Called from
+ * the devframe's `setup` before any RPC handler runs.
+ */
+export function configureAssets(ctx: DevframeNodeContext, config: AssetsConfig): void {
+  configs.set(ctx, config)
+  contexts.delete(ctx)
+}
+
+/**
+ * Per-`DevframeNodeContext` assets state. Each RPC function pulls its
+ * managed directory and path resolver from here instead of re-reading
+ * `configureAssets`'s config on every call.
+ */
+export function getAssetsContext(ctx: DevframeNodeContext): AssetsContext {
+  const existing = contexts.get(ctx)
+  if (existing)
+    return existing
+
+  const config = configs.get(ctx)
+  const dir = config?.dir ?? ctx.cwd
+  const built: AssetsContext = {
+    dir,
+    write: config?.write ?? true,
+    uploadExtensions: config?.uploadExtensions ?? '*',
+    baseURL: config?.baseURL ?? '/',
+    uploadChannel: config?.uploadChannel,
+    resolvePath: (relativePath: string) => resolveAssetPath(dir, relativePath),
+  }
+  contexts.set(ctx, built)
+  return built
+}
diff --git a/plugins/assets/src/node/index.ts b/plugins/assets/src/node/index.ts
new file mode 100644
index 00000000..ede90c99
--- /dev/null
+++ b/plugins/assets/src/node/index.ts
@@ -0,0 +1,91 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import { existsSync } from 'node:fs'
+import fsp from 'node:fs/promises'
+import { UPLOAD_CHANNEL } from '../rpc/functions/upload'
+import { alwaysFunctions, readFunctions, writeFunctions } from '../rpc/index'
+import { configureAssets } from './context'
+import { watchAssetsDir } from './watcher'
+
+export interface SetupAssetsOptions {
+  /** Directory this devframe manages. */
+  dir: string
+  /** Whether upload / rename / delete / mkdir are registered. */
+  write: boolean
+  /** Extensions `upload` accepts, or `'*'` to accept any. */
+  uploadExtensions: readonly string[] | '*'
+  /**
+   * URL base the managed directory is served at — the base every asset's
+   * `publicPath` is resolved against.
+   */
+  baseURL: string
+  /**
+   * Whether this devframe should serve the managed directory's bytes
+   * itself. Left `false` when mounted into a host (Vite / Nuxt / …) that
+   * already serves `public/` at {@link baseURL}; set `true` only for the
+   * standalone CLI, which is its own host.
+   */
+  serveStatic: boolean
+}
+
+const watchers = new WeakMap<DevframeNodeContext, () => Promise<void>>()
+
+/**
+ * Register the assets RPC surface on a devframe node context: ensures the
+ * managed directory exists, registers the read RPCs (always) and write
+ * RPCs (when enabled), and starts a live file watcher in dev mode.
+ *
+ * Raw asset bytes (for `<img>`/`<video>`/download previews) are served by
+ * the **host** the plugin is attached to — Vite, Nuxt, or any framework
+ * already serves its `public/` dir at {@link SetupAssetsOptions.baseURL}.
+ * The plugin only serves them itself when `serveStatic` is set (the
+ * standalone CLI, which is its own host).
+ *
+ * Called from the definition's `setup(ctx)` and reusable by host adapters
+ * that wire their own context.
+ */
+export async function setupAssets(ctx: DevframeNodeContext, options: SetupAssetsOptions): Promise<void> {
+  if (!existsSync(options.dir))
+    await fsp.mkdir(options.dir, { recursive: true })
+
+  const uploadChannel = options.write
+    ? ctx.rpc.streaming.create<Uint8Array>(UPLOAD_CHANNEL)
+    : undefined
+
+  configureAssets(ctx, { ...options, uploadChannel })
+
+  // Only self-serve when this devframe is its own host (the standalone
+  // CLI). When attached to a Vite/Nuxt/etc. dev server, that host already
+  // serves the managed directory at `baseURL`, so we reference its URLs
+  // rather than mounting our own route.
+  if (options.serveStatic)
+    ctx.views.hostStatic(options.baseURL, options.dir)
+
+  for (const fn of readFunctions)
+    ctx.rpc.register(fn)
+  for (const fn of alwaysFunctions)
+    ctx.rpc.register(fn)
+  if (options.write) {
+    for (const fn of writeFunctions)
+      ctx.rpc.register(fn)
+  }
+
+  if (ctx.mode === 'dev')
+    watchers.set(ctx, watchAssetsDir(ctx, options.dir))
+}
+
+/**
+ * Stop the live file watcher started by {@link setupAssets}. Test harnesses
+ * wrap their dev-server `close()` with this — see `test/_utils.ts` — so a
+ * leaked chokidar watcher doesn't keep the process alive.
+ */
+export async function disposeAssetsWatcher(ctx: DevframeNodeContext): Promise<void> {
+  const dispose = watchers.get(ctx)
+  if (!dispose)
+    return
+  watchers.delete(ctx)
+  await dispose()
+}
+
+export { configureAssets, getAssetsContext } from './context'
+export { resolveAssetPath } from './paths'
+export { guessAssetType, scanAssets } from './scanner'
diff --git a/plugins/assets/src/node/paths.ts b/plugins/assets/src/node/paths.ts
new file mode 100644
index 00000000..1e3c480d
--- /dev/null
+++ b/plugins/assets/src/node/paths.ts
@@ -0,0 +1,17 @@
+import { resolve } from 'pathe'
+import { diagnostics } from '../diagnostics'
+
+/**
+ * Resolve a client-supplied, root-relative path against the managed
+ * directory, rejecting anything that would escape it (`..` traversal, a
+ * rogue absolute path, etc.). Every RPC handler that touches the
+ * filesystem goes through this — never trust a path from the wire.
+ */
+export function resolveAssetPath(root: string, relativePath: string): string {
+  const cleaned = relativePath.replace(/^[/\\]+/, '')
+  const normalizedRoot = resolve(root)
+  const absolute = resolve(normalizedRoot, cleaned)
+  if (absolute !== normalizedRoot && !absolute.startsWith(`${normalizedRoot}/`))
+    throw diagnostics.DP_ASSETS_0001({ path: relativePath })
+  return absolute
+}
diff --git a/plugins/assets/src/node/scanner.ts b/plugins/assets/src/node/scanner.ts
new file mode 100644
index 00000000..e50b5821
--- /dev/null
+++ b/plugins/assets/src/node/scanner.ts
@@ -0,0 +1,65 @@
+import type { Stats } from 'node:fs'
+import type { AssetInfo, AssetType } from '../types'
+import fsp from 'node:fs/promises'
+import { join } from 'pathe'
+import { glob } from 'tinyglobby'
+import { joinURL } from 'ufo'
+
+const reImage = /\.(?:png|jpe?g|jxl|gif|svg|webp|avif|ico|bmp|tiff?)$/i
+const reVideo = /\.(?:mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|ts|mts|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)$/i
+const reAudio = /\.(?:mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)$/i
+const reFont = /\.(?:woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)$/i
+const reText = /\.(?:json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown|ya?ml|toml|csv|css|scss|less|styl|html?|xml|vue|svelte|astro|env|ini|conf|sh)$/i
+
+/** Classifies a path by extension, driving preview and icon choice. */
+export function guessAssetType(path: string): AssetType {
+  if (reImage.test(path))
+    return 'image'
+  if (reVideo.test(path))
+    return 'video'
+  if (reAudio.test(path))
+    return 'audio'
+  if (reFont.test(path))
+    return 'font'
+  if (reText.test(path))
+    return 'text'
+  return 'other'
+}
+
+function toPublicPath(baseURL: string, posixPath: string): string {
+  const encoded = posixPath.split('/').map(encodeURIComponent).join('/')
+  return joinURL(baseURL, encoded)
+}
+
+/** Builds an {@link AssetInfo} from an already-resolved `fs.Stats`. */
+export function statToAssetInfo(dir: string, baseURL: string, relPath: string, stat: Stats): AssetInfo {
+  const posixPath = relPath.replace(/\\/g, '/')
+  return {
+    path: posixPath,
+    type: guessAssetType(posixPath),
+    publicPath: toPublicPath(baseURL, posixPath),
+    size: stat.size,
+    mtime: stat.mtimeMs,
+  }
+}
+
+/** Recursively lists every file under `dir`, sorted alphabetically by path. */
+export async function scanAssets(dir: string, baseURL: string): Promise<AssetInfo[]> {
+  const files = await glob(['**/*'], { cwd: dir, onlyFiles: true, dot: false })
+
+  const infos = await Promise.all(files.map(async (relPath): Promise<AssetInfo | undefined> => {
+    try {
+      const stat = await fsp.lstat(join(dir, relPath))
+      return statToAssetInfo(dir, baseURL, relPath, stat)
+    }
+    catch {
+      // Removed between the glob scan and the stat call — drop it silently,
+      // the next scan (or the live watcher) will settle.
+      return undefined
+    }
+  }))
+
+  return infos
+    .filter((info): info is AssetInfo => info !== undefined)
+    .sort((a, b) => a.path.localeCompare(b.path))
+}
diff --git a/plugins/assets/src/node/watcher.ts b/plugins/assets/src/node/watcher.ts
new file mode 100644
index 00000000..9af0b00c
--- /dev/null
+++ b/plugins/assets/src/node/watcher.ts
@@ -0,0 +1,33 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import { watch } from 'chokidar'
+import { debounce } from 'perfect-debounce'
+import { CHANGED_EVENT } from '../constants'
+
+/**
+ * Watch the managed directory and broadcast {@link CHANGED_EVENT} (debounced)
+ * whenever a file is added, removed, or changed, so connected UIs refresh
+ * their listing live. Returns a disposer; call it when the devframe shuts
+ * down (tests in particular — a leaked watcher keeps the process alive).
+ */
+export function watchAssetsDir(ctx: DevframeNodeContext, dir: string): () => Promise<void> {
+  const notify = debounce(async () => {
+    await ctx.rpc.broadcast({ method: CHANGED_EVENT, args: [] } as never)
+  }, 300)
+
+  const watcher = watch(dir, {
+    ignoreInitial: true,
+    // Directories can nest arbitrarily deep (icon sets, generated builds
+    // dropped into the managed dir, …) — chokidar's default depth is
+    // unlimited, but pin a generous cap so a runaway symlink loop can't
+    // spin the watcher forever.
+    depth: 32,
+  })
+  watcher
+    .on('add', () => void notify())
+    .on('unlink', () => void notify())
+    .on('addDir', () => void notify())
+    .on('unlinkDir', () => void notify())
+    .on('change', () => void notify())
+
+  return () => watcher.close()
+}
diff --git a/plugins/assets/src/rpc/functions/capabilities.ts b/plugins/assets/src/rpc/functions/capabilities.ts
new file mode 100644
index 00000000..09c9997c
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/capabilities.ts
@@ -0,0 +1,44 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import * as v from 'valibot'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+export interface AssetsCapabilities {
+  write: boolean
+  uploadExtensions: readonly string[] | '*'
+}
+
+/**
+ * Lets the UI know upfront whether upload / rename / delete / mkdir are
+ * available, so it can hide or disable those affordances proactively
+ * instead of letting the user hit a "method not found" error — the same
+ * `canWrite`-gating idea the git plugin's `GitStatus.canWrite` follows.
+ */
+export const capabilities = defineAssetsRpc({
+  name: 'devframes:plugin:assets:capabilities',
+  type: 'query',
+  snapshot: true,
+  jsonSerializable: true,
+  args: [],
+  returns: v.object({
+    write: v.boolean(),
+    uploadExtensions: v.union([v.array(v.string()), v.literal('*')]),
+  }),
+  agent: {
+    title: 'Read assets capabilities',
+    description: 'Read whether upload, rename, delete, and folder creation are enabled, and which upload extensions are allowed.',
+    safety: 'read',
+    tags: ['assets'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      handler: (async (): Promise<AssetsCapabilities> => ({
+        write: assets.write,
+        uploadExtensions: assets.uploadExtensions,
+      })) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/delete.ts b/plugins/assets/src/rpc/functions/delete.ts
new file mode 100644
index 00000000..3e363f5a
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/delete.ts
@@ -0,0 +1,45 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import fsp from 'node:fs/promises'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import * as v from 'valibot'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+/** One request covers both single- and multi-select delete. */
+export const deleteAssets = defineAssetsRpc({
+  name: 'devframes:plugin:assets:delete',
+  type: 'action',
+  jsonSerializable: true,
+  args: [v.object({ paths: v.array(v.string()) })],
+  returns: v.object({ deleted: v.array(v.string()) }),
+  agent: {
+    title: 'Delete assets',
+    description: 'Delete one or more assets from the managed directory.',
+    safety: 'destructive',
+    tags: ['assets'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async ({ paths }: { paths: string[] }): Promise<{ deleted: string[] }> => {
+        const deleted: string[] = []
+        for (const path of paths) {
+          const absolute = assets.resolvePath(path)
+          try {
+            await fsp.unlink(absolute)
+            deleted.push(path)
+          }
+          catch (error) {
+            // A stale listing pointing at an already-removed file is not
+            // exceptional for a bulk delete — skip it and keep going.
+            if ((error as NodeJS.ErrnoException).code !== 'ENOENT')
+              throw error
+          }
+        }
+        return { deleted }
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/list.ts b/plugins/assets/src/rpc/functions/list.ts
new file mode 100644
index 00000000..5134c9d0
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/list.ts
@@ -0,0 +1,40 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import type { AssetInfo } from '../../types'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import * as v from 'valibot'
+import { getAssetsContext } from '../../node/context'
+import { scanAssets } from '../../node/scanner'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+export const assetInfoSchema = v.object({
+  path: v.string(),
+  type: v.picklist(['image', 'font', 'video', 'audio', 'text', 'other']),
+  publicPath: v.string(),
+  size: v.number(),
+  mtime: v.number(),
+})
+
+export const list = defineAssetsRpc({
+  name: 'devframes:plugin:assets:list',
+  type: 'query',
+  snapshot: true,
+  jsonSerializable: true,
+  args: [],
+  returns: v.array(assetInfoSchema),
+  agent: {
+    title: 'List managed assets',
+    description: 'List every file under the managed directory with its type, size, and last-modified time.',
+    safety: 'read',
+    tags: ['assets', 'files'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // The RPC runtime awaits handlers before validating `returns`; its
+      // public setup type currently models schema-backed returns as
+      // synchronous.
+      handler: (async (): Promise<AssetInfo[]> => scanAssets(assets.dir, assets.baseURL)) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/mkdir.ts b/plugins/assets/src/rpc/functions/mkdir.ts
new file mode 100644
index 00000000..8b5d085e
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/mkdir.ts
@@ -0,0 +1,35 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import fsp from 'node:fs/promises'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import * as v from 'valibot'
+import { diagnostics } from '../../diagnostics'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+export const mkdir = defineAssetsRpc({
+  name: 'devframes:plugin:assets:mkdir',
+  type: 'action',
+  jsonSerializable: true,
+  args: [v.object({ path: v.string() })],
+  returns: v.void(),
+  agent: {
+    title: 'Create a folder',
+    description: 'Create a folder under the managed directory, including any missing parent folders.',
+    safety: 'action',
+    tags: ['assets'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async ({ path }: { path: string }): Promise<void> => {
+        const absolute = assets.resolvePath(path)
+        const stat = await fsp.stat(absolute).catch(() => undefined)
+        if (stat && !stat.isDirectory())
+          throw diagnostics.DP_ASSETS_0005({ path })
+        await fsp.mkdir(absolute, { recursive: true })
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/open-in-editor.ts b/plugins/assets/src/rpc/functions/open-in-editor.ts
new file mode 100644
index 00000000..a0810232
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/open-in-editor.ts
@@ -0,0 +1,36 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import { launchEditor } from 'devframe/utils/launch-editor'
+import * as v from 'valibot'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+/**
+ * Reuses devframe's `launchEditor` utility (the same one backing the core
+ * `devframe:open-in-editor` recipe) but resolves the path against the
+ * managed directory first, so the client only ever sends a root-relative
+ * path — never the server's absolute filesystem layout.
+ */
+export const openInEditor = defineAssetsRpc({
+  name: 'devframes:plugin:assets:open-in-editor',
+  type: 'action',
+  jsonSerializable: true,
+  args: [v.string()],
+  returns: v.void(),
+  agent: {
+    title: 'Open an asset in the editor',
+    description: 'Open an asset in the user\'s configured editor.',
+    safety: 'action',
+    tags: ['assets'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async (path: string): Promise<void> => {
+        launchEditor(assets.resolvePath(path))
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/read-image-meta.ts b/plugins/assets/src/rpc/functions/read-image-meta.ts
new file mode 100644
index 00000000..26b5e643
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/read-image-meta.ts
@@ -0,0 +1,43 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import type { AssetImageMeta } from '../../types'
+import fsp from 'node:fs/promises'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import { imageMeta } from 'image-meta'
+import * as v from 'valibot'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+export const readImageMeta = defineAssetsRpc({
+  name: 'devframes:plugin:assets:read-image-meta',
+  type: 'query',
+  jsonSerializable: true,
+  args: [v.string()],
+  returns: v.nullable(v.object({
+    width: v.optional(v.number()),
+    height: v.optional(v.number()),
+    orientation: v.optional(v.number()),
+  })),
+  agent: {
+    title: 'Read image dimensions',
+    description: 'Read width, height, and orientation for an image asset.',
+    safety: 'read',
+    tags: ['assets', 'images'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async (path: string): Promise<AssetImageMeta | null> => {
+        try {
+          const buffer = await fsp.readFile(assets.resolvePath(path))
+          const meta = imageMeta(buffer)
+          return { width: meta.width, height: meta.height, orientation: meta.orientation }
+        }
+        catch {
+          return null
+        }
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/read-text.ts b/plugins/assets/src/rpc/functions/read-text.ts
new file mode 100644
index 00000000..e1b9da04
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/read-text.ts
@@ -0,0 +1,38 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import fsp from 'node:fs/promises'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import * as v from 'valibot'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+const DEFAULT_LIMIT = 5000
+
+export const readText = defineAssetsRpc({
+  name: 'devframes:plugin:assets:read-text',
+  type: 'query',
+  jsonSerializable: true,
+  args: [v.string(), v.optional(v.number())],
+  returns: v.nullable(v.string()),
+  agent: {
+    title: 'Read a text asset',
+    description: 'Read the (possibly truncated) text content of a text-type asset, for preview or editing.',
+    safety: 'read',
+    tags: ['assets', 'text'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async (path: string, limit: number = DEFAULT_LIMIT): Promise<string | null> => {
+        try {
+          const content = await fsp.readFile(assets.resolvePath(path), 'utf-8')
+          return content.slice(0, limit)
+        }
+        catch {
+          return null
+        }
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/rename.ts b/plugins/assets/src/rpc/functions/rename.ts
new file mode 100644
index 00000000..2f555d50
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/rename.ts
@@ -0,0 +1,77 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import type { AssetInfo } from '../../types'
+import fsp from 'node:fs/promises'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import { dirname, extname } from 'pathe'
+import * as v from 'valibot'
+import { diagnostics } from '../../diagnostics'
+import { getAssetsContext } from '../../node/context'
+import { statToAssetInfo } from '../../node/scanner'
+import { assetInfoSchema } from './list'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+export interface RenameArgs {
+  /** Root-relative path of the asset to rename. */
+  path: string
+  /**
+   * New base name, without an extension — the original extension is
+   * always preserved (mirrors Nuxt DevTools' rename dialog exactly). Any
+   * extension included here is treated as part of the base name, not
+   * stripped.
+   */
+  newName: string
+}
+
+export const rename = defineAssetsRpc({
+  name: 'devframes:plugin:assets:rename',
+  type: 'action',
+  jsonSerializable: true,
+  args: [v.object({ path: v.string(), newName: v.string() })],
+  returns: assetInfoSchema,
+  agent: {
+    title: 'Rename an asset',
+    description: 'Rename an asset, keeping it in the same folder.',
+    safety: 'destructive',
+    tags: ['assets'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async ({ path, newName }: RenameArgs): Promise<AssetInfo> => {
+        const trimmed = newName.trim()
+        if (!trimmed || /[/\\]/.test(trimmed))
+          throw diagnostics.DP_ASSETS_0006({ name: newName })
+
+        const folder = dirname(path)
+        const nextName = `${trimmed}${extname(path)}`
+        const nextRelPath = folder === '.' ? nextName : `${folder}/${nextName}`
+        const from = assets.resolvePath(path)
+        const to = assets.resolvePath(nextRelPath)
+
+        if (from === to) {
+          const stat = await fsp.lstat(from)
+          return statToAssetInfo(assets.dir, assets.baseURL, path, stat)
+        }
+
+        const targetExists = await fsp.access(to).then(() => true).catch(() => false)
+        if (targetExists)
+          throw diagnostics.DP_ASSETS_0003({ path: nextRelPath })
+
+        await fsp.mkdir(dirname(to), { recursive: true })
+        try {
+          await fsp.rename(from, to)
+        }
+        catch (error) {
+          if ((error as NodeJS.ErrnoException).code === 'ENOENT')
+            throw diagnostics.DP_ASSETS_0004({ path })
+          throw error
+        }
+
+        const stat = await fsp.lstat(to)
+        return statToAssetInfo(assets.dir, assets.baseURL, nextRelPath, stat)
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/reveal-in-folder.ts b/plugins/assets/src/rpc/functions/reveal-in-folder.ts
new file mode 100644
index 00000000..0c2b3d8a
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/reveal-in-folder.ts
@@ -0,0 +1,37 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import { open } from 'devframe/utils/open'
+import { dirname } from 'pathe'
+import * as v from 'valibot'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+/**
+ * Reuses devframe's `open` utility (the same one backing the core
+ * `devframe:open-in-finder` recipe), opening the asset's containing folder
+ * so it's revealed in the OS file manager rather than launched with its
+ * default app (which `download` already covers).
+ */
+export const revealInFolder = defineAssetsRpc({
+  name: 'devframes:plugin:assets:reveal-in-folder',
+  type: 'action',
+  jsonSerializable: true,
+  args: [v.string()],
+  returns: v.void(),
+  agent: {
+    title: 'Reveal an asset in the file manager',
+    description: 'Open the OS file manager at the asset\'s containing folder.',
+    safety: 'action',
+    tags: ['assets'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async (path: string): Promise<void> => {
+        await open(dirname(assets.resolvePath(path)))
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/functions/upload.ts b/plugins/assets/src/rpc/functions/upload.ts
new file mode 100644
index 00000000..e86aa1b3
--- /dev/null
+++ b/plugins/assets/src/rpc/functions/upload.ts
@@ -0,0 +1,80 @@
+import type { DevframeNodeContext } from 'devframe/types'
+import { createWriteStream } from 'node:fs'
+import fsp from 'node:fs/promises'
+import { createDefineWrapperWithContext } from 'devframe/rpc'
+import { dirname, extname } from 'pathe'
+import * as v from 'valibot'
+import { diagnostics } from '../../diagnostics'
+import { getAssetsContext } from '../../node/context'
+
+const defineAssetsRpc = createDefineWrapperWithContext<DevframeNodeContext>()
+
+/** Streaming channel name, namespaced like every other RPC name in this plugin. */
+export const UPLOAD_CHANNEL = 'devframes:plugin:assets:upload'
+
+function isExtensionAllowed(path: string, allowed: readonly string[] | '*'): boolean {
+  if (allowed === '*')
+    return true
+  const ext = extname(path).slice(1).toLowerCase()
+  return allowed.includes(ext)
+}
+
+/**
+ * Allocates an upload and returns a streaming id. Actual bytes flow over
+ * the `upload` channel opened in `setupAssets` — see the client-side
+ * `useUpload` hook for the matching `rpc.streaming.upload()` call.
+ */
+export const upload = defineAssetsRpc({
+  name: 'devframes:plugin:assets:upload',
+  type: 'action',
+  jsonSerializable: true,
+  args: [v.object({ path: v.string() })],
+  returns: v.object({ uploadId: v.string() }),
+  agent: {
+    title: 'Upload an asset',
+    description: 'Allocate an upload slot for a new file at the given path. The caller streams the bytes over the paired upload channel.',
+    safety: 'action',
+    tags: ['assets'],
+  },
+  setup: (ctx) => {
+    const assets = getAssetsContext(ctx)
+    return {
+      // See `list.ts` for why the async handler is cast.
+      handler: (async ({ path }: { path: string }): Promise<{ uploadId: string }> => {
+        if (!isExtensionAllowed(path, assets.uploadExtensions)) {
+          throw diagnostics.DP_ASSETS_0002({
+            path,
+            extension: extname(path).slice(1).toLowerCase() || '(none)',
+            allowed: assets.uploadExtensions === '*' ? [] : assets.uploadExtensions,
+          })
+        }
+
+        const absolute = assets.resolvePath(path)
+        await fsp.mkdir(dirname(absolute), { recursive: true })
+
+        const channel = assets.uploadChannel
+        if (!channel)
+          throw diagnostics.DP_ASSETS_0007()
+
+        const reader = channel.openInbound()
+        void (async () => {
+          const file = createWriteStream(absolute)
+          try {
+            for await (const chunk of reader)
+              file.write(chunk)
+          }
+          catch {
+            // Client disconnected or cancelled mid-upload — drop the
+            // partial file rather than leave a corrupt asset behind.
+            file.close()
+            await fsp.unlink(absolute).catch(() => {})
+            return
+          }
+          file.close()
+        })()
+
+        return { uploadId: reader.id }
+      }) as any,
+    }
+  },
+})
diff --git a/plugins/assets/src/rpc/index.ts b/plugins/assets/src/rpc/index.ts
new file mode 100644
index 00000000..2caeecac
--- /dev/null
+++ b/plugins/assets/src/rpc/index.ts
@@ -0,0 +1,42 @@
+import type { RpcDefinitionsToFunctions } from 'devframe/rpc'
+import { capabilities } from './functions/capabilities'
+import { deleteAssets } from './functions/delete'
+import { list } from './functions/list'
+import { mkdir } from './functions/mkdir'
+import { openInEditor } from './functions/open-in-editor'
+import { readImageMeta } from './functions/read-image-meta'
+import { readText } from './functions/read-text'
+import { rename } from './functions/rename'
+import { revealInFolder } from './functions/reveal-in-folder'
+import { upload } from './functions/upload'
+
+/** Read-only RPC — always registered. */
+export const readFunctions = [list, readImageMeta, readText, capabilities] as const
+
+/**
+ * Informational actions — launch external apps, never touch the managed
+ * directory's contents. Always registered regardless of `write`.
+ */
+export const alwaysFunctions = [openInEditor, revealInFolder] as const
+
+/** Mutating RPC — registered only when write actions are enabled. */
+export const writeFunctions = [upload, rename, deleteAssets, mkdir] as const
+
+export const serverFunctions = [...readFunctions, ...alwaysFunctions, ...writeFunctions] as const
+
+declare module 'devframe' {
+  interface DevframeRpcServerFunctions extends RpcDefinitionsToFunctions<typeof serverFunctions> {}
+}
+
+export type { AssetsCapabilities } from './functions/capabilities'
+export { capabilities } from './functions/capabilities'
+export { deleteAssets } from './functions/delete'
+export { assetInfoSchema, list } from './functions/list'
+export { mkdir } from './functions/mkdir'
+export { openInEditor } from './functions/open-in-editor'
+export { readImageMeta } from './functions/read-image-meta'
+export { readText } from './functions/read-text'
+export type { RenameArgs } from './functions/rename'
+export { rename } from './functions/rename'
+export { revealInFolder } from './functions/reveal-in-folder'
+export { upload, UPLOAD_CHANNEL } from './functions/upload'
diff --git a/plugins/assets/src/spa/app/App.vue b/plugins/assets/src/spa/app/App.vue
new file mode 100644
index 00000000..bc585fe4
--- /dev/null
+++ b/plugins/assets/src/spa/app/App.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import type { AssetInfo, AssetType } from '../../types'
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
+import FormTextInput from '@antfu/design/components/Form/FormTextInput.vue'
+import OverlayModal from '@antfu/design/components/Overlay/OverlayModal.vue'
+import { computed, onMounted, ref } from 'vue'
+import AssetDetails from './components/AssetDetails.vue'
+import AssetGrid from './components/AssetGrid.vue'
+import AssetTree from './components/AssetTree.vue'
+import Toolbar from './components/Toolbar.vue'
+import TypeFilter from './components/TypeFilter.vue'
+import { useAssets } from './composables/useAssets'
+import { useFileDrop } from './composables/useFileDrop'
+import { useLocalStorage } from './composables/useLocalStorage'
+import { useUpload } from './composables/useUpload'
+import { connectionBody, connectionGlyph, connectionPanel, connectionState, connectionTitle } from './design'
+import { ASSET_TYPES } from './utils/assetType'
+
+type ViewMode = 'grid' | 'list'
+
+const MIN_PANEL_WIDTH = 320
+const MAX_PANEL_WIDTH = 900
+const DEFAULT_PANEL_WIDTH = 480
+
+const { assets, capabilities, loading, error, isStatic, status, rpc, connect, refresh } = useAssets()
+onMounted(connect)
+
+const view = useLocalStorage<ViewMode>('devframes:plugin:assets:view', 'grid')
+const panelWidth = useLocalStorage<number>('devframes:plugin:assets:panelWidth', DEFAULT_PANEL_WIDTH)
+const search = ref('')
+const typeState = ref<Partial<Record<AssetType, boolean>>>({})
+const selected = ref<AssetInfo | undefined>()
+const selectedPaths = ref<Set<string>>(new Set())
+const mkdirOpen = ref(false)
+const newFolderName = ref('')
+const bulkDeleteOpen = ref(false)
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const { uploading, errors: uploadErrors, uploadFiles } = useUpload(rpc, () => void refresh())
+
+const canWrite = computed(() => capabilities.value?.write ?? false)
+const readOnly = computed(() => !canWrite.value && !loading.value)
+
+const connState = computed(() => connectionState(status.value))
+const banner = computed(() => error.value ?? (uploadErrors.value.length ? uploadErrors.value.join(' · ') : null))
+
+// Types present in the listing, with counts, in canonical display order.
+const typeItems = computed(() => {
+  const counts = new Map<AssetType, number>()
+  for (const asset of assets.value ?? [])
+    counts.set(asset.type, (counts.get(asset.type) ?? 0) + 1)
+  return ASSET_TYPES
+    .filter(type => counts.has(type))
+    .map(type => ({ type, count: counts.get(type)!, checked: typeState.value[type] !== false }))
+})
+
+const filtered = computed(() => {
+  const list = assets.value ?? []
+  const query = search.value.trim().toLowerCase()
+  return list.filter((asset) => {
+    if (typeState.value[asset.type] === false)
+      return false
+    if (query && !asset.path.toLowerCase().includes(query))
+      return false
+    return true
+  })
+})
+
+function toggleType(type: AssetType): void {
+  typeState.value = { ...typeState.value, [type]: typeState.value[type] === false }
+}
+
+function toggleSelect(path: string): void {
+  const next = new Set(selectedPaths.value)
+  if (next.has(path))
+    next.delete(path)
+  else
+    next.add(path)
+  selectedPaths.value = next
+}
+
+function uploadSelected(files: FileList): void {
+  void uploadFiles(Array.from(files).map(file => ({ file, targetPath: file.name })))
+}
+
+const { dragging } = useFileDrop(() => canWrite.value, uploadSelected)
+
+function onFilePick(e: Event): void {
+  const input = e.target as HTMLInputElement
+  if (input.files?.length)
+    uploadSelected(input.files)
+  input.value = '' // reset so picking the same file again still fires `change`
+}
+
+async function handleBulkDelete(): Promise<void> {
+  if (!rpc.value)
+    return
+  await rpc.value.call('devframes:plugin:assets:delete', { paths: Array.from(selectedPaths.value) })
+  selectedPaths.value = new Set()
+  bulkDeleteOpen.value = false
+  await refresh()
+}
+
+async function handleMkdir(): Promise<void> {
+  if (!rpc.value || !newFolderName.value.trim())
+    return
+  await rpc.value.call('devframes:plugin:assets:mkdir', { path: newFolderName.value.trim() })
+  newFolderName.value = ''
+  mkdirOpen.value = false
+  await refresh()
+}
+
+function startResize(e: PointerEvent): void {
+  e.preventDefault()
+  const startX = e.clientX
+  const startWidth = panelWidth.value
+  document.body.style.userSelect = 'none'
+  document.body.style.cursor = 'col-resize'
+  function onMove(ev: PointerEvent): void {
+    // Panel is on the right, so dragging its left edge leftwards widens it.
+    panelWidth.value = Math.min(Math.max(startWidth + (startX - ev.clientX), MIN_PANEL_WIDTH), MAX_PANEL_WIDTH)
+  }
+  function onUp(): void {
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+    window.removeEventListener('pointermove', onMove)
+    window.removeEventListener('pointerup', onUp)
+  }
+  window.addEventListener('pointermove', onMove)
+  window.addEventListener('pointerup', onUp)
+}
+</script>
+
+<template>
+  <div v-if="connState" :class="connectionPanel('h-screen')">
+    <span :class="[connectionGlyph(connState.spin), connState.icon]" />
+    <div :class="connectionTitle()">
+      {{ connState.title }}
+    </div>
+    <div :class="connectionBody()">
+      {{ connState.body }}
+    </div>
+    <ActionButton v-if="connState.reloadable" @click="() => location.reload()">
+      Reload
+    </ActionButton>
+  </div>
+
+  <div v-else class="flex h-screen flex-col bg-base color-base">
+    <Toolbar
+      v-model:search="search"
+      v-model:view="view"
+      :total="assets?.length ?? 0"
+      :filtered="filtered.length"
+      :can-write="canWrite"
+      :is-static="isStatic"
+      :read-only="readOnly"
+      :uploading="uploading"
+      :selected-count="selectedPaths.size"
+      @upload="fileInput?.click()"
+      @new-folder="mkdirOpen = true"
+      @bulk-delete="bulkDeleteOpen = true"
+      @clear-selection="selectedPaths = new Set()"
+    />
+
+    <TypeFilter :items="typeItems" @toggle="toggleType" />
+
+    <div v-if="banner" class="shrink-0 border-b border-base bg-error/10 px-3 py-1 text-xs text-error">
+      {{ banner }}
+    </div>
+
+    <div class="flex min-h-0 flex-1">
+      <main class="min-h-0 flex-1 overflow-auto">
+        <div v-if="loading" class="flex h-full items-center justify-center op-fade text-sm">
+          Loading assets…
+        </div>
+        <div v-else-if="filtered.length === 0" class="flex h-full items-center justify-center op-fade text-sm">
+          No assets found.
+        </div>
+        <AssetGrid
+          v-else-if="view === 'grid'"
+          :assets="filtered"
+          :selectable="canWrite"
+          :selected-paths="selectedPaths"
+          @select-toggle="toggleSelect"
+          @select="selected = $event"
+        />
+        <AssetTree
+          v-else
+          :assets="filtered"
+          :selected-path="selected?.path"
+          :selectable="canWrite"
+          :selected-paths="selectedPaths"
+          @select-toggle="toggleSelect"
+          @select="selected = $event"
+        />
+      </main>
+
+      <aside
+        v-if="selected"
+        class="relative min-h-0 shrink-0 border-l border-base bg-base"
+        :style="{ width: `${panelWidth}px` }"
+      >
+        <div
+          class="absolute left-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 cursor-col-resize hover:bg-active"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize details panel"
+          @pointerdown="startResize"
+        />
+        <div class="h-full min-h-0 overflow-y-auto">
+          <AssetDetails
+            :asset="selected"
+            :rpc="rpc"
+            :can-write="canWrite"
+            @close="selected = undefined"
+            @changed="() => void refresh()"
+          />
+        </div>
+      </aside>
+    </div>
+
+    <!-- Direct file picker for the Upload button — no modal. -->
+    <input ref="fileInput" type="file" multiple class="hidden" @change="onFilePick">
+
+    <!-- Non-blocking hint while files are dragged over the frame. -->
+    <div v-if="dragging" class="pointer-events-none fixed inset-0 z-drawer-content flex items-center justify-center bg-base/80 backdrop-blur-sm">
+      <div class="flex flex-col items-center gap-2 rounded-xl border-2 border-active border-dashed px-10 py-8 text-lg color-active">
+        <span class="i-ph-cloud-arrow-up-duotone text-3xl" />
+        <span>Drop files to upload</span>
+      </div>
+    </div>
+
+    <OverlayModal v-model:open="mkdirOpen" title="New folder">
+      <FormTextInput v-model="newFolderName" placeholder="Folder name" @keydown.enter="handleMkdir" />
+      <template #footer>
+        <ActionButton @click="mkdirOpen = false">
+          Cancel
+        </ActionButton>
+        <ActionButton variant="primary" :disabled="!newFolderName.trim()" @click="handleMkdir">
+          Create
+        </ActionButton>
+      </template>
+    </OverlayModal>
+
+    <OverlayModal v-model:open="bulkDeleteOpen" title="Delete assets">
+      <p>Are you sure you want to delete {{ selectedPaths.size }} asset(s)?</p>
+      <template #footer>
+        <ActionButton @click="bulkDeleteOpen = false">
+          Cancel
+        </ActionButton>
+        <ActionButton class="text-error border-error/30!" @click="handleBulkDelete">
+          Delete
+        </ActionButton>
+      </template>
+    </OverlayModal>
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/AssetDetails.stories.ts b/plugins/assets/src/spa/app/components/AssetDetails.stories.ts
new file mode 100644
index 00000000..48980b0c
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetDetails.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { AssetInfo } from '../../../types'
+import AssetDetails from './AssetDetails.vue'
+
+const SAMPLE_SVG = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><rect width="400" height="300" fill="#3a6a45"/></svg>')}`
+
+const imageAsset: AssetInfo = { path: 'icons/logo.svg', type: 'image', publicPath: SAMPLE_SVG, size: 20_480, mtime: Date.now() - 1000 * 60 * 60 * 3 }
+const otherAsset: AssetInfo = { path: 'data/report.pdf', type: 'other', publicPath: '/data/report.pdf', size: 1_048_576, mtime: Date.now() - 1000 * 60 * 60 * 24 * 4 }
+
+const meta = {
+  title: 'Assets/AssetDetails',
+  component: AssetDetails,
+  tags: ['autodocs'],
+  // No live RPC connection in Storybook — the panel renders every static
+  // section; write actions are visible but no-op without a connected client.
+  args: { rpc: null },
+  argTypes: { onClose: { action: 'close' }, onChanged: { action: 'changed' } },
+} satisfies Meta<typeof AssetDetails>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Writable: Story = { args: { asset: imageAsset, canWrite: true } }
+export const ReadOnly: Story = { args: { asset: imageAsset, canWrite: false } }
+export const OtherType: Story = { args: { asset: otherAsset, canWrite: true } }
diff --git a/plugins/assets/src/spa/app/components/AssetDetails.vue b/plugins/assets/src/spa/app/components/AssetDetails.vue
new file mode 100644
index 00000000..37036930
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetDetails.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import type { DevframeRpcClient } from 'devframe/client'
+import type { AssetImageMeta, AssetInfo } from '../../../types'
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
+import FormTextInput from '@antfu/design/components/Form/FormTextInput.vue'
+import OverlayModal from '@antfu/design/components/Overlay/OverlayModal.vue'
+import { computed, ref, watch } from 'vue'
+import { fileNameOf, formatFileSize, formatTimeAgo } from '../utils/format'
+import { buildSnippets } from '../utils/snippets'
+import AssetPreview from './AssetPreview.vue'
+import CodeSnippets from './CodeSnippets.vue'
+
+const props = defineProps<{
+  asset: AssetInfo
+  rpc: DevframeRpcClient | null
+  canWrite: boolean
+}>()
+
+const emit = defineEmits<{ close: [], changed: [] }>()
+
+const SUPPORTS_PREVIEW = new Set(['image', 'text', 'video', 'audio', 'font'])
+
+const imageMeta = ref<AssetImageMeta | null>(null)
+const textContent = ref<string | null>(null)
+const deleteOpen = ref(false)
+const renameOpen = ref(false)
+const newName = ref('')
+const busy = ref(false)
+const errorNotice = ref<string | null>(null)
+
+watch(() => props.asset.path, (path) => {
+  imageMeta.value = null
+  textContent.value = null
+  errorNotice.value = null
+  const rpc = props.rpc
+  if (!rpc)
+    return
+  if (props.asset.type === 'image')
+    void rpc.call('devframes:plugin:assets:read-image-meta', path).then((m) => { imageMeta.value = m })
+  if (props.asset.type === 'text')
+    void rpc.call('devframes:plugin:assets:read-text', path, 5000).then((c) => { textContent.value = c })
+}, { immediate: true })
+
+function gcd(a: number, b: number): number {
+  return b ? gcd(b, a % b) : a
+}
+
+const aspectRatio = computed(() => {
+  const m = imageMeta.value
+  if (!m?.width || !m?.height)
+    return ''
+  const ratio = gcd(m.width, m.height)
+  return ratio > 3 ? `${m.width / ratio}:${m.height / ratio}` : ''
+})
+
+const snippets = computed(() => buildSnippets(props.asset, imageMeta.value))
+const supportsPreview = computed(() => SUPPORTS_PREVIEW.has(props.asset.type))
+
+async function runAction(fn: () => Promise<void>): Promise<void> {
+  if (!props.rpc)
+    return
+  errorNotice.value = null
+  busy.value = true
+  try {
+    await fn()
+  }
+  catch (cause) {
+    errorNotice.value = cause instanceof Error ? cause.message : String(cause)
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function handleDelete(): Promise<void> {
+  await runAction(async () => {
+    await props.rpc!.call('devframes:plugin:assets:delete', { paths: [props.asset.path] })
+    deleteOpen.value = false
+    emit('changed')
+    emit('close')
+  })
+}
+
+async function handleRename(): Promise<void> {
+  await runAction(async () => {
+    await props.rpc!.call('devframes:plugin:assets:rename', { path: props.asset.path, newName: newName.value })
+    renameOpen.value = false
+    emit('changed')
+    emit('close')
+  })
+}
+
+async function handleOpenInEditor(): Promise<void> {
+  await runAction(async () => {
+    await props.rpc!.call('devframes:plugin:assets:open-in-editor', props.asset.path)
+  })
+}
+
+async function handleRevealInFolder(): Promise<void> {
+  await runAction(async () => {
+    await props.rpc!.call('devframes:plugin:assets:reveal-in-folder', props.asset.path)
+  })
+}
+
+function openRenameDialog(): void {
+  newName.value = fileNameOf(props.asset.path).replace(/\.[^./]+$/, '')
+  renameOpen.value = true
+}
+
+function openInBrowser(): void {
+  window.open(props.asset.publicPath, '_blank')
+}
+</script>
+
+<template>
+  <div class="flex min-h-full w-full flex-col gap-4 p-4">
+    <div class="flex items-center justify-between gap-2">
+      <h2 class="truncate text-sm font-medium font-mono">
+        {{ asset.path }}
+      </h2>
+      <ActionIconButton icon="i-ph-x" label="Close" tooltip="Close" @click="emit('close')" />
+    </div>
+
+    <div v-if="supportsPreview" class="flex items-center justify-center">
+      <AssetPreview
+        :asset="asset"
+        detail
+        :text-content="textContent"
+        class="max-h-80 min-h-20 w-auto min-w-20 rounded border border-base"
+      />
+    </div>
+
+    <table class="w-full table-fixed">
+      <tbody>
+        <tr>
+          <td class="w-28 whitespace-nowrap pr-4 text-right text-xs op-fade">
+            Public Path
+          </td>
+          <td class="text-sm">
+            <div class="flex items-center gap-1 overflow-hidden">
+              <a :href="asset.publicPath" target="_blank" rel="noreferrer" class="flex-1 truncate text-xs color-active font-mono">{{ asset.publicPath }}</a>
+              <ActionIconButton icon="i-ph-arrow-square-out" label="Open in browser" tooltip="Open in browser" class="text-sm" @click="openInBrowser" />
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td class="w-28 whitespace-nowrap pr-4 text-right text-xs op-fade">
+            Type
+          </td>
+          <td class="text-sm capitalize">
+            {{ asset.type }}
+          </td>
+        </tr>
+        <tr v-if="imageMeta?.width">
+          <td class="w-28 whitespace-nowrap pr-4 text-right text-xs op-fade">
+            Image Size
+          </td>
+          <td class="text-sm">
+            {{ imageMeta.width }} x {{ imageMeta.height }}
+          </td>
+        </tr>
+        <tr v-if="aspectRatio">
+          <td class="w-28 whitespace-nowrap pr-4 text-right text-xs op-fade">
+            Aspect Ratio
+          </td>
+          <td class="text-sm">
+            {{ aspectRatio }}
+          </td>
+        </tr>
+        <tr>
+          <td class="w-28 whitespace-nowrap pr-4 text-right text-xs op-fade">
+            File Size
+          </td>
+          <td class="text-sm">
+            {{ formatFileSize(asset.size) }}
+          </td>
+        </tr>
+        <tr>
+          <td class="w-28 whitespace-nowrap pr-4 text-right text-xs op-fade">
+            Last Modified
+          </td>
+          <td class="text-sm">
+            {{ new Date(asset.mtime).toLocaleString() }}
+            <span class="op-fade">({{ formatTimeAgo(asset.mtime) }})</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="flex flex-wrap gap-2">
+      <ActionButton variant="primary" icon="i-ph-download-simple-duotone" @click="openInBrowser">
+        Download
+      </ActionButton>
+      <ActionButton icon="i-ph-code-duotone" :disabled="busy" @click="handleOpenInEditor">
+        Open in Editor
+      </ActionButton>
+      <ActionButton icon="i-ph-folder-open-duotone" :disabled="busy" @click="handleRevealInFolder">
+        Reveal in Folder
+      </ActionButton>
+      <ActionButton v-if="canWrite" icon="i-ph-text-aa-duotone" @click="openRenameDialog">
+        Rename
+      </ActionButton>
+      <ActionButton v-if="canWrite" class="text-error border-error/30!" icon="i-ph-trash-duotone" @click="deleteOpen = true">
+        Delete
+      </ActionButton>
+    </div>
+
+    <div v-if="errorNotice" class="text-xs text-error">
+      {{ errorNotice }}
+    </div>
+
+    <div class="flex-1" />
+
+    <CodeSnippets v-if="snippets.length" :snippets="snippets" />
+  </div>
+
+  <OverlayModal v-model:open="deleteOpen" title="Delete asset">
+    <p>
+      Are you sure you want to delete <strong class="font-mono">{{ fileNameOf(asset.path) }}</strong>?
+    </p>
+    <template #footer>
+      <ActionButton @click="deleteOpen = false">
+        Cancel
+      </ActionButton>
+      <ActionButton class="text-error border-error/30!" :disabled="busy" @click="handleDelete">
+        Delete
+      </ActionButton>
+    </template>
+  </OverlayModal>
+
+  <OverlayModal v-model:open="renameOpen" title="Rename asset">
+    <FormTextInput v-model="newName" placeholder="New name" @keydown.enter="handleRename" />
+    <template #footer>
+      <ActionButton @click="renameOpen = false">
+        Cancel
+      </ActionButton>
+      <ActionButton variant="primary" :disabled="busy || !newName.trim()" @click="handleRename">
+        Rename
+      </ActionButton>
+    </template>
+  </OverlayModal>
+</template>
diff --git a/plugins/assets/src/spa/app/components/AssetGrid.vue b/plugins/assets/src/spa/app/components/AssetGrid.vue
new file mode 100644
index 00000000..a9ec7d97
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetGrid.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { AssetInfo } from '../../../types'
+import { computed } from 'vue'
+import { groupByFolder } from '../utils/tree'
+import AssetGridItem from './AssetGridItem.vue'
+import SectionBlock from './SectionBlock.vue'
+
+const props = defineProps<{
+  assets: AssetInfo[]
+  selectable: boolean
+  selectedPaths: Set<string>
+}>()
+
+const emit = defineEmits<{
+  selectToggle: [path: string]
+  select: [asset: AssetInfo]
+}>()
+
+const groups = computed(() => groupByFolder(props.assets))
+
+const GRID_STYLE = { gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))' }
+
+function labelOf(asset: AssetInfo, folder: string): string {
+  return folder && asset.path.startsWith(folder) ? asset.path.slice(folder.length) : asset.path
+}
+</script>
+
+<template>
+  <!-- Flat grid when everything lives in one folder. -->
+  <div v-if="groups.length <= 1" class="grid gap-2 p-2" :style="GRID_STYLE">
+    <AssetGridItem
+      v-for="asset in assets"
+      :key="asset.path"
+      :asset="asset"
+      :label="asset.path"
+      :selectable="selectable"
+      :is-selected="selectedPaths.has(asset.path)"
+      @select="emit('select', asset)"
+      @select-toggle="emit('selectToggle', $event)"
+    />
+  </div>
+
+  <!-- Otherwise a collapsible section per folder. -->
+  <div v-else>
+    <SectionBlock
+      v-for="{ folder, items } in groups"
+      :key="folder || '/'"
+      :title="folder || '/'"
+      :description="`${items.length} items`"
+      :default-open="items.length <= 200"
+    >
+      <div class="grid gap-2 p-2" :style="GRID_STYLE">
+        <AssetGridItem
+          v-for="asset in items"
+          :key="asset.path"
+          :asset="asset"
+          :label="labelOf(asset, folder)"
+          :selectable="selectable"
+          :is-selected="selectedPaths.has(asset.path)"
+          @select="emit('select', asset)"
+          @select-toggle="emit('selectToggle', $event)"
+        />
+      </div>
+    </SectionBlock>
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/AssetGridItem.stories.ts b/plugins/assets/src/spa/app/components/AssetGridItem.stories.ts
new file mode 100644
index 00000000..69b1c547
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetGridItem.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { AssetInfo } from '../../../types'
+import AssetGridItem from './AssetGridItem.vue'
+
+const SAMPLE_SVG = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="#3a6a45"/></svg>')}`
+
+const asset: AssetInfo = { path: 'icons/logo.svg', type: 'image', publicPath: SAMPLE_SVG, size: 4096, mtime: Date.now() }
+
+const meta = {
+  title: 'Assets/AssetGridItem',
+  component: AssetGridItem,
+  tags: ['autodocs'],
+  argTypes: { onSelect: { action: 'select' }, onSelectToggle: { action: 'selectToggle' } },
+} satisfies Meta<typeof AssetGridItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { asset, label: 'logo.svg' } }
+export const Selectable: Story = { args: { asset, label: 'logo.svg', selectable: true } }
+export const Selected: Story = { args: { asset, label: 'logo.svg', selectable: true, isSelected: true } }
diff --git a/plugins/assets/src/spa/app/components/AssetGridItem.vue b/plugins/assets/src/spa/app/components/AssetGridItem.vue
new file mode 100644
index 00000000..5ae865ec
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetGridItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { AssetInfo } from '../../../types'
+import FormCheckbox from '@antfu/design/components/Form/FormCheckbox.vue'
+import AssetPreview from './AssetPreview.vue'
+
+defineProps<{
+  asset: AssetInfo
+  label: string
+  selectable?: boolean
+  isSelected?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: []
+  selectToggle: [path: string]
+}>()
+</script>
+
+<template>
+  <div
+    class="relative flex cursor-pointer flex-col items-center gap-1 overflow-hidden rounded p-2 hover:bg-active"
+    role="button"
+    tabindex="0"
+    @click="emit('select')"
+    @keydown.enter="emit('select')"
+  >
+    <span v-if="selectable" class="absolute left-1 top-1 z-1" @click.stop>
+      <FormCheckbox :model-value="isSelected" @update:model-value="emit('selectToggle', asset.path)" />
+    </span>
+    <AssetPreview :asset="asset" class="h-30 w-30 rounded border border-base" />
+    <div class="w-full truncate whitespace-nowrap text-center text-xs">
+      {{ label }}
+    </div>
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/AssetListItem.vue b/plugins/assets/src/spa/app/components/AssetListItem.vue
new file mode 100644
index 00000000..dfcaccec
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetListItem.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { TreeNode } from '../utils/tree'
+import FormCheckbox from '@antfu/design/components/Form/FormCheckbox.vue'
+import { computed, ref } from 'vue'
+import { TYPE_META } from '../utils/assetType'
+
+defineOptions({ name: 'AssetListItem' })
+
+const props = withDefaults(defineProps<{
+  node: TreeNode
+  depth?: number
+  selectedPath?: string
+  selectable?: boolean
+  selectedPaths?: Set<string>
+}>(), { depth: 0 })
+
+const emit = defineEmits<{
+  select: [node: TreeNode]
+  selectToggle: [path: string]
+}>()
+
+const open = ref(true)
+const icon = computed(() => (props.node.isFolder ? 'i-ph-folder-duotone' : TYPE_META[props.node.asset?.type ?? 'other'].icon))
+const isActive = computed(() => !props.node.isFolder && props.node.asset?.path === props.selectedPath)
+
+function onActivate(): void {
+  if (props.node.isFolder)
+    open.value = !open.value
+  else
+    emit('select', props.node)
+}
+</script>
+
+<template>
+  <div>
+    <div
+      class="flex w-full items-center gap-2 border-b border-base px-4 py-1 text-sm hover:bg-active"
+      :class="isActive ? 'bg-active' : 'cursor-pointer'"
+      :style="{ paddingLeft: `${1 + depth * 1.25}rem` }"
+      role="button"
+      tabindex="0"
+      @click="onActivate"
+      @keydown.enter="onActivate"
+    >
+      <span v-if="selectable && !node.isFolder" @click.stop>
+        <FormCheckbox :model-value="selectedPaths?.has(node.path)" @update:model-value="emit('selectToggle', node.path)" />
+      </span>
+      <span :class="icon" />
+      <span class="flex-1 truncate text-left font-mono">{{ node.name }}</span>
+      <span v-if="node.isFolder" class="i-ph-caret-right transition" :class="open ? 'rotate-90' : ''" />
+    </div>
+    <template v-if="node.isFolder && open">
+      <AssetListItem
+        v-for="child in node.children"
+        :key="child.path"
+        :node="child"
+        :depth="depth + 1"
+        :selected-path="selectedPath"
+        :selectable="selectable"
+        :selected-paths="selectedPaths"
+        @select="emit('select', $event)"
+        @select-toggle="emit('selectToggle', $event)"
+      />
+    </template>
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/AssetPreview.stories.ts b/plugins/assets/src/spa/app/components/AssetPreview.stories.ts
new file mode 100644
index 00000000..070b64e3
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetPreview.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { AssetInfo } from '../../../types'
+import AssetPreview from './AssetPreview.vue'
+
+const SAMPLE_SVG = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120"><rect width="200" height="120" fill="#3a6a45"/><text x="100" y="65" fill="white" font-size="16" text-anchor="middle">logo.svg</text></svg>')}`
+
+function asset(overrides: Partial<AssetInfo>): AssetInfo {
+  return { path: 'logo.svg', type: 'image', publicPath: SAMPLE_SVG, size: 2048, mtime: Date.now(), ...overrides }
+}
+
+const meta = {
+  title: 'Assets/AssetPreview',
+  component: AssetPreview,
+  tags: ['autodocs'],
+} satisfies Meta<typeof AssetPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const box = 'h-40 w-40 rounded border border-base'
+
+export const Image: Story = { args: { asset: asset({}), class: box } }
+export const Text: Story = {
+  args: {
+    asset: asset({ path: 'README.txt', type: 'text', publicPath: '/README.txt' }),
+    textContent: 'This is a preview of a text asset,\ntruncated to a few hundred characters.',
+    class: 'h-40 w-full rounded border border-base',
+  },
+}
+export const TextNoContent: Story = { args: { asset: asset({ path: 'README.txt', type: 'text', publicPath: '/README.txt' }), class: box } }
+export const Video: Story = { args: { asset: asset({ path: 'clip.mp4', type: 'video', publicPath: '' }), class: box } }
+export const Audio: Story = { args: { asset: asset({ path: 'sound.mp3', type: 'audio', publicPath: '' }), class: box } }
+export const Other: Story = { args: { asset: asset({ path: 'archive.zip', type: 'other', publicPath: '' }), class: box } }
diff --git a/plugins/assets/src/spa/app/components/AssetPreview.vue b/plugins/assets/src/spa/app/components/AssetPreview.vue
new file mode 100644
index 00000000..be410508
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetPreview.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { AssetInfo } from '../../../types'
+import FontPreview from './FontPreview.vue'
+
+defineProps<{
+  asset: AssetInfo
+  textContent?: string | null
+  /** Larger, interactive preview (autoplay/controls) for the details panel. */
+  detail?: boolean
+}>()
+
+const BASE = 'flex items-center justify-center overflow-hidden bg-active p-1'
+</script>
+
+<template>
+  <div v-if="asset.type === 'image'" :class="BASE">
+    <img :src="asset.publicPath" :alt="asset.path" class="max-h-full max-w-full select-none object-contain" :draggable="false">
+  </div>
+
+  <div v-else-if="asset.type === 'font'" :class="BASE">
+    <FontPreview :asset="asset" class="self-stretch p-2 text-2xl" />
+  </div>
+
+  <div v-else-if="asset.type === 'text' && textContent" class="w-full items-start p-4" :class="BASE">
+    <pre class="max-h-40 w-full overflow-hidden text-xs font-mono">{{ textContent }}</pre>
+  </div>
+  <div v-else-if="asset.type === 'text'" :class="BASE">
+    <span class="i-ph-file-text-duotone text-3xl op-mute" />
+  </div>
+
+  <div v-else-if="asset.type === 'video'" :class="BASE">
+    <video :src="asset.publicPath" :autoplay="detail" :controls="detail" class="max-h-full max-w-full" />
+  </div>
+
+  <div v-else-if="asset.type === 'audio'" :class="BASE">
+    <audio v-if="detail" :src="asset.publicPath" controls />
+    <span v-else class="i-ph-speaker-high-duotone text-3xl op-mute" />
+  </div>
+
+  <div v-else :class="BASE">
+    <span class="i-ph-file-duotone text-3xl op-mute" />
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/AssetTree.vue b/plugins/assets/src/spa/app/components/AssetTree.vue
new file mode 100644
index 00000000..c0e1237c
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/AssetTree.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { AssetInfo } from '../../../types'
+import type { TreeNode } from '../utils/tree'
+import { computed } from 'vue'
+import { buildTree } from '../utils/tree'
+import AssetListItem from './AssetListItem.vue'
+
+const props = defineProps<{
+  assets: AssetInfo[]
+  selectedPath?: string
+  selectable: boolean
+  selectedPaths: Set<string>
+}>()
+
+const emit = defineEmits<{
+  selectToggle: [path: string]
+  select: [asset: AssetInfo]
+}>()
+
+const nodes = computed(() => buildTree(props.assets))
+
+function onSelect(node: TreeNode): void {
+  if (node.asset)
+    emit('select', node.asset)
+}
+</script>
+
+<template>
+  <div>
+    <AssetListItem
+      v-for="node in nodes"
+      :key="node.path"
+      :node="node"
+      :selected-path="selectedPath"
+      :selectable="selectable"
+      :selected-paths="selectedPaths"
+      @select="onSelect"
+      @select-toggle="emit('selectToggle', $event)"
+    />
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/CodeSnippets.stories.ts b/plugins/assets/src/spa/app/components/CodeSnippets.stories.ts
new file mode 100644
index 00000000..19239449
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/CodeSnippets.stories.ts
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import CodeSnippets from './CodeSnippets.vue'
+
+const meta = {
+  title: 'Assets/CodeSnippets',
+  component: CodeSnippets,
+  tags: ['autodocs'],
+} satisfies Meta<typeof CodeSnippets>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ImageAsset: Story = {
+  args: {
+    snippets: [
+      { name: 'Image tag', lang: 'html', code: '<img src="/logo.svg" width="200" height="200" />' },
+      { name: 'CSS background', lang: 'css', code: '.element {\n  background-image: url(\'/logo.svg\');\n}' },
+      { name: 'Download link', lang: 'html', code: '<a href="/logo.svg" download>\n  Download logo.svg\n</a>' },
+    ],
+  },
+}
+
+export const FontAsset: Story = {
+  args: {
+    snippets: [
+      { name: '@font-face', lang: 'css', code: '@font-face {\n  font-family: \'brand\';\n  src: url(\'/brand.woff2\');\n}' },
+      { name: 'Download link', lang: 'html', code: '<a href="/brand.woff2" download>\n  Download brand.woff2\n</a>' },
+    ],
+  },
+}
diff --git a/plugins/assets/src/spa/app/components/CodeSnippets.vue b/plugins/assets/src/spa/app/components/CodeSnippets.vue
new file mode 100644
index 00000000..b65fa86a
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/CodeSnippets.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { CodeSnippet } from '../../../types'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{ snippets: CodeSnippet[] }>()
+
+const active = ref(0)
+const copied = ref(false)
+const current = computed(() => props.snippets[Math.min(active.value, props.snippets.length - 1)])
+
+async function copy(): Promise<void> {
+  await navigator.clipboard.writeText(current.value.code)
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 1500)
+}
+</script>
+
+<template>
+  <div class="-mx-4 -mb-4 border-t border-base px-4 pb-4 pt-3">
+    <div class="mb-2 flex items-center gap-1 overflow-x-auto">
+      <button
+        v-for="(s, i) in snippets"
+        :key="s.name"
+        type="button"
+        class="shrink-0 rounded px-2 py-1 text-xs"
+        :class="i === active ? 'bg-active color-base' : 'op-fade hover:bg-active'"
+        @click="active = i"
+      >
+        {{ s.name }}
+      </button>
+      <span class="flex-1" />
+      <button type="button" class="shrink-0 rounded p-1 op-fade hover:bg-active hover:op-100" title="Copy" @click="copy">
+        <span :class="copied ? 'i-ph-check' : 'i-ph-copy'" />
+      </button>
+    </div>
+    <pre class="overflow-x-auto rounded-lg bg-secondary p-3 text-xs font-mono"><code>{{ current.code }}</code></pre>
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/FontPreview.vue b/plugins/assets/src/spa/app/components/FontPreview.vue
new file mode 100644
index 00000000..352922ff
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/FontPreview.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { AssetInfo } from '../../../types'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
+
+const props = defineProps<{ asset: AssetInfo }>()
+
+// A scoped, unique family so multiple font previews don't clash.
+const family = `devframe-assets-${Math.random().toString(36).slice(2)}`
+let styleEl: HTMLStyleElement | null = null
+
+function apply(url: string): void {
+  if (!styleEl) {
+    styleEl = document.createElement('style')
+    document.head.append(styleEl)
+  }
+  styleEl.textContent = `@font-face { font-family: '${family}'; src: url('${url}'); }`
+}
+
+onMounted(() => apply(props.asset.publicPath))
+watch(() => props.asset.publicPath, url => apply(url))
+onBeforeUnmount(() => styleEl?.remove())
+</script>
+
+<template>
+  <div class="overflow-hidden" :style="{ fontFamily: `'${family}'` }">
+    Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/SectionBlock.vue b/plugins/assets/src/spa/app/components/SectionBlock.vue
new file mode 100644
index 00000000..2e2eb99f
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/SectionBlock.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  title: string
+  description?: string
+  defaultOpen?: boolean
+}>(), { defaultOpen: true })
+
+const open = ref(props.defaultOpen)
+</script>
+
+<template>
+  <!-- Collapsible folder-group header, mirroring Nuxt DevTools' NSectionBlock. -->
+  <div class="border-b border-base last:border-b-0">
+    <button
+      type="button"
+      class="flex w-full items-center gap-2 px-4 py-2 text-left hover:bg-active"
+      @click="open = !open"
+    >
+      <span class="i-ph-caret-right transition" :class="open ? 'rotate-90' : ''" />
+      <span class="text-sm font-mono">{{ title }}</span>
+      <span v-if="description" class="op-fade text-xs">{{ description }}</span>
+    </button>
+    <div v-if="open" class="px-2 pb-2">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/components/Toolbar.stories.ts b/plugins/assets/src/spa/app/components/Toolbar.stories.ts
new file mode 100644
index 00000000..7fa59c97
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/Toolbar.stories.ts
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import Toolbar from './Toolbar.vue'
+
+const meta = {
+  title: 'Assets/Toolbar',
+  component: Toolbar,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Toolbar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function harness(props: Record<string, unknown>) {
+  return () => ({
+    components: { Toolbar },
+    setup() {
+      const search = ref('')
+      const view = ref<'grid' | 'list'>('grid')
+      return { search, view, props }
+    },
+    template: `<Toolbar v-model:search="search" v-model:view="view" v-bind="props" />`,
+  })
+}
+
+const base = { total: 42, filtered: 42, canWrite: true, isStatic: false, readOnly: false, uploading: false, selectedCount: 0 }
+
+export const Default: Story = { render: harness(base) }
+export const ReadOnly: Story = { render: harness({ ...base, canWrite: false, readOnly: true }) }
+export const Uploading: Story = { render: harness({ ...base, uploading: true }) }
+export const SelectionMode: Story = { render: harness({ ...base, selectedCount: 5 }) }
diff --git a/plugins/assets/src/spa/app/components/Toolbar.vue b/plugins/assets/src/spa/app/components/Toolbar.vue
new file mode 100644
index 00000000..23b59fd6
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/Toolbar.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import FormTextInput from '@antfu/design/components/Form/FormTextInput.vue'
+import LayoutTabs from '@antfu/design/components/Layout/LayoutTabs.vue'
+import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
+
+defineProps<{
+  total: number
+  filtered: number
+  canWrite: boolean
+  isStatic: boolean
+  readOnly: boolean
+  uploading: boolean
+  selectedCount: number
+}>()
+
+const emit = defineEmits<{
+  upload: []
+  newFolder: []
+  bulkDelete: []
+  clearSelection: []
+}>()
+
+const search = defineModel<string>('search', { default: '' })
+const view = defineModel<'grid' | 'list'>('view', { default: 'grid' })
+
+const viewTabs = [
+  { value: 'grid', icon: 'i-ph-grid-four-duotone', label: 'Grid' },
+  { value: 'list', icon: 'i-ph-list-duotone', label: 'List' },
+]
+</script>
+
+<template>
+  <LayoutToolbar :glass="false" class="h-nav">
+    <span class="flex shrink-0 select-none items-center gap-1.5 text-sm font-semibold">
+      <span class="i-ph-image-square-duotone text-base color-active" />
+      <span>Assets</span>
+    </span>
+    <DisplayBadge v-if="isStatic" text="static" class="text-xs" />
+    <DisplayBadge v-if="readOnly" text="read-only" class="text-xs" />
+    <DisplayBadge v-if="uploading" text="uploading…" class="text-xs" />
+
+    <template #search>
+      <FormTextInput
+        v-model="search"
+        icon="i-ph-magnifying-glass"
+        placeholder="Search assets…"
+        size="sm"
+        clearable
+        class="max-w-80 w-full"
+      />
+    </template>
+
+    <template #end>
+      <template v-if="selectedCount > 0">
+        <span class="whitespace-nowrap text-sm font-medium">{{ selectedCount }} selected</span>
+        <ActionButton size="sm" class="h-7! py-0! text-error border-error/30!" icon="i-ph-trash-duotone" @click="emit('bulkDelete')">
+          Delete
+        </ActionButton>
+        <ActionButton variant="text" @click="emit('clearSelection')">
+          Cancel
+        </ActionButton>
+      </template>
+      <template v-else>
+        <span class="whitespace-nowrap op-fade text-xs">
+          <template v-if="search">{{ filtered }} matched · </template>{{ total }} assets
+        </span>
+        <ActionIconButton
+          v-if="canWrite"
+          icon="i-ph-folder-plus-duotone"
+          label="New folder"
+          tooltip="New folder"
+          @click="emit('newFolder')"
+        />
+        <ActionIconButton
+          v-if="canWrite"
+          icon="i-ph-cloud-arrow-up-duotone"
+          label="Upload"
+          tooltip="Upload"
+          @click="emit('upload')"
+        />
+        <LayoutTabs v-model="view" :tabs="viewTabs" variant="segment" />
+      </template>
+    </template>
+  </LayoutToolbar>
+</template>
diff --git a/plugins/assets/src/spa/app/components/TypeFilter.stories.ts b/plugins/assets/src/spa/app/components/TypeFilter.stories.ts
new file mode 100644
index 00000000..7cf1e74a
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/TypeFilter.stories.ts
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TypeFilter from './TypeFilter.vue'
+
+const meta = {
+  title: 'Assets/TypeFilter',
+  component: TypeFilter,
+  tags: ['autodocs'],
+  argTypes: { onToggle: { action: 'toggle' } },
+} satisfies Meta<typeof TypeFilter>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { type: 'image', count: 12, checked: true },
+      { type: 'video', count: 2, checked: true },
+      { type: 'font', count: 3, checked: true },
+      { type: 'text', count: 8, checked: true },
+      { type: 'other', count: 1, checked: true },
+    ],
+  },
+}
+
+export const SomeDeselected: Story = {
+  args: {
+    items: [
+      { type: 'image', count: 12, checked: true },
+      { type: 'video', count: 2, checked: false },
+      { type: 'font', count: 3, checked: false },
+      { type: 'text', count: 8, checked: true },
+      { type: 'other', count: 1, checked: true },
+    ],
+  },
+}
diff --git a/plugins/assets/src/spa/app/components/TypeFilter.vue b/plugins/assets/src/spa/app/components/TypeFilter.vue
new file mode 100644
index 00000000..19c151be
--- /dev/null
+++ b/plugins/assets/src/spa/app/components/TypeFilter.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { AssetType } from '../../../types'
+import { TYPE_META } from '../utils/assetType'
+
+export interface TypeFilterItem {
+  type: AssetType
+  count: number
+  checked: boolean
+}
+
+defineProps<{ items: TypeFilterItem[] }>()
+const emit = defineEmits<{ toggle: [type: AssetType] }>()
+</script>
+
+<template>
+  <!--
+    Inline row of type-filter chips — one per asset type present. Modeled on
+    vitejs/devtools' DataSearchPanel: a selected chip reads normally, an
+    unselected one is greyed out. Always visible (no dropdown).
+  -->
+  <div v-if="items.length > 1" class="flex shrink-0 flex-wrap items-center gap-2 border-b border-base bg-secondary px-3 py-1.5">
+    <button
+      v-for="{ type, count, checked } in items"
+      :key="type"
+      type="button"
+      :title="`${TYPE_META[type].label} (${count})`"
+      :aria-pressed="checked"
+      class="flex select-none items-center gap-1.5 rounded-md border border-base px-2 py-1 text-xs transition"
+      :class="checked ? 'bg-active' : 'op50 grayscale hover:op-100'"
+      @click="emit('toggle', type)"
+    >
+      <span :class="TYPE_META[type].icon" />
+      <span>{{ TYPE_META[type].label }}</span>
+      <span class="op-fade">{{ count }}</span>
+    </button>
+  </div>
+</template>
diff --git a/plugins/assets/src/spa/app/composables/useAssets.ts b/plugins/assets/src/spa/app/composables/useAssets.ts
new file mode 100644
index 00000000..38cdc903
--- /dev/null
+++ b/plugins/assets/src/spa/app/composables/useAssets.ts
@@ -0,0 +1,97 @@
+import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
+import type { Ref } from 'vue'
+import type { AssetsCapabilities } from '../../../rpc/functions/capabilities'
+import type { AssetInfo } from '../../../types'
+import { shallowRef } from 'vue'
+import { connectAssets } from '../../../client'
+
+const CHANGED_EVENT = 'devframes:plugin:assets:changed'
+
+export interface UseAssetsResult {
+  rpc: Ref<DevframeRpcClient | null>
+  assets: Ref<AssetInfo[] | null>
+  capabilities: Ref<AssetsCapabilities | null>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+  isStatic: Ref<boolean>
+  status: Ref<DevframeConnectionStatus>
+  /** Establish the connection + wire live-refresh. Call once from `onMounted`. */
+  connect: () => Promise<void>
+  refresh: () => Promise<void>
+}
+
+/**
+ * Connects to the assets devframe, fetches the listing + write
+ * capabilities, and keeps both live: `devframes:plugin:assets:changed`
+ * broadcasts (from the server's file watcher) trigger a refetch.
+ */
+export function useAssets(): UseAssetsResult {
+  const rpc = shallowRef<DevframeRpcClient | null>(null)
+  const assets = shallowRef<AssetInfo[] | null>(null)
+  const capabilities = shallowRef<AssetsCapabilities | null>(null)
+  const loading = shallowRef(true)
+  const error = shallowRef<string | null>(null)
+  const isStatic = shallowRef(false)
+  const status = shallowRef<DevframeConnectionStatus>('connecting')
+
+  async function refresh(): Promise<void> {
+    const client = rpc.value
+    if (!client)
+      return
+    try {
+      const [list, caps] = await Promise.all([
+        client.call('devframes:plugin:assets:list'),
+        client.call('devframes:plugin:assets:capabilities'),
+      ])
+      assets.value = list
+      capabilities.value = caps
+      error.value = null
+    }
+    catch (cause) {
+      error.value = cause instanceof Error ? cause.message : String(cause)
+    }
+    finally {
+      loading.value = false
+    }
+  }
+
+  async function connect(): Promise<void> {
+    const client = await connectAssets()
+    rpc.value = client
+    isStatic.value = client.connectionMeta.backend === 'static'
+    status.value = client.status
+    client.events.on('connection:status', () => {
+      status.value = client.status
+    })
+    await client.ensureTrusted()
+
+    // Another consumer sharing this rpc client may have registered the
+    // handler already — chain onto it instead of replacing it, mirroring
+    // the messages plugin's client-side event wiring.
+    const existing = client.client.definitions.get(CHANGED_EVENT)
+    if (existing) {
+      const prev = existing.handler
+      existing.handler = (...args: unknown[]) => {
+        void refresh()
+        return prev?.(...args)
+      }
+    }
+    else {
+      client.client.register({
+        name: CHANGED_EVENT,
+        type: 'action',
+        handler: () => {
+          void refresh()
+        },
+      })
+    }
+
+    await refresh()
+    client.events.on('rpc:is-trusted:updated', (trusted) => {
+      if (trusted)
+        void refresh()
+    })
+  }
+
+  return { rpc, assets, capabilities, loading, error, isStatic, status, connect, refresh }
+}
diff --git a/plugins/assets/src/spa/app/composables/useFileDrop.ts b/plugins/assets/src/spa/app/composables/useFileDrop.ts
new file mode 100644
index 00000000..7efb9db9
--- /dev/null
+++ b/plugins/assets/src/spa/app/composables/useFileDrop.ts
@@ -0,0 +1,62 @@
+import type { Ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+/** A drag carries files (not a text selection or an in-page element drag). */
+function dragHasFiles(e: DragEvent): boolean {
+  return Array.from(e.dataTransfer?.types ?? []).includes('Files')
+}
+
+/**
+ * Whole-frame file drag-and-drop. While `isEnabled()` returns true, dragging
+ * files anywhere over the window flips `dragging` (for a hint overlay) and
+ * dropping them hands the `FileList` to `onDrop` — no modal, no confirm step.
+ */
+export function useFileDrop(isEnabled: () => boolean, onDrop: (files: FileList) => void): { dragging: Ref<boolean> } {
+  const dragging = ref(false)
+  // `dragenter`/`dragleave` fire per child element as the cursor moves; a
+  // depth counter keeps the hint from flickering.
+  let depth = 0
+
+  function onDragEnter(e: DragEvent): void {
+    if (!isEnabled() || !dragHasFiles(e))
+      return
+    e.preventDefault()
+    depth++
+    dragging.value = true
+  }
+  function onDragOver(e: DragEvent): void {
+    if (isEnabled() && dragHasFiles(e))
+      e.preventDefault()
+  }
+  function onDragLeave(e: DragEvent): void {
+    if (!isEnabled() || !dragHasFiles(e))
+      return
+    depth = Math.max(0, depth - 1)
+    if (depth === 0)
+      dragging.value = false
+  }
+  function onDropEvent(e: DragEvent): void {
+    if (!isEnabled() || !dragHasFiles(e))
+      return
+    e.preventDefault()
+    depth = 0
+    dragging.value = false
+    if (e.dataTransfer?.files?.length)
+      onDrop(e.dataTransfer.files)
+  }
+
+  onMounted(() => {
+    window.addEventListener('dragenter', onDragEnter)
+    window.addEventListener('dragover', onDragOver)
+    window.addEventListener('dragleave', onDragLeave)
+    window.addEventListener('drop', onDropEvent)
+  })
+  onBeforeUnmount(() => {
+    window.removeEventListener('dragenter', onDragEnter)
+    window.removeEventListener('dragover', onDragOver)
+    window.removeEventListener('dragleave', onDragLeave)
+    window.removeEventListener('drop', onDropEvent)
+  })
+
+  return { dragging }
+}
diff --git a/plugins/assets/src/spa/app/composables/useLocalStorage.ts b/plugins/assets/src/spa/app/composables/useLocalStorage.ts
new file mode 100644
index 00000000..9d9d1828
--- /dev/null
+++ b/plugins/assets/src/spa/app/composables/useLocalStorage.ts
@@ -0,0 +1,28 @@
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+
+/** Per-browser UI preference (view mode, panel width) — not collaborative state, so plain `localStorage` beats devframe shared state here. */
+export function useLocalStorage<T>(key: string, initial: T): Ref<T> {
+  const read = (): T => {
+    try {
+      const raw = localStorage.getItem(key)
+      return raw ? (JSON.parse(raw) as T) : initial
+    }
+    catch {
+      return initial
+    }
+  }
+
+  const value = ref(read()) as Ref<T>
+
+  watch(value, (next) => {
+    try {
+      localStorage.setItem(key, JSON.stringify(next))
+    }
+    catch {
+      // Storage disabled/full — the preference just doesn't persist.
+    }
+  }, { deep: true })
+
+  return value
+}
diff --git a/plugins/assets/src/spa/app/composables/useUpload.ts b/plugins/assets/src/spa/app/composables/useUpload.ts
new file mode 100644
index 00000000..93d7952c
--- /dev/null
+++ b/plugins/assets/src/spa/app/composables/useUpload.ts
@@ -0,0 +1,56 @@
+import type { DevframeRpcClient } from 'devframe/client'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+
+export interface QueuedFile {
+  file: File
+  /** Root-relative destination path (folder + possibly-renamed file name). */
+  targetPath: string
+}
+
+export interface UseUploadResult {
+  uploading: Ref<boolean>
+  /** Per-file error messages from the most recent `uploadFiles` call. */
+  errors: Ref<string[]>
+  /** Resolves with per-file error messages — empty when every file succeeded. */
+  uploadFiles: (files: QueuedFile[]) => Promise<string[]>
+}
+
+/**
+ * Uploads files sequentially over the assets plugin's streaming channel:
+ * one `upload` action call allocates the slot, then the file's own byte
+ * stream pipes straight into the returned sink.
+ */
+export function useUpload(rpc: Ref<DevframeRpcClient | null>, onDone: () => void): UseUploadResult {
+  const uploading = ref(false)
+  const errors = ref<string[]>([])
+
+  async function uploadFiles(files: QueuedFile[]): Promise<string[]> {
+    const client = rpc.value
+    if (!client || files.length === 0)
+      return []
+    uploading.value = true
+    const nextErrors: string[] = []
+    try {
+      for (const { file, targetPath } of files) {
+        try {
+          const { uploadId } = await client.call('devframes:plugin:assets:upload', { path: targetPath })
+          const sink = client.streaming.upload<Uint8Array>('devframes:plugin:assets:upload', uploadId)
+          await file.stream().pipeTo(sink.writable, { signal: sink.signal })
+        }
+        catch (cause) {
+          nextErrors.push(`${targetPath}: ${cause instanceof Error ? cause.message : String(cause)}`)
+        }
+      }
+      errors.value = nextErrors
+      if (nextErrors.length < files.length)
+        onDone()
+      return nextErrors
+    }
+    finally {
+      uploading.value = false
+    }
+  }
+
+  return { uploading, errors, uploadFiles }
+}
diff --git a/plugins/assets/src/spa/app/design.ts b/plugins/assets/src/spa/app/design.ts
new file mode 100644
index 00000000..af3b99e6
--- /dev/null
+++ b/plugins/assets/src/spa/app/design.ts
@@ -0,0 +1,3 @@
+// Re-exports the shared devframe class-helper builders (see
+// `design/design.ts`) so this surface stays in lockstep with every other.
+export * from '../../../../../design/design'
diff --git a/plugins/assets/src/spa/app/utils/assetType.ts b/plugins/assets/src/spa/app/utils/assetType.ts
new file mode 100644
index 00000000..410c5d50
--- /dev/null
+++ b/plugins/assets/src/spa/app/utils/assetType.ts
@@ -0,0 +1,14 @@
+import type { AssetType } from '../../../types'
+
+/** Canonical display order for the type filter. */
+export const ASSET_TYPES: readonly AssetType[] = ['image', 'video', 'audio', 'font', 'text', 'other']
+
+/** Shared label + Phosphor icon per asset type, used by the filter and the tree. */
+export const TYPE_META: Record<AssetType, { label: string, icon: string }> = {
+  image: { label: 'Images', icon: 'i-ph-image-duotone' },
+  video: { label: 'Videos', icon: 'i-ph-video-duotone' },
+  audio: { label: 'Audio', icon: 'i-ph-speaker-high-duotone' },
+  font: { label: 'Fonts', icon: 'i-ph-text-aa-duotone' },
+  text: { label: 'Text', icon: 'i-ph-file-text-duotone' },
+  other: { label: 'Other', icon: 'i-ph-file-duotone' },
+}
diff --git a/plugins/assets/src/spa/app/utils/format.ts b/plugins/assets/src/spa/app/utils/format.ts
new file mode 100644
index 00000000..8886d66a
--- /dev/null
+++ b/plugins/assets/src/spa/app/utils/format.ts
@@ -0,0 +1,41 @@
+export function formatFileSize(size: number): string {
+  if (size < 1024)
+    return `${size} B`
+  if (size < 1024 * 1024)
+    return `${(size / 1024).toFixed(2)} KB`
+  return `${(size / 1024 / 1024).toFixed(2)} MB`
+}
+
+const UNITS: [number, string][] = [
+  [60, 'just now'],
+  [60 * 60, 'm'],
+  [60 * 60 * 24, 'h'],
+  [60 * 60 * 24 * 30, 'd'],
+  [60 * 60 * 24 * 365, 'mo'],
+]
+
+export function formatTimeAgo(mtime: number): string {
+  const seconds = Math.floor((Date.now() - mtime) / 1000)
+  if (seconds < 60)
+    return 'just now'
+  if (seconds < UNITS[1][0])
+    return `${Math.floor(seconds / 60)}m ago`
+  if (seconds < UNITS[2][0])
+    return `${Math.floor(seconds / (60 * 60))}h ago`
+  if (seconds < UNITS[3][0])
+    return `${Math.floor(seconds / (60 * 60 * 24))}d ago`
+  if (seconds < UNITS[4][0])
+    return `${Math.floor(seconds / (60 * 60 * 24 * 30))}mo ago`
+  return `${Math.floor(seconds / (60 * 60 * 24 * 365))}y ago`
+}
+
+export function fileNameOf(path: string): string {
+  return path.split('/').pop() ?? path
+}
+
+/** Folder a path lives in, with a trailing slash — `''` for the root. */
+export function folderOf(path: string): string {
+  const parts = path.split('/')
+  parts.pop()
+  return parts.length ? `${parts.join('/')}/` : ''
+}
diff --git a/plugins/assets/src/spa/app/utils/snippets.ts b/plugins/assets/src/spa/app/utils/snippets.ts
new file mode 100644
index 00000000..f03d153a
--- /dev/null
+++ b/plugins/assets/src/spa/app/utils/snippets.ts
@@ -0,0 +1,33 @@
+import type { AssetImageMeta, AssetInfo, CodeSnippet } from '../../../types'
+import { fileNameOf } from './format'
+
+/**
+ * Ready-to-copy usage snippets for the details panel. Generic by design —
+ * unlike Nuxt DevTools' Nuxt-specific `<NuxtImg>`/`<NuxtPicture>` snippets,
+ * these apply to any framework devframe might be embedded in.
+ */
+export function buildSnippets(asset: AssetInfo, imageMeta?: AssetImageMeta | null): CodeSnippet[] {
+  const items: CodeSnippet[] = []
+  const name = fileNameOf(asset.path)
+
+  if (asset.type === 'image') {
+    const attrs = imageMeta?.width && imageMeta?.height
+      ? ` width="${imageMeta.width}" height="${imageMeta.height}"`
+      : ''
+    items.push({ name: 'Image tag', lang: 'html', code: `<img src="${asset.publicPath}"${attrs} />` })
+    items.push({ name: 'CSS background', lang: 'css', code: `.element {\n  background-image: url('${asset.publicPath}');\n}` })
+  }
+  else if (asset.type === 'font') {
+    const family = name.replace(/\.[^.]+$/, '')
+    items.push({ name: '@font-face', lang: 'css', code: `@font-face {\n  font-family: '${family}';\n  src: url('${asset.publicPath}');\n}` })
+  }
+  else if (asset.type === 'video') {
+    items.push({ name: 'Video tag', lang: 'html', code: `<video src="${asset.publicPath}" controls></video>` })
+  }
+  else if (asset.type === 'audio') {
+    items.push({ name: 'Audio tag', lang: 'html', code: `<audio src="${asset.publicPath}" controls></audio>` })
+  }
+
+  items.push({ name: 'Download link', lang: 'html', code: `<a href="${asset.publicPath}" download>\n  Download ${name}\n</a>` })
+  return items
+}
diff --git a/plugins/assets/src/spa/app/utils/tree.ts b/plugins/assets/src/spa/app/utils/tree.ts
new file mode 100644
index 00000000..8858a9e1
--- /dev/null
+++ b/plugins/assets/src/spa/app/utils/tree.ts
@@ -0,0 +1,65 @@
+import type { AssetInfo } from '../../../types'
+import { folderOf } from './format'
+
+export interface FolderGroup {
+  folder: string
+  items: AssetInfo[]
+}
+
+/** Groups a flat asset list by immediate parent folder, sorted by folder name. */
+export function groupByFolder(assets: readonly AssetInfo[]): FolderGroup[] {
+  const map = new Map<string, AssetInfo[]>()
+  for (const asset of assets) {
+    const folder = folderOf(asset.path)
+    const list = map.get(folder)
+    if (list)
+      list.push(asset)
+    else
+      map.set(folder, [asset])
+  }
+  return Array.from(map.entries())
+    .map(([folder, items]) => ({ folder, items }))
+    .sort((a, b) => a.folder.localeCompare(b.folder))
+}
+
+export interface TreeNode {
+  name: string
+  /** Full path from the managed root — a folder path for folders, `asset.path` for files. */
+  path: string
+  isFolder: boolean
+  asset?: AssetInfo
+  children: TreeNode[]
+}
+
+/** Builds a nested folder/file tree from a flat asset list (folders first, then alphabetical). */
+export function buildTree(assets: readonly AssetInfo[]): TreeNode[] {
+  const root: TreeNode = { name: '', path: '', isFolder: true, children: [] }
+
+  for (const asset of assets) {
+    const parts = asset.path.split('/').filter(Boolean)
+    let node = root
+    let acc = ''
+    parts.forEach((part, i) => {
+      acc = acc ? `${acc}/${part}` : part
+      const isLast = i === parts.length - 1
+      let child = node.children.find(c => c.name === part && c.isFolder === !isLast)
+      if (!child) {
+        child = { name: part, path: acc, isFolder: !isLast, children: [], asset: isLast ? asset : undefined }
+        node.children.push(child)
+      }
+      node = child
+    })
+  }
+
+  const sortNode = (node: TreeNode): void => {
+    node.children.sort((a, b) => {
+      if (a.isFolder !== b.isFolder)
+        return a.isFolder ? -1 : 1
+      return a.name.localeCompare(b.name)
+    })
+    node.children.forEach(sortNode)
+  }
+  sortNode(root)
+
+  return root.children
+}
diff --git a/plugins/assets/src/spa/index.html b/plugins/assets/src/spa/index.html
new file mode 100644
index 00000000..d003a0b2
--- /dev/null
+++ b/plugins/assets/src/spa/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <base href="./" />
+    <title>Assets</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/plugins/assets/src/spa/main.ts b/plugins/assets/src/spa/main.ts
new file mode 100644
index 00000000..63d704e3
--- /dev/null
+++ b/plugins/assets/src/spa/main.ts
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+import App from './app/App.vue'
+import 'virtual:uno.css'
+import 'floating-vue/dist/style.css'
+import '@antfu/design/styles.css'
+
+// Shared design tokens flip on the `.dark` class; mirror the OS preference
+// onto <html> (the built-in devframe plugins all follow this approach).
+const mq = window.matchMedia('(prefers-color-scheme: dark)')
+function applyScheme(dark: boolean): void {
+  document.documentElement.classList.toggle('dark', dark)
+  document.documentElement.classList.toggle('light', !dark)
+}
+applyScheme(mq.matches)
+mq.addEventListener('change', e => applyScheme(e.matches))
+
+createApp(App).mount('#app')
diff --git a/plugins/assets/src/spa/shims.d.ts b/plugins/assets/src/spa/shims.d.ts
new file mode 100644
index 00000000..dc1580f5
--- /dev/null
+++ b/plugins/assets/src/spa/shims.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
+  export default component
+}
+
+declare module '*.css' {}
+declare module 'virtual:uno.css' {}
diff --git a/plugins/assets/src/spa/vite.config.ts b/plugins/assets/src/spa/vite.config.ts
new file mode 100644
index 00000000..b5d1ad8a
--- /dev/null
+++ b/plugins/assets/src/spa/vite.config.ts
@@ -0,0 +1,33 @@
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'pathe'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import { alias } from '../../../../alias'
+import { assetsVitePlugin } from '../vite'
+
+// The plugin manages `<cwd>/public` and (as a mounted plugin) does NOT serve
+// those bytes itself — it references the host's URLs. Here the host is Vite,
+// so in dev point Vite's own `publicDir` at the managed directory and it
+// serves the fixtures at `/` (matching the default `baseURL`), exactly as a
+// real Vite app serves its `public/` folder. Disabled for `build` so the
+// fixtures never get copied into the shipped SPA dist.
+export default defineConfig(({ command }) => ({
+  base: './',
+  root: fileURLToPath(new URL('.', import.meta.url)),
+  publicDir: command === 'serve' ? resolve(process.cwd(), 'public') : false,
+  resolve: { alias },
+  plugins: [
+    vue(),
+    UnoCSS(),
+    assetsVitePlugin({ devMiddleware: true, base: '/' }),
+  ],
+  // `@antfu/design` ships raw `.ts`/`.vue`; let `@vitejs/plugin-vue` compile
+  // its SFCs instead of esbuild pre-bundling them.
+  optimizeDeps: { exclude: ['@antfu/design'] },
+  build: {
+    outDir: fileURLToPath(new URL('../../dist/spa', import.meta.url)),
+    emptyOutDir: true,
+  },
+}))
diff --git a/plugins/assets/src/types.ts b/plugins/assets/src/types.ts
new file mode 100644
index 00000000..1fd359eb
--- /dev/null
+++ b/plugins/assets/src/types.ts
@@ -0,0 +1,50 @@
+/** Broad category guessed from a file's extension, driving preview/icon choice. */
+export type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'other'
+
+/** One file under the managed directory. */
+export interface AssetInfo {
+  /** Path relative to the managed directory, posix-separated, no leading slash. */
+  path: string
+  type: AssetType
+  /** URL the browser can fetch the raw bytes from (live adapters only). */
+  publicPath: string
+  size: number
+  /** `mtimeMs` — milliseconds since epoch. */
+  mtime: number
+}
+
+export interface AssetImageMeta {
+  width?: number
+  height?: number
+  orientation?: number
+}
+
+/** A ready-to-copy usage snippet shown in the details panel. */
+export interface CodeSnippet {
+  lang: string
+  code: string
+  name: string
+}
+
+/** Mirrors Nuxt DevTools' own default upload allow-list. */
+export const DEFAULT_ALLOWED_UPLOAD_EXTENSIONS: readonly string[] = [
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'svg',
+  'webp',
+  'ico',
+  'mp4',
+  'ogg',
+  'mp3',
+  'wav',
+  'mov',
+  'mkv',
+  'mpg',
+  'txt',
+  'ttf',
+  'woff',
+  'woff2',
+  'eot',
+]
diff --git a/plugins/assets/src/vite.ts b/plugins/assets/src/vite.ts
new file mode 100644
index 00000000..0a1545b5
--- /dev/null
+++ b/plugins/assets/src/vite.ts
@@ -0,0 +1,16 @@
+import type { DevframeVitePlugin, ViteDevBridgeOptions } from 'devframe/helpers/vite'
+import { viteDevBridge } from 'devframe/helpers/vite'
+import assetsDevframe from './index'
+
+export type { ViteDevBridgeOptions }
+
+export type AssetsVitePluginOptions = ViteDevBridgeOptions
+
+/**
+ * Mount the assets manager into an existing Vite dev server. As a hosted
+ * adapter it defers authentication to the host, so the bridged devframe's
+ * own gate stays off by default — opt back in with `{ auth: true }`.
+ */
+export function assetsVitePlugin(options: AssetsVitePluginOptions = {}): DevframeVitePlugin {
+  return viteDevBridge(assetsDevframe, options)
+}
diff --git a/plugins/assets/test/_utils.ts b/plugins/assets/test/_utils.ts
new file mode 100644
index 00000000..9b919697
--- /dev/null
+++ b/plugins/assets/test/_utils.ts
@@ -0,0 +1,118 @@
+import type { StartedServer } from 'devframe/node'
+import type { DevframeNodeContext } from 'devframe/types'
+import type { AssetsDevframeOptions } from '../src/index'
+import { mkdtemp, rm } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import process from 'node:process'
+import { createRpcStreamingClientHost } from 'devframe/client'
+import { createH3DevframeHost, createHostContext, startHttpAndWs } from 'devframe/node'
+import { createRpcClient } from 'devframe/rpc/client'
+import { createWsRpcChannel } from 'devframe/rpc/transports/ws-client'
+import { mountStaticHandler } from 'devframe/utils/serve-static'
+import { getPort } from 'get-port-please'
+import { H3 } from 'h3'
+import { createAssetsDevframe } from '../src/index'
+import { disposeAssetsWatcher } from '../src/node/index'
+
+export interface AssetsServer extends StartedServer {
+  ctx: DevframeNodeContext
+  port: number
+  dir: string
+}
+
+/** Creates a fresh temp directory managed assets scan/write into, cleaned up by the caller. */
+export async function createTempDir(): Promise<string> {
+  return await mkdtemp(join(tmpdir(), 'devframes-plugin-assets-'))
+}
+
+/**
+ * Boot the assets devframe in-process over real HTTP + WebSocket so the
+ * full RPC + streaming + live-serving path is exercised end to end.
+ */
+export async function startAssetsServer(
+  dir: string,
+  options: AssetsDevframeOptions = {},
+): Promise<AssetsServer> {
+  const definition = createAssetsDevframe({ dir, ...options })
+  const host = '127.0.0.1'
+  const port = await getPort({ host, random: true })
+
+  const app = new H3()
+  const origin = `http://${host}:${port}`
+  const h3Host = createH3DevframeHost({
+    origin,
+    appName: definition.id,
+    mount: (base, distDir) => mountStaticHandler(app, base, distDir),
+  })
+
+  const ctx = await createHostContext({ cwd: process.cwd(), mode: 'dev', host: h3Host })
+  await definition.setup(ctx)
+
+  const server = await startHttpAndWs({ context: ctx, host, port, app, auth: false })
+
+  // The live file watcher started by `setupAssets` otherwise keeps the
+  // process alive past the test run.
+  const closeServer = server.close.bind(server)
+  server.close = async () => {
+    await disposeAssetsWatcher(ctx)
+    await closeServer()
+  }
+
+  return Object.assign(server, { ctx, port, dir })
+}
+
+export async function cleanupTempDir(dir: string): Promise<void> {
+  await rm(dir, { recursive: true, force: true })
+}
+
+export interface TestClient {
+  rpc: ReturnType<typeof createRpcClient>
+  streaming: ReturnType<typeof createRpcStreamingClientHost>
+  /** Registers a handler for a server-broadcast event by name (e.g. `devframes:plugin:assets:changed`). */
+  onEvent: (name: string, handler: (...args: any[]) => void) => void
+}
+
+/**
+ * Minimal RPC + streaming client over the WS transport — mirrors the
+ * terminals plugin's test harness. `connectDevframe` is skipped because it
+ * needs a browser-like environment for connection-meta lookup.
+ */
+export function bootClient(port: number): TestClient {
+  const listeners = new Set<(trusted: boolean) => void>()
+  const fakeEvents = {
+    on(name: string, fn: (trusted: boolean) => void) {
+      if (name === 'rpc:is-trusted:updated')
+        listeners.add(fn)
+      return () => listeners.delete(fn)
+    },
+  }
+  const clientFns: any = {}
+  const clientRpcStub = {
+    register(def: { name: string, handler: (...args: any[]) => any }) {
+      clientFns[def.name] = def.handler
+    },
+  }
+
+  const rpc = createRpcClient<any, any>(clientFns, {
+    channel: createWsRpcChannel({ url: `ws://127.0.0.1:${port}` }),
+  })
+
+  const fakeRpcClient = {
+    isTrusted: true,
+    events: fakeEvents,
+    client: clientRpcStub,
+    callEvent: (name: any, ...args: any[]) => (rpc as any).$callEvent(name, ...args),
+  } as any
+
+  const streaming = createRpcStreamingClientHost(fakeRpcClient)
+  return {
+    rpc,
+    streaming,
+    onEvent: (name, handler) => { clientFns[name] = handler },
+  }
+}
+
+export function call<T = any>(client: TestClient, method: string, ...args: any[]): Promise<T> {
+  return (client.rpc as any).$call(method, ...args) as Promise<T>
+}
diff --git a/plugins/assets/test/assets.test.ts b/plugins/assets/test/assets.test.ts
new file mode 100644
index 00000000..6ff28417
--- /dev/null
+++ b/plugins/assets/test/assets.test.ts
@@ -0,0 +1,184 @@
+import type { AssetsServer, TestClient } from './_utils'
+import { Buffer } from 'node:buffer'
+import fsp from 'node:fs/promises'
+import { join } from 'node:path'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { bootClient, call, cleanupTempDir, createTempDir, startAssetsServer } from './_utils'
+
+// A minimal, valid 1x1 PNG.
+const ONE_PIXEL_PNG = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQAAAAA3bvkkAAAACklEQVR4nGNgAAIAAAUAAen63NgAAAAASUVORK5CYII=',
+  'base64',
+)
+
+async function waitFor(predicate: () => Promise<boolean> | boolean, timeoutMs = 3000): Promise<void> {
+  const start = Date.now()
+  while (Date.now() - start < timeoutMs) {
+    if (await predicate())
+      return
+    await new Promise(resolve => setTimeout(resolve, 25))
+  }
+  throw new Error('waitFor: timed out')
+}
+
+async function upload(client: TestClient, path: string, bytes: Uint8Array): Promise<void> {
+  const { uploadId } = await call<{ uploadId: string }>(client, 'devframes:plugin:assets:upload', { path })
+  const sink = client.streaming.upload<Uint8Array>('devframes:plugin:assets:upload', uploadId)
+  sink.write(bytes)
+  sink.close()
+  // The server-side write is async (fire-and-forget inside the handler) —
+  // give the write stream a tick to flush before the caller asserts on disk.
+  await new Promise(resolve => setTimeout(resolve, 50))
+}
+
+describe('assets plugin', () => {
+  let dir: string
+  let server: AssetsServer
+  let client: TestClient
+
+  beforeEach(async () => {
+    dir = await createTempDir()
+  })
+
+  afterEach(async () => {
+    await server?.close()
+    await cleanupTempDir(dir)
+  })
+
+  it('lists no assets in an empty directory', async () => {
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+    const list = await call(client, 'devframes:plugin:assets:list')
+    expect(list).toEqual([])
+  })
+
+  it('reports write capabilities by default', async () => {
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+    const caps = await call(client, 'devframes:plugin:assets:capabilities')
+    expect(caps).toEqual({ write: true, uploadExtensions: expect.any(Array) })
+  })
+
+  it('creates a folder and uploads a file into it via the streaming channel', async () => {
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+
+    await call(client, 'devframes:plugin:assets:mkdir', { path: 'icons' })
+    await upload(client, 'icons/logo.png', ONE_PIXEL_PNG)
+
+    const list = await call(client, 'devframes:plugin:assets:list')
+    expect(list).toHaveLength(1)
+    expect(list[0]).toMatchObject({ path: 'icons/logo.png', type: 'image', size: ONE_PIXEL_PNG.length })
+    expect(await fsp.readFile(join(dir, 'icons/logo.png'))).toEqual(ONE_PIXEL_PNG)
+  })
+
+  it('reads image dimensions for an uploaded image', async () => {
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+    await upload(client, 'logo.png', ONE_PIXEL_PNG)
+
+    const meta = await call(client, 'devframes:plugin:assets:read-image-meta', 'logo.png')
+    expect(meta).toMatchObject({ width: 1, height: 1 })
+  })
+
+  it('reads text content for a text asset', async () => {
+    await fsp.writeFile(join(dir, 'notes.txt'), 'hello world', 'utf-8')
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+
+    const content = await call(client, 'devframes:plugin:assets:read-text', 'notes.txt')
+    expect(content).toBe('hello world')
+  })
+
+  it('renames an asset within its folder', async () => {
+    await fsp.mkdir(join(dir, 'icons'), { recursive: true })
+    await fsp.writeFile(join(dir, 'icons/old.txt'), 'x', 'utf-8')
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+
+    const renamed = await call(client, 'devframes:plugin:assets:rename', { path: 'icons/old.txt', newName: 'new' })
+    expect(renamed.path).toBe('icons/new.txt')
+    await expect(fsp.access(join(dir, 'icons/new.txt'))).resolves.toBeUndefined()
+    await expect(fsp.access(join(dir, 'icons/old.txt'))).rejects.toThrow()
+  })
+
+  it('rejects renaming onto an existing file', async () => {
+    await fsp.writeFile(join(dir, 'a.txt'), 'a', 'utf-8')
+    await fsp.writeFile(join(dir, 'b.txt'), 'b', 'utf-8')
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+
+    await expect(call(client, 'devframes:plugin:assets:rename', { path: 'a.txt', newName: 'b' })).rejects.toThrow()
+  })
+
+  it('deletes one or more assets in a single call', async () => {
+    await fsp.writeFile(join(dir, 'a.txt'), 'a', 'utf-8')
+    await fsp.writeFile(join(dir, 'b.txt'), 'b', 'utf-8')
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+
+    const result = await call(client, 'devframes:plugin:assets:delete', { paths: ['a.txt', 'b.txt', 'missing.txt'] })
+    expect(result.deleted.sort()).toEqual(['a.txt', 'b.txt'])
+    expect(await call(client, 'devframes:plugin:assets:list')).toEqual([])
+  })
+
+  it('rejects paths that escape the managed directory', async () => {
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+
+    await expect(call(client, 'devframes:plugin:assets:read-text', '../../etc/passwd')).resolves.toBeNull()
+    await expect(
+      call(client, 'devframes:plugin:assets:rename', { path: '../../etc/passwd', newName: 'x' }),
+    ).rejects.toThrow(/outside the managed directory/)
+  })
+
+  it('rejects uploads with a disallowed extension', async () => {
+    server = await startAssetsServer(dir, { uploadExtensions: ['png'] })
+    client = bootClient(server.port)
+
+    await expect(
+      call(client, 'devframes:plugin:assets:upload', { path: 'script.exe' }),
+    ).rejects.toThrow(/not allowed/)
+  })
+
+  it('does not register write actions when write is disabled', async () => {
+    server = await startAssetsServer(dir, { write: false })
+    client = bootClient(server.port)
+
+    const caps = await call(client, 'devframes:plugin:assets:capabilities')
+    expect(caps.write).toBe(false)
+    await expect(call(client, 'devframes:plugin:assets:mkdir', { path: 'x' })).rejects.toThrow()
+  })
+
+  it('still registers open-in-editor and reveal-in-folder when write is disabled', async () => {
+    server = await startAssetsServer(dir, { write: false })
+
+    // open-in-editor / reveal-in-folder launch external OS apps, so assert
+    // they're *registered* on the server context rather than invoking them
+    // (a real launch would spawn a process and hang the test runner). They
+    // must be available regardless of `write`; the write actions must not.
+    const defs = server.ctx.rpc.definitions
+    expect(defs.has('devframes:plugin:assets:open-in-editor')).toBe(true)
+    expect(defs.has('devframes:plugin:assets:reveal-in-folder')).toBe(true)
+    expect(defs.has('devframes:plugin:assets:mkdir')).toBe(false)
+  })
+
+  it('broadcasts a change event when a file is added on disk', async () => {
+    server = await startAssetsServer(dir)
+    client = bootClient(server.port)
+
+    let changed = false
+    client.onEvent('devframes:plugin:assets:changed', () => {
+      changed = true
+    })
+
+    // `broadcast()` only reaches clients the server already knows about — a
+    // round trip first guarantees the WS handshake has completed before the
+    // watcher fires, otherwise the (unqueued, unreplayed) event is dropped.
+    await call(client, 'devframes:plugin:assets:list')
+
+    await fsp.writeFile(join(dir, 'new-file.txt'), 'x', 'utf-8')
+    await waitFor(() => changed)
+    expect(await call(client, 'devframes:plugin:assets:list')).toHaveLength(1)
+  })
+})
diff --git a/plugins/assets/tsconfig.json b/plugins/assets/tsconfig.json
new file mode 100644
index 00000000..ae26cc84
--- /dev/null
+++ b/plugins/assets/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "noEmit": true,
+    "isolatedDeclarations": false
+  },
+  "include": ["src", "test", "bin.mjs", ".storybook"]
+}
diff --git a/plugins/assets/tsdown.config.ts b/plugins/assets/tsdown.config.ts
new file mode 100644
index 00000000..877704c7
--- /dev/null
+++ b/plugins/assets/tsdown.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from 'tsdown'
+
+const tsconfig = '../../tsconfig.base.json'
+
+const clientEntries = {
+  'client/index': 'src/client/index.ts',
+}
+
+const serverEntries = {
+  'index': 'src/index.ts',
+  'cli': 'src/cli.ts',
+  'vite': 'src/vite.ts',
+  'node/index': 'src/node/index.ts',
+  'rpc/index': 'src/rpc/index.ts',
+}
+
+export default defineConfig([
+  {
+    clean: true,
+    platform: 'browser',
+    tsconfig,
+    dts: false,
+    outExtensions: () => ({ js: '.mjs' }),
+    entry: clientEntries,
+  },
+  {
+    clean: false,
+    platform: 'node',
+    tsconfig,
+    dts: false,
+    entry: serverEntries,
+  },
+  {
+    clean: false,
+    platform: 'neutral',
+    tsconfig,
+    dts: { emitDtsOnly: true },
+    outExtensions: () => ({ dts: '.d.mts' }),
+    entry: { ...clientEntries, ...serverEntries },
+  },
+])
diff --git a/plugins/assets/uno.config.ts b/plugins/assets/uno.config.ts
new file mode 100644
index 00000000..e6c8e334
--- /dev/null
+++ b/plugins/assets/uno.config.ts
@@ -0,0 +1,15 @@
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
+
+// The assets manager composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+      },
+    },
+  },
+])
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 145b5361..3fe28e8a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,6 +64,9 @@ catalogs:
     h3:
       specifier: ^2.0.1-rc.26
       version: 2.0.1-rc.26
+    image-meta:
+      specifier: ^0.2.2
+      version: 0.2.2
     immer:
       specifier: ^11.1.15
       version: 11.1.15
@@ -715,6 +718,9 @@ importers:
       '@devframes/plugin-a11y':
         specifier: workspace:*
         version: link:../../plugins/a11y
+      '@devframes/plugin-assets':
+        specifier: workspace:*
+        version: link:../../plugins/assets
       '@devframes/plugin-code-server':
         specifier: workspace:*
         version: link:../../plugins/code-server
@@ -1062,6 +1068,97 @@ importers:
         specifier: catalog:deps
         version: 8.21.1
 
+  plugins/assets:
+    dependencies:
+      cac:
+        specifier: catalog:deps
+        version: 7.0.0
+      chokidar:
+        specifier: ^5.0.0
+        version: 5.0.0
+      image-meta:
+        specifier: catalog:deps
+        version: 0.2.2
+      nostics:
+        specifier: catalog:deps
+        version: 1.2.0
+      pathe:
+        specifier: catalog:deps
+        version: 2.0.3
+      perfect-debounce:
+        specifier: catalog:deps
+        version: 2.1.0
+      tinyglobby:
+        specifier: catalog:deps
+        version: 0.2.17
+      ufo:
+        specifier: catalog:deps
+        version: 1.6.4
+      valibot:
+        specifier: catalog:deps
+        version: 1.4.2(typescript@6.0.3)
+    devDependencies:
+      '@antfu/design':
+        specifier: catalog:frontend
+        version: 0.3.2(@antfu/utils@9.3.0)(@iconify-json/catppuccin@1.2.17)(@tanstack/vue-virtual@3.13.30(vue@3.5.40(typescript@6.0.3)))(@unocss/core@66.7.5)(colorjs.io@0.7.1)(dompurify@3.4.12)(floating-vue@5.2.2(vue@3.5.40(typescript@6.0.3)))(playwright@1.62.0)(reka-ui@2.10.1(vue@3.5.40(typescript@6.0.3)))(splitpanes@4.1.2(vue@3.5.40(typescript@6.0.3)))(unocss@66.7.5(@unocss/postcss@66.7.5(postcss@8.5.23))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.1)(yaml@2.9.0)))(vue@3.5.40(typescript@6.0.3))
+      '@iconify-json/ph':
+        specifier: catalog:frontend
+        version: 1.2.2
+      '@storybook/addon-a11y':
+        specifier: catalog:storybook
+        version: 10.5.5(storybook@10.5.5(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      '@storybook/addon-docs':
+        specifier: catalog:storybook
+        version: 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.5.5(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.1)(yaml@2.9.0))
+      '@storybook/vue3-vite':
+        specifier: catalog:storybook
+        version: 10.5.5(esbuild@0.28.0)(rollup@4.60.3)(storybook@10.5.5(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.1)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3))
+      '@types/node':
+        specifier: catalog:types
+        version: 26.1.2
+      '@vitejs/plugin-vue':
+        specifier: catalog:build
+        version: 6.0.8(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.1)(yaml@2.9.0))(vue@3.5.40(typescript@6.0.3))
+      colorjs.io:
+        specifier: catalog:frontend
+        version: 0.7.1
+      devframe:
+        specifier: workspace:*
+        version: link:../../packages/devframe
+      floating-vue:
+        specifier: catalog:frontend
+        version: 5.2.2(vue@3.5.40(typescript@6.0.3))
+      get-port-please:
+        specifier: catalog:deps
+        version: 3.2.0
+      h3:
+        specifier: catalog:deps
+        version: 2.0.1-rc.26(crossws@0.4.10(srvx@0.12.4))
+      reka-ui:
+        specifier: catalog:frontend
+        version: 2.10.1(vue@3.5.40(typescript@6.0.3))
+      storybook:
+        specifier: catalog:storybook
+        version: 10.5.5(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tsdown:
+        specifier: catalog:build
+        version: 0.22.14(@volar/typescript@2.4.28)(oxc-resolver@11.21.3)(tsx@4.23.1)(typescript@6.0.3)
+      unocss:
+        specifier: catalog:frontend
+        version: 66.7.5(@unocss/postcss@66.7.5(postcss@8.5.23))(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.1)(yaml@2.9.0))
+      vite:
+        specifier: catalog:build
+        version: 8.1.5(@types/node@26.1.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.1)(yaml@2.9.0)
+      vitest:
+        specifier: catalog:testing
+        version: 4.1.10(@types/node@26.1.2)(vite@8.1.5(@types/node@26.1.2)(esbuild@0.28.0)(jiti@2.7.0)(terser@5.47.1)(tsx@4.23.1)(yaml@2.9.0))
+      vue:
+        specifier: catalog:frontend
+        version: 3.5.40(typescript@6.0.3)
+      ws:
+        specifier: catalog:deps
+        version: 8.21.1
+
   plugins/code-server:
     dependencies:
       cac:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d90b8ab2..f0e4c9bd 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -61,10 +61,12 @@ catalogs:
     '@valibot/to-json-schema': ^1.7.1
     birpc: ^4.0.0
     cac: ^7.0.0
+    chokidar: ^5.0.0
     crossws: ^0.4.10
     destr: ^2.0.5
     get-port-please: ^3.2.0
     h3: ^2.0.1-rc.26
+    image-meta: ^0.2.2
     immer: ^11.1.15
     jora: ^1.0.0-beta.16
     launch-editor: ^2.14.1
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/cli.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/cli.snapshot.d.ts
new file mode 100644
index 00000000..6e4a6e26
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/cli.snapshot.d.ts
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/cli`
+ */
+// #region Functions
+export declare function createAssetsCli(): CacHandle;
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/cli.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/cli.snapshot.js
new file mode 100644
index 00000000..8adfe01f
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/cli.snapshot.js
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/cli`
+ */
+// #region Functions
+export function createAssetsCli() {}
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.d.ts
new file mode 100644
index 00000000..68dc7613
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/client`
+ */
+// #region Functions
+export declare function connectAssets(_?: DevframeRpcClientOptions): Promise<import("devframe/client").DevframeRpcClient>;
+// #endregion
+
+// #region Other
+export { AssetImageMeta }
+export { AssetInfo }
+export { AssetType }
+export { CodeSnippet }
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.js
new file mode 100644
index 00000000..899a6c81
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/client.snapshot.js
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/client`
+ */
+// #region Functions
+export function connectAssets(_) {}
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.d.ts
new file mode 100644
index 00000000..79c92432
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.d.ts
@@ -0,0 +1,54 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets`
+ */
+// #region Interfaces
+export interface AssetImageMeta {
+  width?: number;
+  height?: number;
+  orientation?: number;
+}
+export interface AssetInfo {
+  path: string;
+  type: AssetType;
+  publicPath: string;
+  size: number;
+  mtime: number;
+}
+export interface AssetsDevframeOptions {
+  id?: string;
+  name?: string;
+  icon?: string;
+  dir?: string;
+  baseURL?: string;
+  serveStatic?: boolean;
+  basePath?: string;
+  distDir?: string;
+  port?: number;
+  write?: boolean;
+  uploadExtensions?: readonly string[] | '*';
+  auth?: boolean;
+  build?: boolean;
+}
+export interface CodeSnippet {
+  lang: string;
+  code: string;
+  name: string;
+}
+// #endregion
+
+// #region Types
+export type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'other';
+// #endregion
+
+// #region Functions
+export declare function createAssetsDevframe(_?: AssetsDevframeOptions): DevframeDefinition;
+// #endregion
+
+// #region Variables
+export declare const DEFAULT_ALLOWED_UPLOAD_EXTENSIONS: readonly string[];
+// #endregion
+
+// #region Default Export
+declare const _default: DevframeDefinition;
+export default _default
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.js
new file mode 100644
index 00000000..5d609ddc
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/index.snapshot.js
@@ -0,0 +1,15 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets`
+ */
+// #region Functions
+export function createAssetsDevframe(_) {}
+// #endregion
+
+// #region Variables
+export var DEFAULT_ALLOWED_UPLOAD_EXTENSIONS /* const */
+// #endregion
+
+// #region Default Export
+var _default /* const */
+export default _default
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/node.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/node.snapshot.d.ts
new file mode 100644
index 00000000..405af34b
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/node.snapshot.d.ts
@@ -0,0 +1,22 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/node`
+ */
+// #region Interfaces
+export interface SetupAssetsOptions {
+  dir: string;
+  write: boolean;
+  uploadExtensions: readonly string[] | '*';
+  baseURL: string;
+  serveStatic: boolean;
+}
+// #endregion
+
+// #region Functions
+export declare function configureAssets(_: DevframeNodeContext, _: AssetsConfig): void;
+export declare function disposeAssetsWatcher(_: DevframeNodeContext): Promise<void>;
+export declare function getAssetsContext(_: DevframeNodeContext): AssetsContext;
+export declare function guessAssetType(_: string): AssetType;
+export declare function resolveAssetPath(_: string, _: string): string;
+export declare function scanAssets(_: string, _: string): Promise<AssetInfo[]>;
+export declare function setupAssets(_: DevframeNodeContext, _: SetupAssetsOptions): Promise<void>;
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/node.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/node.snapshot.js
new file mode 100644
index 00000000..aa7e411c
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/node.snapshot.js
@@ -0,0 +1,12 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/node`
+ */
+// #region Other
+export { configureAssets }
+export { disposeAssetsWatcher }
+export { getAssetsContext }
+export { guessAssetType }
+export { resolveAssetPath }
+export { scanAssets }
+export { setupAssets }
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/rpc.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/rpc.snapshot.d.ts
new file mode 100644
index 00000000..245abdd6
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/rpc.snapshot.d.ts
@@ -0,0 +1,1034 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/rpc`
+ */
+// #region Interfaces
+export interface AssetsCapabilities {
+  write: boolean;
+  uploadExtensions: readonly string[] | '*';
+}
+export interface RenameArgs {
+  path: string;
+  newName: string;
+}
+// #endregion
+
+// #region Variables
+export declare const alwaysFunctions: readonly [{
+  name: "devframes:plugin:assets:open-in-editor";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>];
+  returns: import("valibot").VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>) | undefined;
+  handler?: ((args_0: string) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], void, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>> | undefined;
+}, {
+  name: "devframes:plugin:assets:reveal-in-folder";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>];
+  returns: import("valibot").VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>) | undefined;
+  handler?: ((args_0: string) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], void, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>> | undefined;
+}];
+export declare const assetInfoSchema: v.ObjectSchema<{
+  readonly path: v.StringSchema<undefined>;
+  readonly type: v.PicklistSchema<["image", "font", "video", "audio", "text", "other"], undefined>;
+  readonly publicPath: v.StringSchema<undefined>;
+  readonly size: v.NumberSchema<undefined>;
+  readonly mtime: v.NumberSchema<undefined>;
+}, undefined>;
+export declare const capabilities: {
+  name: "devframes:plugin:assets:capabilities";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [];
+  returns: v.ObjectSchema<{
+    readonly write: v.BooleanSchema<undefined>;
+    readonly uploadExtensions: v.UnionSchema<[v.ArraySchema<v.StringSchema<undefined>, undefined>, v.LiteralSchema<"*", undefined>], undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>>) | undefined;
+  handler?: (() => {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>> | undefined;
+};
+export declare const deleteAssets: {
+  name: "devframes:plugin:assets:delete";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.ObjectSchema<{
+    readonly paths: v.ArraySchema<v.StringSchema<undefined>, undefined>;
+  }, undefined>];
+  returns: v.ObjectSchema<{
+    readonly deleted: v.ArraySchema<v.StringSchema<undefined>, undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>>) | undefined;
+  handler?: ((args_0: {
+    paths: string[];
+  }) => {
+    deleted: string[];
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>> | undefined;
+};
+export declare const list: {
+  name: "devframes:plugin:assets:list";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [];
+  returns: v.ArraySchema<v.ObjectSchema<{
+    readonly path: v.StringSchema<undefined>;
+    readonly type: v.PicklistSchema<["image", "font", "video", "audio", "text", "other"], undefined>;
+    readonly publicPath: v.StringSchema<undefined>;
+    readonly size: v.NumberSchema<undefined>;
+    readonly mtime: v.NumberSchema<undefined>;
+  }, undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>>) | undefined;
+  handler?: (() => {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[], DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>> | undefined;
+};
+export declare const mkdir: {
+  name: "devframes:plugin:assets:mkdir";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.ObjectSchema<{
+    readonly path: v.StringSchema<undefined>;
+  }, undefined>];
+  returns: v.VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+  }) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+  }], void, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>> | undefined;
+};
+export declare const openInEditor: {
+  name: "devframes:plugin:assets:open-in-editor";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.StringSchema<undefined>];
+  returns: v.VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>) | undefined;
+  handler?: ((args_0: string) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], void, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>> | undefined;
+};
+export declare const readFunctions: readonly [{
+  name: "devframes:plugin:assets:list";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [];
+  returns: import("valibot").ArraySchema<import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+    readonly type: import("valibot").PicklistSchema<["image", "font", "video", "audio", "text", "other"], undefined>;
+    readonly publicPath: import("valibot").StringSchema<undefined>;
+    readonly size: import("valibot").NumberSchema<undefined>;
+    readonly mtime: import("valibot").NumberSchema<undefined>;
+  }, undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>>) | undefined;
+  handler?: (() => {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[], import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>> | undefined;
+}, {
+  name: "devframes:plugin:assets:read-image-meta";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>];
+  returns: import("valibot").NullableSchema<import("valibot").ObjectSchema<{
+    readonly width: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>;
+    readonly height: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>;
+    readonly orientation: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>;
+  }, undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>>) | undefined;
+  handler?: ((args_0: string) => {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>> | undefined;
+}, {
+  name: "devframes:plugin:assets:read-text";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>, import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>];
+  returns: import("valibot").NullableSchema<import("valibot").StringSchema<undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>>) | undefined;
+  handler?: ((args_0: string, args_1: number | undefined) => string | null) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string, number | undefined], string | null, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>> | undefined;
+}, {
+  name: "devframes:plugin:assets:capabilities";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [];
+  returns: import("valibot").ObjectSchema<{
+    readonly write: import("valibot").BooleanSchema<undefined>;
+    readonly uploadExtensions: import("valibot").UnionSchema<[import("valibot").ArraySchema<import("valibot").StringSchema<undefined>, undefined>, import("valibot").LiteralSchema<"*", undefined>], undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>>) | undefined;
+  handler?: (() => {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>> | undefined;
+}];
+export declare const readImageMeta: {
+  name: "devframes:plugin:assets:read-image-meta";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.StringSchema<undefined>];
+  returns: v.NullableSchema<v.ObjectSchema<{
+    readonly width: v.OptionalSchema<v.NumberSchema<undefined>, undefined>;
+    readonly height: v.OptionalSchema<v.NumberSchema<undefined>, undefined>;
+    readonly orientation: v.OptionalSchema<v.NumberSchema<undefined>, undefined>;
+  }, undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>>) | undefined;
+  handler?: ((args_0: string) => {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>> | undefined;
+};
+export declare const readText: {
+  name: "devframes:plugin:assets:read-text";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.StringSchema<undefined>, v.OptionalSchema<v.NumberSchema<undefined>, undefined>];
+  returns: v.NullableSchema<v.StringSchema<undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>>) | undefined;
+  handler?: ((args_0: string, args_1: number | undefined) => string | null) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string, number | undefined], string | null, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>> | undefined;
+};
+export declare const rename: {
+  name: "devframes:plugin:assets:rename";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.ObjectSchema<{
+    readonly path: v.StringSchema<undefined>;
+    readonly newName: v.StringSchema<undefined>;
+  }, undefined>];
+  returns: v.ObjectSchema<{
+    readonly path: v.StringSchema<undefined>;
+    readonly type: v.PicklistSchema<["image", "font", "video", "audio", "text", "other"], undefined>;
+    readonly publicPath: v.StringSchema<undefined>;
+    readonly size: v.NumberSchema<undefined>;
+    readonly mtime: v.NumberSchema<undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+    newName: string;
+  }) => {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>> | undefined;
+};
+export declare const revealInFolder: {
+  name: "devframes:plugin:assets:reveal-in-folder";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.StringSchema<undefined>];
+  returns: v.VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>) | undefined;
+  handler?: ((args_0: string) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], void, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>> | undefined;
+};
+export declare const serverFunctions: readonly [{
+  name: "devframes:plugin:assets:list";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [];
+  returns: import("valibot").ArraySchema<import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+    readonly type: import("valibot").PicklistSchema<["image", "font", "video", "audio", "text", "other"], undefined>;
+    readonly publicPath: import("valibot").StringSchema<undefined>;
+    readonly size: import("valibot").NumberSchema<undefined>;
+    readonly mtime: import("valibot").NumberSchema<undefined>;
+  }, undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>>) | undefined;
+  handler?: (() => {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[], import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }[]>> | undefined;
+}, {
+  name: "devframes:plugin:assets:read-image-meta";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>];
+  returns: import("valibot").NullableSchema<import("valibot").ObjectSchema<{
+    readonly width: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>;
+    readonly height: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>;
+    readonly orientation: import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>;
+  }, undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>>) | undefined;
+  handler?: ((args_0: string) => {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], {
+    width?: number | undefined;
+    height?: number | undefined;
+    orientation?: number | undefined;
+  } | null>> | undefined;
+}, {
+  name: "devframes:plugin:assets:read-text";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>, import("valibot").OptionalSchema<import("valibot").NumberSchema<undefined>, undefined>];
+  returns: import("valibot").NullableSchema<import("valibot").StringSchema<undefined>, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>>) | undefined;
+  handler?: ((args_0: string, args_1: number | undefined) => string | null) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string, number | undefined], string | null, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string, number | undefined], string | null>> | undefined;
+}, {
+  name: "devframes:plugin:assets:capabilities";
+  type?: "query" | undefined;
+  cacheable?: boolean;
+  args: readonly [];
+  returns: import("valibot").ObjectSchema<{
+    readonly write: import("valibot").BooleanSchema<undefined>;
+    readonly uploadExtensions: import("valibot").UnionSchema<[import("valibot").ArraySchema<import("valibot").StringSchema<undefined>, undefined>, import("valibot").LiteralSchema<"*", undefined>], undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>>) | undefined;
+  handler?: (() => {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[], {
+    write: boolean;
+    uploadExtensions: string[] | "*";
+  }>> | undefined;
+}, {
+  name: "devframes:plugin:assets:open-in-editor";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>];
+  returns: import("valibot").VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>) | undefined;
+  handler?: ((args_0: string) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], void, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>> | undefined;
+}, {
+  name: "devframes:plugin:assets:reveal-in-folder";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").StringSchema<undefined>];
+  returns: import("valibot").VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>) | undefined;
+  handler?: ((args_0: string) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[string], void, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[string], void>> | undefined;
+}, {
+  name: "devframes:plugin:assets:upload";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+  }, undefined>];
+  returns: import("valibot").ObjectSchema<{
+    readonly uploadId: import("valibot").StringSchema<undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+  }) => {
+    uploadId: string;
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>> | undefined;
+}, {
+  name: "devframes:plugin:assets:rename";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+    readonly newName: import("valibot").StringSchema<undefined>;
+  }, undefined>];
+  returns: import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+    readonly type: import("valibot").PicklistSchema<["image", "font", "video", "audio", "text", "other"], undefined>;
+    readonly publicPath: import("valibot").StringSchema<undefined>;
+    readonly size: import("valibot").NumberSchema<undefined>;
+    readonly mtime: import("valibot").NumberSchema<undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+    newName: string;
+  }) => {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>> | undefined;
+}, {
+  name: "devframes:plugin:assets:delete";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly paths: import("valibot").ArraySchema<import("valibot").StringSchema<undefined>, undefined>;
+  }, undefined>];
+  returns: import("valibot").ObjectSchema<{
+    readonly deleted: import("valibot").ArraySchema<import("valibot").StringSchema<undefined>, undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>>) | undefined;
+  handler?: ((args_0: {
+    paths: string[];
+  }) => {
+    deleted: string[];
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>> | undefined;
+}, {
+  name: "devframes:plugin:assets:mkdir";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+  }, undefined>];
+  returns: import("valibot").VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+  }) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+  }], void, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>> | undefined;
+}];
+export declare const upload: {
+  name: "devframes:plugin:assets:upload";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [v.ObjectSchema<{
+    readonly path: v.StringSchema<undefined>;
+  }, undefined>];
+  returns: v.ObjectSchema<{
+    readonly uploadId: v.StringSchema<undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+  }) => {
+    uploadId: string;
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }, DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>> | undefined;
+};
+export declare const UPLOAD_CHANNEL: string;
+export declare const writeFunctions: readonly [{
+  name: "devframes:plugin:assets:upload";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+  }, undefined>];
+  returns: import("valibot").ObjectSchema<{
+    readonly uploadId: import("valibot").StringSchema<undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+  }) => {
+    uploadId: string;
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], {
+    uploadId: string;
+  }>> | undefined;
+}, {
+  name: "devframes:plugin:assets:rename";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+    readonly newName: import("valibot").StringSchema<undefined>;
+  }, undefined>];
+  returns: import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+    readonly type: import("valibot").PicklistSchema<["image", "font", "video", "audio", "text", "other"], undefined>;
+    readonly publicPath: import("valibot").StringSchema<undefined>;
+    readonly size: import("valibot").NumberSchema<undefined>;
+    readonly mtime: import("valibot").NumberSchema<undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+    newName: string;
+  }) => {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+    newName: string;
+  }], {
+    path: string;
+    type: "image" | "font" | "video" | "audio" | "text" | "other";
+    publicPath: string;
+    size: number;
+    mtime: number;
+  }>> | undefined;
+}, {
+  name: "devframes:plugin:assets:delete";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly paths: import("valibot").ArraySchema<import("valibot").StringSchema<undefined>, undefined>;
+  }, undefined>];
+  returns: import("valibot").ObjectSchema<{
+    readonly deleted: import("valibot").ArraySchema<import("valibot").StringSchema<undefined>, undefined>;
+  }, undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>>) | undefined;
+  handler?: ((args_0: {
+    paths: string[];
+  }) => {
+    deleted: string[];
+  }) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    paths: string[];
+  }], {
+    deleted: string[];
+  }>> | undefined;
+}, {
+  name: "devframes:plugin:assets:mkdir";
+  type?: "action" | undefined;
+  cacheable?: boolean;
+  args: readonly [import("valibot").ObjectSchema<{
+    readonly path: import("valibot").StringSchema<undefined>;
+  }, undefined>];
+  returns: import("valibot").VoidSchema<undefined>;
+  jsonSerializable?: boolean;
+  agent?: import("devframe").RpcFunctionAgentOptions;
+  setup?: ((context: import("devframe").DevframeNodeContext) => import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>>) | undefined;
+  handler?: ((args_0: {
+    path: string;
+  }) => void) | undefined;
+  dump?: import("devframe/rpc").RpcDump<[{
+    path: string;
+  }], void, import("devframe").DevframeNodeContext> | undefined;
+  snapshot?: boolean;
+  __cache?: WeakMap<object, import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>>> | undefined;
+  __promise?: import("devframe/rpc").Thenable<import("devframe/rpc").RpcFunctionSetupResult<[{
+    path: string;
+  }], void>> | undefined;
+}];
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/rpc.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/rpc.snapshot.js
new file mode 100644
index 00000000..5a3e1580
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/rpc.snapshot.js
@@ -0,0 +1,21 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/rpc`
+ */
+// #region Other
+export { alwaysFunctions }
+export { assetInfoSchema }
+export { capabilities }
+export { deleteAssets }
+export { list }
+export { mkdir }
+export { openInEditor }
+export { readFunctions }
+export { readImageMeta }
+export { readText }
+export { rename }
+export { revealInFolder }
+export { serverFunctions }
+export { upload }
+export { UPLOAD_CHANNEL }
+export { writeFunctions }
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/vite.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/vite.snapshot.d.ts
new file mode 100644
index 00000000..2a6c2767
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/vite.snapshot.d.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/vite`
+ */
+// #region Types
+export type AssetsVitePluginOptions = ViteDevBridgeOptions;
+// #endregion
+
+// #region Functions
+export declare function assetsVitePlugin(_?: AssetsVitePluginOptions): DevframeVitePlugin;
+// #endregion
+
+// #region Other
+export { ViteDevBridgeOptions }
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-assets/vite.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/vite.snapshot.js
new file mode 100644
index 00000000..07639053
--- /dev/null
+++ b/tests/__snapshots__/tsnapi/@devframes/plugin-assets/vite.snapshot.js
@@ -0,0 +1,6 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@devframes/plugin-assets/vite`
+ */
+// #region Functions
+export function assetsVitePlugin(_) {}
+// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/devframe/adapters/build.snapshot.d.ts b/tests/__snapshots__/tsnapi/devframe/adapters/build.snapshot.d.ts
index 621f03a0..5b6b32a9 100644
--- a/tests/__snapshots__/tsnapi/devframe/adapters/build.snapshot.d.ts
+++ b/tests/__snapshots__/tsnapi/devframe/adapters/build.snapshot.d.ts
@@ -7,6 +7,7 @@ export interface CreateBuildOptions {
   base?: string;
   distDir?: string;
   pretty?: boolean;
+  force?: boolean;
 }
 // #endregion
 
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 8772ba59..87e66489 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -309,6 +309,24 @@
       ],
       "@devframes/plugin-messages": [
         "./plugins/messages/src/index.ts"
+      ],
+      "@devframes/plugin-assets/client": [
+        "./plugins/assets/src/client/index.ts"
+      ],
+      "@devframes/plugin-assets/node": [
+        "./plugins/assets/src/node/index.ts"
+      ],
+      "@devframes/plugin-assets/rpc": [
+        "./plugins/assets/src/rpc/index.ts"
+      ],
+      "@devframes/plugin-assets/cli": [
+        "./plugins/assets/src/cli.ts"
+      ],
+      "@devframes/plugin-assets/vite": [
+        "./plugins/assets/src/vite.ts"
+      ],
+      "@devframes/plugin-assets": [
+        "./plugins/assets/src/index.ts"
       ]
     },
     "resolveJsonModule": true,
diff --git a/turbo.json b/turbo.json
index 6de2f6f8..ebf76142 100644
--- a/turbo.json
+++ b/turbo.json
@@ -62,6 +62,11 @@
       "dependsOn": ["devframe#build", "@devframes/hub#build"],
       "outputs": ["dist/**"]
     },
+    "@devframes/plugin-assets#build": {
+      "outputLogs": "new-only",
+      "dependsOn": ["devframe#build"],
+      "outputs": ["dist/**"]
+    },
     "vite-devframe-hub#build": {
       "outputLogs": "new-only",
       "dependsOn": [
@@ -74,7 +79,8 @@
         "@devframes/plugin-og#build",
         "@devframes/plugin-data-inspector#build",
         "@devframes/plugin-a11y#build",
-        "@devframes/plugin-messages#build"
+        "@devframes/plugin-messages#build",
+        "@devframes/plugin-assets#build"
       ],
       "outputs": ["dist/**"]
     },
diff --git a/vitest.config.ts b/vitest.config.ts
index 1015dfc3..c12a73d5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
       'plugins/git',
       'plugins/a11y',
       'plugins/messages',
+      'plugins/assets',
       'examples/next-devframe-hub',
       'packages/next',
       {