From c15331343b6ffac0cb1e82a4d7abdd232155e100 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 20:01:49 +0100
Subject: [PATCH] feat: add storage tab (#100)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 .gitignore                                    |   1 +
 .../playground/pages/index.vue                |   2 +-
 .../src/components/NDropdown.vue              |   2 +-
 packages/devtools/build.config.ts             |   2 +
 packages/devtools/client/app.vue              |   2 +
 .../devtools/client/components/DrawerItem.vue |   6 +-
 .../devtools/client/components/IframeView.vue |   1 -
 .../client/components/SettingsPanel.vue       |   4 +
 .../client/components/StateEditor.vue         |  22 --
 packages/devtools/client/composables/state.ts |   6 +-
 .../devtools/client/composables/storage.ts    |   1 +
 packages/devtools/client/nuxt.config.ts       |   9 +-
 .../devtools/client/pages/modules/storage.vue | 219 ++++++++++++++++++
 packages/devtools/client/setup/client-rpc.ts  |   3 +
 packages/devtools/client/styles/global.css    |  20 ++
 packages/devtools/client/unocss.config.ts     |   2 +
 packages/devtools/src/rpc.ts                  |  61 +++++
 packages/devtools/src/types.ts                |   9 +
 18 files changed, 336 insertions(+), 36 deletions(-)
 create mode 100644 packages/devtools/client/pages/modules/storage.vue

diff --git a/.gitignore b/.gitignore
index 76555f3471..427f298836 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@ dist
 .build-*
 .env
 .netlify
+.data
 
 # Env
 .env
diff --git a/packages/devtools-ui-kit/playground/pages/index.vue b/packages/devtools-ui-kit/playground/pages/index.vue
index f5d3f39f6f..da526316f3 100644
--- a/packages/devtools-ui-kit/playground/pages/index.vue
+++ b/packages/devtools-ui-kit/playground/pages/index.vue
@@ -8,7 +8,7 @@ const radio = ref('a')
 
 <template>
   <div class="relative p-10 n-bg-base">
-    <div class="w-full flex container mx-auto flex-col gap-4">
+    <div class="w-full flex gap-4 mx-auto flex-col container">
       <NTip n="hover:yellow-600 dark:hover:yellow-500">
         This library is heavily working in progress. Breaking changes may not follow semver. Pin the version if used.
       </NTip>
diff --git a/packages/devtools-ui-kit/src/components/NDropdown.vue b/packages/devtools-ui-kit/src/components/NDropdown.vue
index bdde19c793..d3e89959f0 100644
--- a/packages/devtools-ui-kit/src/components/NDropdown.vue
+++ b/packages/devtools-ui-kit/src/components/NDropdown.vue
@@ -22,7 +22,7 @@ onClickOutside(el, () => {
     </slot>
 
     <div
-      class="absolute n-transition n-bg-base rounded z-10 border n-border-base shadow"
+      class="absolute n-transition n-bg-base rounded border z-10 n-border-base shadow"
       :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1']"
     >
       <slot />
diff --git a/packages/devtools/build.config.ts b/packages/devtools/build.config.ts
index 6c0154cb38..2216feb23e 100644
--- a/packages/devtools/build.config.ts
+++ b/packages/devtools/build.config.ts
@@ -21,6 +21,8 @@ export default defineBuildConfig({
     // Type only
     'vue',
     'vue-router',
+    'unstorage',
+    'nitropack',
   ],
   rollup: {
     inlineDependencies: true,
diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 9f30907338..0fb18ffc00 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import 'floating-vue/dist/style.css'
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
+import 'splitpanes/dist/splitpanes.css'
 import './styles/global.css'
 import { setupClientRPC } from './setup/client-rpc'
 
diff --git a/packages/devtools/client/components/DrawerItem.vue b/packages/devtools/client/components/DrawerItem.vue
index ab4d435648..f27055d633 100644
--- a/packages/devtools/client/components/DrawerItem.vue
+++ b/packages/devtools/client/components/DrawerItem.vue
@@ -18,12 +18,10 @@ const isEnabled = computed(() => {
   <NuxtLink
     v-if="isEnabled"
     :to="'path' in tab ? tab.path : `/modules/custom-${tab.name}`"
-    flex="~" p2
-    items-center justify-center
-    text-true-gray
+    flex="~" p2 items-center justify-center text-secondary
     border="base"
     lg="border-b px3 py1.5 justify-start"
-    hover:bg-active
+    hover="bg-active"
     select-none
     exact-active-class="!text-primary"
   >
diff --git a/packages/devtools/client/components/IframeView.vue b/packages/devtools/client/components/IframeView.vue
index a830b7d904..c94f17cac9 100644
--- a/packages/devtools/client/components/IframeView.vue
+++ b/packages/devtools/client/components/IframeView.vue
@@ -10,7 +10,6 @@ const props = defineProps<{
   tab: ModuleCustomTab
 }>()
 
-const client = useClient()
 const colorMode = useColorMode()
 const anchor = ref<HTMLDivElement>()
 const key = computed(() => props.tab.name)
diff --git a/packages/devtools/client/components/SettingsPanel.vue b/packages/devtools/client/components/SettingsPanel.vue
index 38234a0939..ba78e4a20a 100644
--- a/packages/devtools/client/components/SettingsPanel.vue
+++ b/packages/devtools/client/components/SettingsPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const {
   interactionCloseOnOutsideClick,
+  showExperimentalFeatures,
 } = useDevToolsSettings()
 </script>
 
@@ -9,5 +10,8 @@ const {
     <NCheckbox v-model="interactionCloseOnOutsideClick" n-primary>
       <span>Close DevTools when clicking outside</span>
     </NCheckbox>
+    <NCheckbox v-model="showExperimentalFeatures" n-primary>
+      <span>Show experimental features</span>
+    </NCheckbox>
   </div>
 </template>
diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index af82938702..f2dde00d34 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
-import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 
 const props = defineProps<{
   name?: string
@@ -94,24 +93,3 @@ async function refresh() {
     </template>
   </div>
 </template>
-
-<style>
-.json-editor-vue {
-  --jse-theme-color: #383e42 !important;
-  --jse-theme-color-highlight: #687177 !important;
-  --jse-background-color: #8881 !important;
-}
-
-.json-editor-vue .no-main-menu {
-  border: none !important;
-}
-
-.json-editor-vue .jse-main {
-  min-height: 1em !important;
-}
-
-.json-editor-vue .jse-contents {
-  border-width: 0 !important;
-  border-radius: 5px !important;
-}
-</style>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index f64f32aa36..787f3b61de 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -74,10 +74,12 @@ export function useCustomTabs() {
 export function useTabs() {
   const router = useRouter()
   const customTabs = useCustomTabs()
+  const settings = useDevToolsSettings()
 
   const builtin = computed(() => {
     return router.getRoutes()
       .filter(route => route.path.startsWith('/modules/') && route.meta.title && !route.meta.wip)
+      .filter(route => !route.meta.experimental || (route.meta.experimental && settings.showExperimentalFeatures.value))
       .sort((a, b) => (a.meta.order || 100) - (b.meta.order || 100))
       .map((i): ModuleBuiltinTab => {
         return {
@@ -131,7 +133,3 @@ export function useAllRoutes() {
       })
   })
 }
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
diff --git a/packages/devtools/client/composables/storage.ts b/packages/devtools/client/composables/storage.ts
index de454f629f..2bc3808b12 100644
--- a/packages/devtools/client/composables/storage.ts
+++ b/packages/devtools/client/composables/storage.ts
@@ -10,6 +10,7 @@ const devToolsSettings = useLocalStorage<DevToolsUISettings>('nuxt-devtools-sett
   componentsGraphShowLayouts: false,
   componentsGraphShowWorkspace: true,
   interactionCloseOnOutsideClick: false,
+  showExperimentalFeatures: false,
 }, { mergeDefaults: true })
 
 const devToolsSettingsRefs = toRefs(devToolsSettings)
diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts
index 6a98fad33c..9dd766d16b 100644
--- a/packages/devtools/client/nuxt.config.ts
+++ b/packages/devtools/client/nuxt.config.ts
@@ -16,10 +16,13 @@ export default defineNuxtConfig({
     output: {
       publicDir: resolve(__dirname, '../dist/client'),
     },
+    devStorage: {
+      test: {
+        driver: 'fs',
+        base: resolve(__dirname, './.data/test'),
+      },
+    },
   },
-  css: [
-    'splitpanes/dist/splitpanes.css',
-  ],
   appConfig: {
     fixture2: 'from nuxt.config.ts',
   },
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
new file mode 100644
index 0000000000..f277d19626
--- /dev/null
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import JsonEditorVue from 'json-editor-vue'
+
+definePageMeta({
+  icon: 'carbon-data-base',
+  title: 'Storage',
+  experimental: true,
+})
+
+const nuxtApp = useNuxtApp()
+const router = useRouter()
+const searchString = ref('')
+const newKey = ref('')
+const currentStorage = computed({
+  get(): string | undefined {
+    return useRoute().query?.storage as string | undefined
+  },
+  set(storage: string | undefined): void {
+    router.replace({ query: { storage } })
+  },
+})
+const currentItem = ref()
+const fileKey = computed(() => useRoute().query?.key as string | undefined)
+
+const { data: storageMounts } = await useAsyncData('storageMounts', () => rpc.getStorageMounts())
+const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('storageKeys', async () => {
+  if (currentStorage.value)
+    return await rpc.getStorageKeys(currentStorage.value)
+  return []
+})
+
+const closeWatcher = nuxtApp.hook('storage:key:update' as any, async (key: string, event: any) => {
+  if (!currentStorage.value || key.split(':')[0] !== currentStorage.value)
+    return
+  await refreshStorageKeys()
+  if (fileKey.value === key) {
+    if (event === 'remove')
+      return router.replace({ query: { storage: currentStorage.value } })
+    await fetchItem(fileKey.value)
+  }
+})
+
+onUnmounted(closeWatcher)
+
+watch(currentStorage, refreshStorageKeys)
+
+watchEffect(async () => {
+  if (!fileKey.value) {
+    currentItem.value = null
+    return
+  }
+  fetchItem(fileKey.value)
+})
+
+// Save on Ctrl/Cmd + S
+useEventListener('keydown', (e) => {
+  if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+    saveCurrentItem()
+    e.preventDefault()
+  }
+})
+
+function keyName(key: string) {
+  return key.replace(`${currentStorage.value}:`, '')
+}
+
+const filteredKeys = computed(() => {
+  if (!storageKeys.value)
+    return []
+  return storageKeys.value.filter(key => key.includes(searchString.value))
+})
+
+async function fetchItem(key: string) {
+  const content = await rpc.getStorageItem(key)
+  currentItem.value = {
+    key,
+    updatedKey: keyName(key),
+    editingKey: false,
+    content,
+    updatedContent: content,
+  }
+}
+
+async function saveNewItem() {
+  if (!newKey.value || !currentStorage.value)
+    return
+  // If does not exists
+  const key = `${currentStorage.value}:${newKey.value}`
+  if (!storageKeys.value?.includes(key))
+    await rpc.setStorageItem(key, '')
+
+  router.replace({ query: { storage: currentStorage.value, key } })
+  newKey.value = ''
+}
+
+async function saveCurrentItem() {
+  if (!currentItem.value)
+    return
+  await rpc.setStorageItem(currentItem.value.key, currentItem.value.updatedContent)
+  await fetchItem(currentItem.value.key)
+}
+
+async function removeCurrentItem() {
+  if (!currentItem.value || !currentStorage.value)
+    return
+  await rpc.removeStorageItem(currentItem.value.key)
+  currentItem.value = null
+}
+
+async function renameCurrentItem() {
+  if (!currentItem.value || !currentStorage.value)
+    return
+  const renamedKey = `${currentStorage.value}:${currentItem.value.updatedKey}`
+  await rpc.setStorageItem(renamedKey, currentItem.value.updatedContent)
+  await rpc.removeStorageItem(currentItem.value.key)
+  router.replace({ query: { storage: currentStorage.value, key: renamedKey } })
+}
+</script>
+
+<template>
+  <div v-if="currentStorage" grid="~ cols-[auto_1fr]" h-full of-hidden class="virtual-files">
+    <div border="r base" of-auto w="300px">
+      <div class="flex items-center justify-between px-3 h-[48px] gap1">
+        <button n-icon-btn ml--1 @click="currentStorage = ''">
+          <div i-carbon-chevron-left />
+        </button>
+        <div class="w-full text-sm">
+          <NSelect v-model="currentStorage" n="primary" icon="carbon-data-base">
+            <option v-for="(_storage, name) of storageMounts" :key="name" :value="name">
+              {{ name }}
+            </option>
+          </NSelect>
+        </div>
+      </div>
+      <NTextInput
+        v-model="searchString"
+        icon="carbon-search"
+        placeholder="Search..."
+        n="primary sm"
+        border="y x-none base! rounded-0"
+        class="w-full py2 ring-0!"
+      />
+      <NuxtLink
+        v-for="key of filteredKeys" :key="key"
+        border="b base" px2 py1 text-sm font-mono block truncate
+        :to="{ query: { key, storage: currentStorage } }"
+        hover:bg-active
+        :class="key === currentItem?.key ? 'bg-active text-primary font-bold' : 'text-secondary'"
+      >
+        {{ keyName(key) }}
+      </NuxtLink>
+      <NTextInput
+        v-model="newKey"
+        icon="carbon-add"
+        placeholder="key"
+        n="sm"
+        border="t-none x-none base! rounded-0"
+        class="w-full py2 ring-0!"
+        @keyup.enter="saveNewItem"
+      />
+    </div>
+    <div v-if="currentItem?.key" h-full of-hidden flex="~ col">
+      <div border="b base" class="text-sm flex items-center px-4 justify-between flex-none h-[49px]">
+        <div class="flex items-center gap-4">
+          <NTextInput v-if="currentItem.editingKey" v-model="currentItem.updatedKey" @keyup.enter="renameCurrentItem" />
+          <code v-else>{{ keyName(currentItem.key) }} <NIcon icon="carbon-edit" class="op50 hover:op100 cursor-pointer" @click="currentItem.editingKey = true" /></code>
+          <NButton v-if="!currentItem.editingKey" n="green xs" :disabled="currentItem.content === currentItem.updatedContent" :class="{ 'border-green': currentItem.content !== currentItem.updatedContent }" @click="saveCurrentItem">
+            Save
+          </NButton>
+        </div>
+        <div>
+          <NButton n="red xs" @click="removeCurrentItem">
+            Delete
+          </NButton>
+        </div>
+      </div>
+      <JsonEditorVue
+        v-if="typeof currentItem.content === 'object'"
+        v-model="currentItem.updatedContent"
+        :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+        class="json-editor-vue of-auto h-full text-sm outline-none"
+        v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2"
+      />
+      <textarea
+        v-else v-model="currentItem.updatedContent"
+        placeholder="Item value..."
+        class="of-auto h-full text-sm outline-none p-4 font-mono"
+        @keyup.ctrl.enter="saveCurrentItem"
+      />
+    </div>
+    <div v-else flex items-center justify-center op50 text-center>
+      <p>
+        Select one key to start.<br>Learn more about <NLink href="https://nitro.unjs.io/guide/introduction/storage" n="orange" target="_blank">
+          Nitro storage
+        </NLink>
+      </p>
+    </div>
+  </div>
+  <div v-else grid="~" class="h-full of-hidden">
+    <div class="flex gap-4 justify-center op50 text-center flex-col">
+      <p v-if="Object.keys(storageMounts as any).length">
+        Select one storage to start:
+      </p>
+      <p v-else>
+        No custom storage defined in <code>nitro.storage</code>.<br>
+        Learn more about <NLink href="https://nitro.unjs.io/guide/introduction/storage" n="orange" target="_blank">
+          Nitro storage
+        </NLink>
+      </p>
+      <div class="mx-auto">
+        <NCard v-for="(storage, name) of storageMounts" :key="name" class="text-left p-4 cursor-pointer border mb-4 hover:border-green" @click="currentStorage = name">
+          <span class="font-bold">{{ name }}</span><br>
+          <span class="text-sm">{{ storage.driver }} driver</span><br>
+          <span v-if="storage.base" class="text-xs font-mono">{{ storage.base }}</span>
+        </NCard>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/setup/client-rpc.ts b/packages/devtools/client/setup/client-rpc.ts
index 2ad6d4a2a5..31cb582520 100644
--- a/packages/devtools/client/setup/client-rpc.ts
+++ b/packages/devtools/client/setup/client-rpc.ts
@@ -8,5 +8,8 @@ export function setupClientRPC() {
       // refresh useAsyncData
       nuxt.hooks.callHookParallel('app:data:refresh', [type])
     },
+    async callHook(hook: string, ...args: any[]) {
+      nuxt.hooks.callHookParallel(hook as any, ...args)
+    },
   } satisfies ClientFunctions)
 }
diff --git a/packages/devtools/client/styles/global.css b/packages/devtools/client/styles/global.css
index 525c373d3c..ee176d1d01 100644
--- a/packages/devtools/client/styles/global.css
+++ b/packages/devtools/client/styles/global.css
@@ -62,3 +62,23 @@ html.dark {
 }
 .splitpanes--vertical > .splitpanes__splitter:before {left: -4px;right: -4px;height: 100%;}
 .splitpanes--horizontal > .splitpanes__splitter:before {top: -4px;bottom: -4px;width: 100%;}
+
+/* JSON Editor */
+textarea {
+  background: #8881
+}
+.json-editor-vue {
+  --jse-theme-color: #8886 !important;
+  --jse-theme-color-highlight: #8889 !important;
+  --jse-background-color: #8881 !important;
+}
+.json-editor-vue .no-main-menu {
+  border: none !important;
+}
+.json-editor-vue .jse-main {
+  min-height: 1em !important;
+}
+.json-editor-vue .jse-contents {
+  border-width: 0 !important;
+  border-radius: 5px !important;
+}
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index 4d5c6e6d3c..fc7ee7e961 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -11,6 +11,8 @@ export default defineConfig({
       'glass-effect': 'backdrop-blur-6 bg-white/70 dark:bg-[#151515]/70',
       'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
+      'text-secondary': 'color-black/50 dark:color-white/50',
+
       'n-icon-btn': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:bg-active',
 
       // Reusable
diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index d31c380979..202ad49d93 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -5,6 +5,8 @@ import type { WebSocket } from 'ws'
 import { createBirpcGroup } from 'birpc'
 import type { ChannelOptions } from 'birpc'
 import c from 'picocolors'
+import type { Storage, StorageValue } from 'unstorage'
+import type { StorageMounts } from 'nitropack'
 
 import { parse, stringify } from 'flatted'
 import type { Component, Nuxt, NuxtApp, NuxtPage } from 'nuxt/schema'
@@ -20,6 +22,9 @@ import { wizard } from './wizard'
 import { LOG_PREFIX } from './logger'
 import { checkForUpdates, usePackageVersions } from './npm'
 
+const IGNORE_STORAGE_MOUNTS = ['root', 'build', 'src', 'cache']
+const shouldIgnoreStorageKey = (key: string) => IGNORE_STORAGE_MOUNTS.includes(key.split(':')[0])
+
 export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
   const components: Component[] = []
   const imports: Import[] = []
@@ -28,6 +33,8 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
   const iframeTabs: ModuleCustomTab[] = []
   const customTabs: ModuleCustomTab[] = []
   const serverHooks: Record<string, HookInfo> = setupHooksDebug(nuxt.hooks)
+  let storage: Storage | undefined
+  const storageMounts: StorageMounts = {}
   let unimport: Unimport | undefined
   let app: NuxtApp | undefined
 
@@ -42,7 +49,61 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
     birpc.broadcast.refresh.asEvent(event)
   }
 
+  nuxt.hook('nitro:init', (nitro) => {
+    storage = nitro.storage
+
+    nuxt.hook('ready', () => {
+      storage!.watch((event, key) => {
+        if (shouldIgnoreStorageKey(key))
+          return
+        birpc.broadcast.callHook.asEvent('storage:key:update', key, event)
+      })
+    })
+
+    // Taken from https://github.com/unjs/nitro/blob/d83f2b65165d7ba996e7ef129ea99ff5b551dccc/src/storage.ts#L7-L10
+    // Waiting for https://github.com/unjs/unstorage/issues/53
+    const mounts = {
+      ...nitro.options.storage,
+      ...nitro.options.devStorage,
+    }
+    for (const name of Object.keys(mounts)) {
+      if (shouldIgnoreStorageKey(name))
+        continue
+      storageMounts[name] = mounts[name]
+    }
+  })
+
   Object.assign(serverFunctions, {
+    async getStorageMounts() {
+      return storageMounts
+    },
+    async getStorageKeys(base?: string) {
+      if (!storage)
+        return []
+      try {
+        const keys = await storage.getKeys(base)
+
+        return keys.filter(key => !shouldIgnoreStorageKey(key))
+      } catch (err) {
+        console.error(`Cloud not fetch storage keys for ${base}:`, err)
+        return []
+      }
+    },
+    async getStorageItem(key: string) {
+      if (!storage)
+        return null
+      return await storage.getItem(key)
+    },
+    async setStorageItem(key: string, value: StorageValue) {
+      if (!storage)
+        return
+      return await storage.setItem(key, value)
+    },
+    async removeStorageItem(key: string) {
+      if (!storage)
+        return
+      return await storage.removeItem(key)
+    },
     getServerConfig() {
       return nuxt.options
     },
diff --git a/packages/devtools/src/types.ts b/packages/devtools/src/types.ts
index 8dca9f021d..df011dee57 100644
--- a/packages/devtools/src/types.ts
+++ b/packages/devtools/src/types.ts
@@ -6,6 +6,8 @@ import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import type { Hookable } from 'hookable'
 import type { BirpcReturn } from 'birpc'
 import type { VNode } from 'vue'
+import type { StorageValue } from 'unstorage'
+import type { StorageMounts } from 'nitropack'
 import type { WizardActions, WizardArgs } from './wizard'
 import type {} from '@nuxt/schema'
 
@@ -45,6 +47,11 @@ export interface ModuleGlobalOptions {
 }
 
 export interface ServerFunctions {
+  getStorageMounts(): Promise<StorageMounts>
+  getStorageKeys(base?: string): Promise<string[]>
+  getStorageItem(key: string): Promise<StorageValue>
+  setStorageItem(key: string, value: StorageValue): Promise<void>
+  removeStorageItem(key: string): Promise<void>
   getServerConfig(): NuxtOptions
   getComponents(): Component[]
   getComponentsRelationships(): Promise<ComponentRelationship[]>
@@ -75,6 +82,7 @@ export type ClientUpdateEvent = keyof ServerFunctions
 
 export interface ClientFunctions {
   refresh(event: ClientUpdateEvent): void
+  callHook(hook: string, ...args: any[]): Promise<void>
 }
 
 export interface RouteInfo extends Pick<RouteRecordNormalized, 'name' | 'path' | 'meta' | 'props' | 'children'> {
@@ -327,6 +335,7 @@ export interface DevToolsUISettings {
   componentsGraphShowLayouts: boolean
   componentsGraphShowWorkspace: boolean
   interactionCloseOnOutsideClick: boolean
+  showExperimentalFeatures: boolean
 }
 
 export interface ComponentRelationship {