From 7be42e2f936544a4288779ac76084ecb2f5e4168 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 30 Sep 2025 11:14:09 +0200
Subject: [PATCH] feat: components suggestions inside monaco

---
 .../content/editor/PanelContentEditorCode.vue |  20 +-
 src/app/src/composables/useHooks.ts           |   5 +-
 src/app/src/composables/useMonacoDiff.ts      |   2 +-
 src/app/src/composables/useMonacoMinimal.ts   |   2 +-
 src/app/src/types/components.ts               |  11 +
 src/app/src/types/index.ts                    |   7 +-
 .../src/utils/{monaco.ts => monaco/index.ts}  |   2 +
 src/app/src/utils/monaco/mdc-compilation.ts   | 404 ++++++++++++++++++
 src/module/src/runtime/composables/useMeta.ts |  22 +
 src/module/src/runtime/host.ts                |   6 +
 10 files changed, 474 insertions(+), 7 deletions(-)
 create mode 100644 src/app/src/types/components.ts
 rename src/app/src/utils/{monaco.ts => monaco/index.ts} (98%)
 create mode 100644 src/app/src/utils/monaco/mdc-compilation.ts
 create mode 100644 src/module/src/runtime/composables/useMeta.ts

diff --git a/src/app/src/components/panel/content/editor/PanelContentEditorCode.vue b/src/app/src/components/panel/content/editor/PanelContentEditorCode.vue
index 2575ccd1..6bca0e3d 100644
--- a/src/app/src/components/panel/content/editor/PanelContentEditorCode.vue
+++ b/src/app/src/components/panel/content/editor/PanelContentEditorCode.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref, shallowRef, watch } from 'vue'
 import type { DatabasePageItem, DraftItem } from '../../../../types'
+import { DraftStatus } from '../../../../types/draft'
 import type { PropType } from 'vue'
-import { setupMonaco, type Editor } from '../../../../utils/monaco'
+import { setupMonaco, setupSuggestion, type Editor } from '../../../../utils/monaco/index'
 import { generateContentFromDocument, generateDocumentFromContent, pickReservedKeysFromDocument } from '../../../../utils/content'
+import { useStudio } from '../../../../composables/useStudio'
 
 const props = defineProps({
   draftItem: {
@@ -13,15 +15,18 @@ const props = defineProps({
 })
 
 const document = defineModel<DatabasePageItem>()
+const { mediaTree, host } = useStudio()
 
 const editor = shallowRef<Editor.IStandaloneCodeEditor | null>(null)
 const editorRef = ref()
 const content = ref<string>('')
 const currentDocumentId = ref<string | null>(null)
+const localStatus = ref<DraftStatus>(props.draftItem.status)
 
 // Trigger on action events
-watch(() => props.draftItem.status, () => {
-  if (editor.value) {
+watch(() => props.draftItem.status, (newStatus) => {
+  if (editor.value && newStatus !== localStatus.value) {
+    localStatus.value = newStatus
     setContent(props.draftItem.modified as DatabasePageItem)
   }
 })
@@ -35,6 +40,7 @@ watch(() => document.value?.id, async () => {
 
 onMounted(async () => {
   const monaco = await setupMonaco()
+  setupSuggestion(monaco.monaco, host.meta.components(), mediaTree.root.value)
 
   // create a Monaco editor instance
   editor.value = monaco.createEditor(editorRef.value)
@@ -52,6 +58,10 @@ onMounted(async () => {
     content.value = newContent
 
     generateDocumentFromContent(document.value!.id, content.value).then((doc) => {
+      // Update local status
+      localStatus.value = DraftStatus.Updated
+
+      // Update document
       document.value = {
         ...pickReservedKeysFromDocument(props.draftItem.original as DatabasePageItem || document.value!),
         ...doc,
@@ -68,7 +78,11 @@ function setContent(document: DatabasePageItem) {
     content.value = md || ''
 
     if (editor.value && editor.value.getModel()?.getValue() !== md) {
+      // Keep the cursor position
+      const position = editor.value.getPosition()
       editor.value.getModel()?.setValue(md || '')
+      // Restore the cursor position
+      position && editor.value.setPosition(position)
     }
 
     currentDocumentId.value = document.id
diff --git a/src/app/src/composables/useHooks.ts b/src/app/src/composables/useHooks.ts
index 14b640fe..44592dc1 100644
--- a/src/app/src/composables/useHooks.ts
+++ b/src/app/src/composables/useHooks.ts
@@ -2,5 +2,8 @@ import { createSharedComposable } from '@vueuse/core'
 import { createHooks } from 'hookable'
 
 export const useHooks = createSharedComposable(() => {
-  return createHooks()
+  return createHooks<{
+    'studio:draft:document:updated': () => void
+    'studio:draft:media:updated': () => void
+  }>()
 })
diff --git a/src/app/src/composables/useMonacoDiff.ts b/src/app/src/composables/useMonacoDiff.ts
index 695c2ac1..05c9a405 100644
--- a/src/app/src/composables/useMonacoDiff.ts
+++ b/src/app/src/composables/useMonacoDiff.ts
@@ -1,7 +1,7 @@
 // import { computed, watch, unref } from 'vue'
 // import type { Ref } from 'vue'
 // import type { editor as Editor } from 'modern-monaco/editor-core'
-// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco'
+// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco/index'
 
 // export function useMonacoDiff(target: Ref, options: { original: string, modified: string, language: string, renderSideBySide?: boolean }) {
 //   let monaco: Awaited<ReturnType<typeof setupMonaco>>
diff --git a/src/app/src/composables/useMonacoMinimal.ts b/src/app/src/composables/useMonacoMinimal.ts
index c897af38..06eaf4a1 100644
--- a/src/app/src/composables/useMonacoMinimal.ts
+++ b/src/app/src/composables/useMonacoMinimal.ts
@@ -2,7 +2,7 @@
 // import type { editor as Editor } from 'modern-monaco/editor-core'
 // import type { Ref } from 'vue'
 // import { omit } from '../utils/object'
-// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco'
+// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco/index'
 
 // export function useMonacoMinimal(target: Ref, options: {
 //   code: string
diff --git a/src/app/src/types/components.ts b/src/app/src/types/components.ts
new file mode 100644
index 00000000..1812c653
--- /dev/null
+++ b/src/app/src/types/components.ts
@@ -0,0 +1,11 @@
+import type { ComponentData } from 'nuxt-component-meta'
+
+export interface ComponentMeta {
+  name: string,
+  path: string,
+  meta: {
+    props: ComponentData['meta']['props'],
+    slots: ComponentData['meta']['slots'],
+    events: ComponentData['meta']['events'],
+  },
+}
diff --git a/src/app/src/types/index.ts b/src/app/src/types/index.ts
index 1f1bdb5c..9a82100e 100644
--- a/src/app/src/types/index.ts
+++ b/src/app/src/types/index.ts
@@ -2,6 +2,7 @@ import type { StudioUser } from './user'
 import type { DatabaseItem } from './database'
 import type { RouteLocationNormalized } from 'vue-router'
 import type { MediaItem } from './media'
+import { ComponentMeta } from './components'
 
 export * from './item'
 export * from './draft'
@@ -12,8 +13,12 @@ export * from './tree'
 export * from './github'
 export * from './context'
 export * from './content'
+export * from './components'
 
 export interface StudioHost {
+  meta: {
+    components: () => ComponentMeta[]
+  }
   on: {
     routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => void
     mounted: (fn: () => void) => void
@@ -52,7 +57,7 @@ export interface StudioHost {
   }
 }
 
-export type UseStudioHost = (user: StudioUser) => StudioHost
+export type UseStudioHost = () => StudioHost
 
 declare global {
   interface Window {
diff --git a/src/app/src/utils/monaco.ts b/src/app/src/utils/monaco/index.ts
similarity index 98%
rename from src/app/src/utils/monaco.ts
rename to src/app/src/utils/monaco/index.ts
index 54dbfc18..f6de77b0 100644
--- a/src/app/src/utils/monaco.ts
+++ b/src/app/src/utils/monaco/index.ts
@@ -1,6 +1,7 @@
 import { createSingletonPromise } from '@vueuse/core'
 import type { editor as Editor } from 'modern-monaco/editor-core'
 
+export { setupSuggestion } from './mdc-compilation'
 export type { editor as Editor } from 'modern-monaco/editor-core'
 export type Monaco = Awaited<ReturnType<typeof import('modern-monaco')['init']>>
 
@@ -21,6 +22,7 @@ export const setupMonaco = createSingletonPromise(async () => {
   const monaco: Monaco = await init()
 
   return {
+    monaco,
     editor: monaco.editor,
     createEditor: ((domElement, options, override) => {
       // Inject the CSS bundle into the DOM
diff --git a/src/app/src/utils/monaco/mdc-compilation.ts b/src/app/src/utils/monaco/mdc-compilation.ts
new file mode 100644
index 00000000..6a50b70f
--- /dev/null
+++ b/src/app/src/utils/monaco/mdc-compilation.ts
@@ -0,0 +1,404 @@
+import { ref } from 'vue'
+import { kebabCase, pascalCase } from 'scule'
+import type { languages, IRange } from 'modern-monaco/editor-core'
+import type { TreeItem, ComponentMeta } from '../../types'
+
+type Monaco = typeof import('modern-monaco/editor-core')
+type CompletionItemType = 'inline' | 'block' | 'all'
+type CompletionItem = languages.CompletionItem & { type: CompletionItemType }
+
+const projectComponents = ref<ComponentMeta[]>([])
+const projectMedias = ref<TreeItem[]>([])
+
+export const setupSuggestion = (monaco: typeof import('modern-monaco/editor-core'), componentsMeta: ComponentMeta[], treeMedia: TreeItem[]) => {
+  projectComponents.value = componentsMeta
+  projectMedias.value = treeMedia
+
+  // @ts-expect-error Return prevent duplicate registration
+  if (monaco.languages.__mdcCompletionProvider) {
+    return
+  }
+  // @ts-expect-error Mark as registered to prevent duplicate registration
+  monaco.languages.__mdcCompletionProvider = true
+
+  // Completion item provider for component suggestion
+  monaco.languages.registerCompletionItemProvider('mdc', {
+    triggerCharacters: ['/', ':'],
+    provideCompletionItems: function (model, position) {
+      const word = model.getWordUntilPosition(position)
+
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: word.startColumn - 1, // -1 to remove the slash
+        endColumn: word.endColumn,
+      }
+
+      const textUntilPosition = model.getValueInRange({
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: position.lineNumber,
+        endColumn: position.column,
+      })
+
+      const lastLineUntilPosition = textUntilPosition.split('\n').pop()?.trim()
+      const trigger = textUntilPosition.match(/(^|\s|,)(\/|:)[-\w\s]*$/)?.[2]
+
+      if (!trigger || !lastLineUntilPosition) {
+        return {
+          suggestions: [],
+        }
+      }
+
+      let completionType: CompletionItemType = 'inline'
+      if (lastLineUntilPosition.startsWith('/') || lastLineUntilPosition.startsWith(':')) {
+        completionType = 'all'
+      }
+      if (lastLineUntilPosition.startsWith('> ')) {
+        completionType = 'all'
+      }
+
+      return {
+        suggestions: [
+          ...getGlobalCompletionItems(monaco, range, trigger),
+          ...getProjectCompletionItems(monaco, range, trigger, projectComponents.value),
+          ...getMediasCompletionItems(monaco, range, trigger, projectMedias.value),
+        ].filter(item => completionType === 'all' || item.type === completionType),
+      }
+    },
+  })
+
+  // Completion item provider for inline attributes
+  monaco.languages.registerCompletionItemProvider('mdc', {
+    triggerCharacters: 'abcdefghijklmnopqrstuvwxyz '.split(''),
+    provideCompletionItems: function (model, position) {
+      const textOfTheLastLine = model.getValueInRange({
+        startLineNumber: position.lineNumber,
+        startColumn: 1,
+        endLineNumber: position.lineNumber,
+        endColumn: 10000,
+      })
+      const textOfTheLastLineUntilPosition = textOfTheLastLine.substring(0, position.column - 1)
+
+      const trigger = textOfTheLastLineUntilPosition.match(/((.*)(^|\s)(::|:)([\w-]+))\{[^}]*$/)
+
+      if (trigger) {
+        const componentName = trigger[5]
+        const attributesStartPosition = trigger[1].length + 1
+        const attributesEndPosition = textOfTheLastLine.indexOf('}', attributesStartPosition)
+
+        // `{` and `}` are not part of the attribute
+        const attributesText = textOfTheLastLine.substring(attributesStartPosition, attributesEndPosition)
+
+        const attributes = attributesText.split(' ').filter(Boolean).reduce((acc, attr) => {
+          const [key, value] = attr.split('=')
+          if (typeof value === 'undefined') {
+            if (key.startsWith('#')) {
+              acc.id = key.substring(1)
+            }
+            else if (key.startsWith('.')) {
+              acc.class = ((acc.class || '') + key).split('.').join(' ')
+            }
+            else {
+              acc[key] = true
+            }
+          }
+          else {
+            acc[key] = value
+          }
+          return acc
+        }, {} as Record<string, string | boolean>)
+
+        // Work & Range
+        const word = model.getWordUntilPosition(position)
+        const range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: word.startColumn,
+          endColumn: word.endColumn,
+        }
+
+        const componentProps = findComponentProps(componentName, projectComponents.value)
+        const suggestions = componentProps.filter(prop => typeof attributes[prop.name] === 'undefined').map((prop) => {
+          const insertText = `${prop.name}="\${1:${unwrapQuotes(prop.default || 'value')}}"`
+          return {
+            label: prop.name,
+            filterText: prop.name,
+            detail: prop.description,
+            insertText,
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            type: 'inline',
+            range,
+          }
+        })
+
+        return {
+          suggestions,
+        }
+      }
+
+      return {
+        suggestions: [],
+      }
+    },
+  })
+
+  // TODO: Register completion for component attributes
+}
+
+function findComponentProps(componentName: string, components: ComponentMeta[]) {
+  componentName = pascalCase(componentName)
+  const component = components.find(c => c.name === componentName)
+  if (!component) {
+    return []
+  }
+  return component.meta.props || []
+}
+
+function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'): CompletionItem[] {
+  return [
+    {
+      label: 'Heading 1',
+      filterText: trigger + 'heading 1',
+      detail: '#',
+      insertText: '# ${1:title}',
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'block',
+      range,
+    },
+    {
+      label: 'Heading 2',
+      filterText: trigger + 'heading 2',
+      detail: '##',
+      insertText: '## ${1:title}',
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'block',
+      range,
+    },
+    {
+      label: 'Heading 3',
+      filterText: trigger + 'heading 3',
+      detail: '###',
+      insertText: '### ${1:title}',
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'block',
+      range,
+    },
+    {
+      label: 'Bold',
+      filterText: trigger + 'bold',
+      insertText: '**${1:title}**',
+      detail: '**',
+      kind: monaco.languages.CompletionItemKind.Field,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'inline',
+      range,
+    },
+    {
+      label: 'Italic',
+      filterText: trigger + 'italic',
+      insertText: '_${1:title}_',
+      detail: '_',
+      kind: monaco.languages.CompletionItemKind.Field,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'inline',
+      range,
+    },
+    {
+      label: 'Emojis',
+      filterText: trigger + 'emoji',
+      insertText: ':${1}:',
+      detail: ':',
+      kind: monaco.languages.CompletionItemKind.Field,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'inline',
+      range,
+    },
+    {
+      label: 'Bulleted List',
+      filterText: trigger + 'bulleted-list',
+      insertText: '- ${1:Item 1}\n- ${2:Item 2}\n\n${3}',
+      detail: '-',
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'block',
+      range,
+    },
+    {
+      label: 'Numbered List',
+      filterText: trigger + 'numbered-list',
+      insertText: '1. ${1:Item 1}\n2. ${2:Item 2}\n\n${3}',
+      detail: '1.',
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'block',
+      range,
+    },
+    {
+      label: 'Blockquote',
+      filterText: trigger + 'blockquote',
+      insertText: '> ${1}\n> ${2}\n\n${3}',
+      detail: '>',
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'block',
+      range,
+    },
+    {
+      label: 'Code',
+      filterText: trigger + 'code',
+      insertText: '```${1:language}\n${2:code}\n```\n\n${3}',
+      detail: '```',
+      kind: monaco.languages.CompletionItemKind.Function,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'block',
+      range,
+    },
+    {
+      label: 'Inline Code',
+      filterText: trigger + 'code-inline',
+      insertText: '`$1` $2',
+      detail: '`',
+      kind: monaco.languages.CompletionItemKind.Field,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'inline',
+      range,
+    },
+    {
+      label: 'Link',
+      filterText: trigger + 'link',
+      detail: '[]()',
+      documentation: [
+        '[Studio](https://content.nuxt.com)',
+      ].join('\n'),
+      kind: monaco.languages.CompletionItemKind.Field,
+      insertText: '[${1:title}](${2:link})',
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'inline',
+      range,
+    },
+    {
+      label: 'Image',
+      filterText: trigger + 'image',
+      detail: '![]()',
+      kind: monaco.languages.CompletionItemKind.Field,
+      insertText: '![${1:alt}](${2:src})',
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: 'inline',
+      range,
+    },
+  ]
+}
+
+function getProjectCompletionItems(monaco: Monaco, range: IRange, trigger = '/', componentsMeta: ComponentMeta[]): CompletionItem[] {
+  const componentsItems: CompletionItem[] = componentsMeta.map((comp) => {
+    let tabIndex = 1
+    const isBlock = comp.meta.slots?.length
+
+    const requiredProps = comp.meta.props.filter(prop => prop.required)
+    const props = requiredProps.map((prop) => {
+      return `${prop.name}="\${${tabIndex++}:${unwrapQuotes(prop.default || prop.name)}}"`
+    })
+
+    let insertText = `${isBlock ? '::' : ':'}${kebabCase(comp.name)}`
+    if (props) {
+      insertText += `{${props.join(' ')}}`
+    }
+
+    if (isBlock) {
+      insertText += `\n\${${tabIndex++}:Write Something}`
+    }
+
+    if (isBlock) {
+      insertText += '\n::'
+    }
+
+    return {
+      label: comp.name,
+      filterText: `${trigger}${comp.name}`,
+      detail: isBlock ? `::${kebabCase(comp.name)}::` : `:${kebabCase(comp.name)}`,
+      insertText,
+      documentation: {
+        supportHtml: true,
+        value: getComponentDocumentation(comp),
+      },
+      kind: monaco.languages.CompletionItemKind.Module,
+      insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+      type: isBlock ? 'block' : 'inline',
+      range,
+    }
+  })
+
+  return componentsItems
+}
+
+export const getMediasCompletionItems = (monaco: Monaco, range: IRange, trigger = '/', mediaTree: TreeItem[]): CompletionItem[] => {
+  const mediasItems: CompletionItem[] = flattenTree(mediaTree)
+    .map((media) => {
+      const path = media.fsPath.split('/').slice(1).map((part: string) => encodeURIComponent(part)).join('/')
+      const insertText = `![${media.name}](/${path})`
+
+      return {
+        label: media.name,
+        filterText: `${trigger}${media.name}`,
+        detail: media.fsPath,
+        insertText,
+        kind: monaco.languages.CompletionItemKind.File,
+        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+        type: 'inline',
+        range,
+      }
+    })
+
+  return mediasItems
+}
+
+const getComponentDocumentation = (comp: ComponentMeta) => `
+Path in project: \`${comp.path}\`
+
+<br />
+
+## Props
+
+${comp.meta.props.map((prop) => {
+  return `
+  - **${prop.name}**
+  - - type: ${prop.type},
+  - - required: ${prop.required},
+  - - default: ${prop.default},
+  `
+}).join('\n')}
+
+<br />
+
+## Slots
+
+${comp.meta.slots.map(slot => `- ${slot.name}`).join('\n')}
+
+<br />
+
+`
+
+const unwrapQuotes = (str = '') => {
+  if (str.startsWith('"') && str.endsWith('"')) {
+    return str.slice(1, -1)
+  }
+
+  return str
+}
+
+const flattenTree = (tree: (TreeItem)[]) => {
+  const flatTree: (TreeItem)[] = []
+
+  for (const file of tree) {
+    flatTree.push(file)
+    if (file.type === 'directory') {
+      flatTree.push(...flattenTree(file.children || []))
+    }
+  }
+  return flatTree
+}
diff --git a/src/module/src/runtime/composables/useMeta.ts b/src/module/src/runtime/composables/useMeta.ts
new file mode 100644
index 00000000..38e3fe98
--- /dev/null
+++ b/src/module/src/runtime/composables/useMeta.ts
@@ -0,0 +1,22 @@
+import { createSharedComposable } from '@vueuse/core'
+import type { ComponentMeta } from 'nuxt-studio/app'
+import { ref, shallowRef } from 'vue'
+
+export const useHostMeta = createSharedComposable(() => {
+  const componentsMeta = shallowRef<ComponentMeta[]>([])
+  const meta = ref<ComponentMeta>()
+
+  async function fetch() {
+    // TODO: look into this approach and consider possible refactors
+    const data = await $fetch<{ components: ComponentMeta[] }>('/__preview.json')
+      .catch(() => ({ components: [] }))
+
+    componentsMeta.value = data.components || []
+  }
+
+  return {
+    meta,
+    fetch,
+    componentsMeta,
+  }
+})
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
index 0487dabc..7f7b2cb8 100644
--- a/src/module/src/runtime/host.ts
+++ b/src/module/src/runtime/host.ts
@@ -11,6 +11,7 @@ import { generateDocumentFromContent } from './utils/content'
 import { queryCollection, queryCollectionItemSurroundings, queryCollectionNavigation, queryCollectionSearchSections } from '#imports'
 import { collections } from '#content/preview'
 import { publicAssetsStorage } from '#build/content-studio-public-assets'
+import { useHostMeta } from './composables/useMeta'
 
 function getSidebarWidth(): number {
   let sidebarWidth = 440
@@ -57,6 +58,7 @@ function getHostStyles(): Record<string, Record<string, string>> & { css?: strin
 export function useStudioHost(user: StudioUser): StudioHost {
   const isMounted = ref(false)
   let localDatabaseAdapter: ContentDatabaseAdapter | null = null
+  const meta = useHostMeta()
 
   function useNuxtApp() {
     return window.useNuxtApp!()
@@ -91,6 +93,9 @@ export function useStudioHost(user: StudioUser): StudioHost {
   }
 
   const host: StudioHost = {
+    meta: {
+      components: () => meta.componentsMeta.value,
+    },
     on: {
       routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => {
         const router = useRouter()
@@ -264,6 +269,7 @@ export function useStudioHost(user: StudioUser): StudioHost {
         if ('serviceWorker' in navigator) {
           navigator.serviceWorker.register('/sw.js')
         }
+        return meta.fetch()
       })
   })()