refactor(assets): rebuild the SPA in Vue on @antfu/design

Swap the Preact SPA for Vue 3 SFCs consuming @antfu/design's Vue
components directly (ActionButton, ActionIconButton, DisplayBadge,
FormTextInput, FormCheckbox, LayoutTabs, LayoutToolbar, OverlayModal),
matching the inspect/og plugins. Deletes the hand-rolled Preact UI kit
(components/ui/*) in favour of the shared components; hooks become Vue
composables; utils and the framework-neutral node/RPC layer are
unchanged, so the package's public API (and its snapshots) is untouched.

- package.json: preact/@preact/preset-vite/@storybook/preact-vite →
  vue/@vitejs/plugin-vue/@storybook/vue3-vite, plus reka-ui, floating-vue,
  colorjs.io (peer deps of the @antfu/design components used). tsconfig
  drops the Preact JSX options; uno content globs add .vue.
- Preserves every behaviour: resizable side panel, inline type-filter
  chips, direct file-dialog upload + whole-frame drag hint, live refresh,
  multi-select bulk delete, host-served previews.
- cleanupUnusedCatalogs pruned the now-unused @storybook/preact-vite
  catalog entry.

Co-authored-by: opencode <noreply@opencode.ai>

Author: antfubot

docs/plugins/assets.md

@@ -4,9 +4,9 @@ outline: deep
 
 # Assets
 
-Browse, preview, upload, rename, and delete the files in a directory, built as a **Preact** SPA — a framework-neutral port of Nuxt DevTools' Assets tab.
+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: **Preact**
+Package: `@devframes/plugin-assets` · framework: **Vue + @antfu/design**
 
 ## What it does
 

docs/plugins/index.md

@@ -17,11 +17,11 @@ 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) | Preact | Browse, preview, upload, rename, and delete the files in a managed directory. |
+| [Assets](./assets) | Vue | Browse, preview, upload, rename, and delete the files in a managed directory. |
 
 ## One client, any framework
 
-The collection spans Vue, Solid, React, Svelte, and Preact, yet every plugin shares the same node-side surface: register RPC functions, publish shared state, and connect from the browser with `connectDevframe`. Whatever renders the UI, it talks to the backend through the same protocol — the framework-free Vite hub example drives it with a handful of DOM calls.
+The collection spans Vue, Solid, React, and Svelte, yet every plugin shares the same node-side surface: register RPC functions, publish shared state, and connect from the browser with `connectDevframe`. Whatever renders the UI, it talks to the backend through the same protocol — the framework-free Vite hub example drives it with a handful of DOM calls.
 
 This is the framework-agnostic promise in practice. The browser bundle is the author's to choose; devframe handles the transport, the data model, the adapters, and the agent surface underneath.
 

plugins/assets/.storybook/main.ts

@@ -1,21 +1,24 @@
-import type { StorybookConfig } from '@storybook/preact-vite'
-import preact from '@preact/preset-vite'
+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/preact-vite',
+    name: '@storybook/vue3-vite',
     options: {},
   },
-  viteFinal(viteConfig) {
-    viteConfig.plugins ??= []
-    viteConfig.plugins.push(preact(), UnoCSS())
-    // Dev tool reached from arbitrary hostnames (LAN IPs, tunnels, tailnets),
-    // e.g. when iframed by the storybook-hub example: accept any Host header.
-    viteConfig.server = { ...viteConfig.server, allowedHosts: true }
-    return viteConfig
+  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 },
+    })
   },
 }
 

plugins/assets/.storybook/preview.tsx plugins/assets/.storybook/preview.tsplugins/assets/.storybook/preview.tsx renamed to plugins/assets/.storybook/preview.ts

@@ -1,19 +1,16 @@
-import type { Decorator, Preview } from '@storybook/preact-vite'
-import { useEffect } from 'preact/hooks'
-import '@antfu/design/styles.css'
+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 withTheme: Decorator = (story, context) => {
   const theme = context.globals.theme ?? 'dark'
-  useEffect(() => {
-    document.documentElement.classList.toggle('dark', theme === 'dark')
-  }, [theme])
-  return (
-    <div class="flex h-svh justify-center bg-base p-6 color-base font-sans">
-      <div class="flex h-full w-full max-w-2xl flex-col overflow-hidden rounded-lg border border-base p-3">
-        <Story />
-      </div>
-    </div>
+  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())])],
   )
 }
 

plugins/assets/README.md

@@ -1,6 +1,6 @@
 # `@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 **Preact** SPA.
+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

plugins/assets/package.json

@@ -41,7 +41,7 @@
     "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",
+    "storybook": "storybook dev -p 6013 --host 0.0.0.0",
     "storybook:build": "storybook build",
     "prepack": "pnpm build",
     "test": "vitest run",
@@ -70,20 +70,23 @@
   "devDependencies": {
     "@antfu/design": "catalog:frontend",
     "@iconify-json/ph": "catalog:frontend",
-    "@preact/preset-vite": "catalog:build",
     "@storybook/addon-a11y": "catalog:storybook",
     "@storybook/addon-docs": "catalog:storybook",
-    "@storybook/preact-vite": "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",
-    "preact": "catalog:frontend",
+    "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"
   }
 }