diff --git a/devtools/app/components/ComponentCode.vue b/devtools/app/components/ComponentCode.vue
index 750e7e22..db73d41b 100644
--- a/devtools/app/components/ComponentCode.vue
+++ b/devtools/app/components/ComponentCode.vue
@@ -32,6 +32,7 @@ const { data: formattedCode } = useAsyncData('__compodium-component-formatted-co
 }, { watch: [code] })
 
 const { codeToHtml } = useShiki()
+
 const { data: highlightedCode } = useAsyncData('__compodium-component-highlighted-code', async () => {
   return formattedCode.value
     ? codeToHtml(formattedCode.value, 'vue')
diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index a67f406c..d4b41b3b 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -8,6 +8,7 @@ import ObjectInput from '../components/inputs/ObjectInput.vue'
 import ArrayInput from '../components/inputs/ArrayInput.vue'
 import PrimitiveArrayInput from '../components/inputs/PrimitiveArrayInput.vue'
 import DateInput from '../components/inputs/DateInput.vue'
+import { createReusableTemplate } from '@vueuse/core'
 
 const inputTypes: Record<PropInputType, Component> = {
   array: ArrayInput,
@@ -22,7 +23,7 @@ const inputTypes: Record<PropInputType, Component> = {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{ name?: string, schema: PropSchema[], description?: string, disabled?: boolean }>()
+const props = defineProps<{ name?: string, schema: PropSchema[], description?: string, disabled?: boolean, inline?: boolean }>()
 const modelValue = defineModel<any>()
 
 const currentType = ref()
@@ -55,52 +56,104 @@ function inferDefaultInput(value?: any, types?: PropSchema[]): PropSchema | unde
 const description = computed(() => {
   return props.description?.replace(/`([^`]+)`/g, '<code class="text-xs font-medium bg-[var(--ui-bg-elevated)] px-1 py-0.5 rounded">$1</code>')
 })
+
+const isArray = computed(() => currentInput.value?.inputType === 'array')
+
+const [DefineSelect, ReuseSelect] = createReusableTemplate()
+const [DefineInput, ReuseInput] = createReusableTemplate()
+const [DefineLabel, ReuseLabel] = createReusableTemplate()
+const [DefineDescription, ReuseDescription] = createReusableTemplate()
 </script>
 
 <template>
-  <div class="relative">
-    <UFormField
-      :name="name"
-      class="w-full"
-      :ui="{ wrapper: 'mb-2' }"
-      :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
-    >
-      <template #label>
-        <div>
-          <p
-            v-if="name"
-            class="font-mono font-bold px-1.5 py-0.5 border border-[var(--ui-border-accented)] border-dashed rounded bg-[var(--ui-bg-elevated)]"
-          >
-            {{ name }}
-          </p>
-        </div>
-      </template>
-
-      <template #description>
-        <!-- eslint-disable vue/no-v-html -->
-        <p
-          v-if="description"
-          class="text-neutral-600 dark:text-neutral-400 mt-1"
-          v-html="description"
-        />
-      </template>
+  <div class="w-full">
+    <DefineSelect>
+      <USelect
+        v-if="schema?.length > 1"
+        v-model="currentType"
+        variant="none"
+        size="sm"
+        :items="schema"
+        label-key="type"
+        value-key="type"
+        :trailing-icon="undefined"
+        class="font-medium text-ellipsis truncate max-w-50 py-0.5 px-1.5 font-mono bg-(--ui-bg-elevated)/50 border border-(--ui-border)"
+        @update:model-value="modelValue = undefined"
+      />
+    </DefineSelect>
+
+    <DefineInput>
       <component
         :is="currentInput.component"
         v-if="!disabled && currentInput"
         v-model="modelValue"
+        class="w-full"
         :schema="currentInput.schema"
+        :name="name"
+      />
+    </DefineInput>
+
+    <DefineLabel>
+      <p class="truncate text-ellipsis font-mono font-semibold">
+        {{ name }}
+      </p>
+    </DefineLabel>
+    <DefineDescription>
+      <!-- eslint-disable vue/no-v-html -->
+      <p
+        v-if="description"
+        class="text-(--ui-text-muted) text-sm"
+        v-html="description"
       />
-    </UFormField>
-
-    <USelect
-      v-if="schema?.length > 1"
-      v-model="currentType"
-      variant="none"
-      :items="schema"
-      label-key="type"
-      value-key="type"
-      class="absolute top-2 right-5 max-w-xs font-mono"
-      @update:model-value="modelValue = undefined"
-    />
+    </DefineDescription>
+
+    <template v-if="!inline || isArray">
+      <UFormField
+        :name="name"
+        class=""
+        :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
+        :label="name"
+        :ui="{ label: 'w-full flex gap-2 justify-between mb-1', description: 'mb-2', container: 'w-full', wrapper: name || schema?.length > 1 ? '' : 'hidden' }"
+      >
+        <template #label>
+          <ReuseLabel class="py-0.5" />
+          <ReuseSelect />
+        </template>
+
+        <ReuseDescription />
+
+        <div class="flex gap-2 justify-center">
+          <ReuseInput />
+          <slot name="actions" />
+        </div>
+      </UFormField>
+    </template>
+
+    <template v-else>
+      <div class="flex justify-end mb-2">
+        <ReuseSelect />
+      </div>
+      <UFormField
+        :name="name"
+        class="w-full flex gap-4"
+        :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
+        :label="name"
+        :ui="{ label: 'font-sans my-auto w-32', description: 'mb-2', container: 'mt-0 w-full', wrapper: name ? '' : 'hidden' }"
+      >
+        <template #label>
+          <ReuseLabel
+            v-if="name"
+            class="mt-1.5"
+          />
+        </template>
+        <div class="flex w-full gap-2">
+          <ReuseInput />
+          <slot name="actions" />
+        </div>
+      </UFormField>
+      <div class="mt-2">
+        <ReuseDescription />
+      </div>
+    </template>
   </div>
 </template>
diff --git a/devtools/app/components/JsonEditor.vue b/devtools/app/components/JsonEditor.vue
new file mode 100644
index 00000000..a60dfd09
--- /dev/null
+++ b/devtools/app/components/JsonEditor.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import JsonEditorVue from 'json-editor-vue'
+import { Mode } from 'vanilla-jsoneditor'
+
+const modelValue = defineModel<Record<string, any>>({ default: () => {} })
+
+const jsonValue = shallowRef(modelValue.value)
+
+watch(jsonValue, (value) => {
+  if (value) modelValue.value = value
+})
+</script>
+
+<template>
+  <div class="json-editor">
+    <JsonEditorVue
+      ref="editor"
+      v-model="jsonValue"
+      class="h-full w-full"
+      :mode="Mode.text"
+      :stringified="false"
+      :main-menu-bar="false"
+      :status-bar="false"
+      :indentation="2"
+      :tab-size="2"
+    />
+  </div>
+</template>
+
+<style>
+.json-editor {
+  --jse-font-familly: var(--font-sans);
+  --jse-font-familly-mono: var(--font-mono);
+
+  --jse-error-color: var(--ui-error);
+  --jse-warning-color: var(--ui-warning);
+  --jse-info-color: var(--ui-info);
+
+  /* over all fonts, sizes, and colors */
+  --jse-theme-color: var(--ui-primary);
+  --jse-theme-color-highlight: var(--ui-primary);
+  --jse-background-color: var(--ui-bg);
+  --jse-text-color: var(--ui-text);
+  --jse-text-color-inverse: var(--ui-text-inverted);
+
+  /* main, menu, modal */
+  --jse-main-border: 0;
+  --jse-menu-color: var(--ui-bg-inverted);
+  --jse-modal-background: var(--ui-bg-muted);
+  --jse-modal-overlay-background: rgba(0, 0, 0, 0.5);
+  --jse-modal-code-background: var(--ui-bg-muted);
+
+  /* tooltip in text mode */
+  --jse-tooltip-color: var(--jse-text-color);
+  --jse-tooltip-background: var(--ui-bg-accented);
+  --jse-tooltip-border: 1px solid var(--ui-border-accented);
+  --jse-tooltip-action-button-color: inherit;
+  --jse-tooltip-action-button-background: var(--ui-border-accented);
+
+  /* panels: navigation bar, gutter, search box */
+  --jse-panel-background: var(--ui-bg-muted);
+  --jse-panel-background-border: 1px solid var(--ui-border);
+  --jse-panel-color: var(--jse-text-color);
+  --jse-panel-color-readonly: var(--ui-text-dimmed);
+  --jse-panel-border: 1px solid var(--ui-border);
+  --jse-panel-button-color-highlight: var(--ui-bg-inverted);
+  --jse-panel-button-background-highlight: var(--ui-border);
+
+  /* navigation-bar */
+  --jse-navigation-bar-background: var(--ui-bg-accented);
+  --jse-navigation-bar-background-highlight: var(--ui-bg-elevated);
+  --jse-navigation-bar-dropdown-color: var(--jse-text-color);
+
+  /* context menu */
+  --jse-context-menu-background: var(--ui-bg-accented);
+  --jse-context-menu-background-highlight: var(--ui-bg-elevated);
+  --jse-context-menu-separator-color: var(--ui-border);
+  --jse-context-menu-color: var(--jse-text-color);
+  --jse-context-menu-pointer-background: var(--ui-border);
+  --jse-context-menu-pointer-background-highlight: var(--ui-border-accented);
+  --jse-context-menu-pointer-color: var(--jse-context-menu-color);
+
+  /* contents: json key and values */
+  --jse-key-color: var(--ui-text-toned);
+  --jse-value-color: var(--jse-text-color);
+  --jse-value-color-number: var(--ui-text-dimmed);
+  --jse-value-color-boolean: var(--ui-text-dimmed);
+  --jse-value-color-null: var(--ui-text-dimmed);
+  --jse-value-color-string: var(--ui-text-dimmed);
+  --jse-value-color-url: var(--ui-text-dimmed);
+  --jse-delimiter-color: var(--ui-text-dimmed);
+  --jse-edit-outline: 2px solid var(--jse-text-color);
+
+  /* contents: selected or hovered */
+  --jse-selection-background-color: var(--ui-bg-accented);
+  --jse-selection-background-inactive-color: var(--ui-bg-muted);
+  --jse-hover-background-color: var(--ui-bg-muted);
+  --jse-active-line-background-color: rgba(255, 255, 255, 0.06);
+  --jse-search-match-background-color: var(--ui-bg-muted);
+
+  /* contents: section of collapsed items in an array */
+  --jse-collapsed-items-background-color: var(--ui-bg-muted);
+  --jse-collapsed-items-selected-background-color: var(--ui-bg-accented);
+  --jse-collapsed-items-link-color: var(--ui-text-dimmed);
+  --jse-collapsed-items-link-color-highlight: var(--ui-text-toned);
+
+  /* contents: highlighting of search results */
+  --jse-search-match-color: var(--ui-text-toned);
+  --jse-search-match-outline: 1px solid var(--ui-text-toned);
+  --jse-search-match-active-color: var(--ui-text-highlighted);
+  --jse-search-match-active-outline: 1px solid var(--ui-text-highlighted);
+
+  /* contents: inline tags inside the JSON document */
+  --jse-tag-background: var(--ui-bg-accented);
+  --jse-tag-color: var(--ui-text-dimmed);
+
+  /* contents: table */
+  --jse-table-header-background: var(--ui-bg-muted);
+  --jse-table-header-background-highlight: var(--ui-bg-accented);
+  --jse-table-row-odd-background: rgba(255, 255, 255, 0.1);
+
+  /* controls in modals: inputs, buttons, and `a` */
+  --jse-input-background: var(--ui-bg-accented);
+  --jse-input-border: var(--jse-main-border);
+  --jse-button-background: var(--ui-border);
+  --jse-button-background-highlight: var(--ui-border-accented);
+  --jse-button-color: var(--ui-bg-inverted);
+  --jse-button-secondary-background: var(--ui-bg-accented);
+  --jse-button-secondary-background-highlight: var(--ui-bg-elevated);
+  --jse-button-secondary-background-disabled: var(--ui-border);
+  --jse-button-secondary-color: var(--jse-text-color);
+  --jse-a-color: var(--ui-text-toned);
+  --jse-a-color-highlight: var(--ui-text-highlighted);
+
+  /* svelte-select */
+  --jse-svelte-select-background: var(--ui-bg-accented);
+  --jse-svelte-select-border: 1px solid var(--ui-border);
+  --list-background: var(--ui-bg-accented);
+  --item-hover-bg: var(--ui-bg-elevated);
+  --multi-item-bg: var(--ui-bg-accented);
+  --input-color: var(--ui-text-dimmed);
+  --multi-clear-bg: var(--ui-border);
+  --multi-item-clear-icon-color: var(--ui-text-dimmed);
+  --multi-item-outline: 1px solid var(--ui-border);
+  --list-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
+
+  /* color picker */
+  --jse-color-picker-background: var(--ui-bg-accented);
+  --jse-color-picker-border-box-shadow: var(--ui-border) 0 0 0 1px;
+}
+
+.json-editor .cm-gutter-lint {
+  visibility: hidden;
+  width: 0px;
+}
+</style>
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
index ba3560a1..0d27f2e3 100644
--- a/devtools/app/components/inputs/ArrayInput.vue
+++ b/devtools/app/components/inputs/ArrayInput.vue
@@ -3,7 +3,7 @@ import type { ArrayInputSchema } from '#module/runtime/server/services/infer'
 
 defineProps<{ schema: ArrayInputSchema }>()
 
-const modelValue = defineModel<Array<any>>({})
+const modelValue = defineModel<Array<any>>()
 
 function removeArrayItem(index: number) {
   if (!modelValue.value) return
@@ -16,6 +16,7 @@ function addArrayItem() {
   } else {
     modelValue.value.push(null)
   }
+  openedItem.value = modelValue.value?.length - 1
 }
 
 function updateValue(index: number, value: any) {
@@ -23,29 +24,34 @@ function updateValue(index: number, value: any) {
   modelValue.value[index] = value
   modelValue.value = [...modelValue.value]
 }
+
+const openedItem = ref<number | null>(0)
 </script>
 
 <template>
-  <div>
+  <div class="flex flex-col gap-2">
     <div
       v-for="value, index in modelValue"
       :key="index"
-      class="relative"
+      class="relative w-full flex gap-2"
     >
       <ComponentPropInput
         :model-value="value"
         :schema="schema.schema"
         @update:model-value="(val) => updateValue(index, val)"
-      />
-
-      <UButton
-        variant="link"
-        color="neutral"
-        size="sm"
-        icon="lucide:x"
-        class="absolute top-2.5 right-1"
-        @click="removeArrayItem(index)"
-      />
+      >
+        <template #actions>
+          <UButton
+            variant="outline"
+            color="neutral"
+            icon="i-lucide-x"
+            size="sm"
+            class="p-2"
+            square
+            @click="removeArrayItem(index)"
+          />
+        </template>
+      </ComponentPropInput>
     </div>
 
     <UButton
@@ -53,7 +59,6 @@ function updateValue(index: number, value: any) {
       color="neutral"
       variant="ghost"
       block
-      class="justify-center mt-4"
       @click="addArrayItem()"
     >
       Add value
diff --git a/devtools/app/components/inputs/BooleanInput.vue b/devtools/app/components/inputs/BooleanInput.vue
index cecc0795..28f25baa 100644
--- a/devtools/app/components/inputs/BooleanInput.vue
+++ b/devtools/app/components/inputs/BooleanInput.vue
@@ -5,5 +5,5 @@ defineProps<{ schema: BooleanInputSchema }>()
 </script>
 
 <template>
-  <USwitch />
+  <USwitch class="pt-1" />
 </template>
diff --git a/devtools/app/components/inputs/NumberInput.vue b/devtools/app/components/inputs/NumberInput.vue
index b95ca3df..cde0456d 100644
--- a/devtools/app/components/inputs/NumberInput.vue
+++ b/devtools/app/components/inputs/NumberInput.vue
@@ -2,7 +2,7 @@
 import type { NumberInputSchema } from '#module/runtime/server/services/infer'
 
 defineProps<{ schema: NumberInputSchema }>()
-const modelValue = defineModel<number>()
+const modelValue = defineModel<number>({ default: null })
 </script>
 
 <template>
diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 6b4bb14c..2771e694 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -1,30 +1,87 @@
 <script setup lang="ts">
 import type { ObjectInputSchema } from '#module/runtime/server/services/infer'
+import type { PropertyMeta } from '@compodium/meta'
+import { useFuse } from '@vueuse/integrations/useFuse.mjs'
 
-const props = defineProps<{ schema: ObjectInputSchema }>()
+const props = defineProps<{ schema: ObjectInputSchema, name?: string }>()
 
 const modelValue = defineModel<Record<string, any>>({})
 
 const attrs = computed(() => {
   return Object.values(props.schema.schema)
 })
+
+const componentProps = computed(() => attrs.value ?? [])
+const propsSearchTerm = ref()
+
+const { results: fuseResults } = useFuse<PropertyMeta>(propsSearchTerm, componentProps, {
+  fuseOptions: {
+    ignoreLocation: true,
+    threshold: 0.1,
+    keys: ['name', 'description']
+  },
+  matchAllWhenSearchEmpty: true
+})
+
+const visibleProps = computed(() => new Set(fuseResults.value?.map(result => result.item.name)))
 </script>
 
 <template>
-  <CollapseContainer>
-    <ComponentPropInput
-      v-for="attr in attrs"
-      :key="attr.name"
-      class="border-b last:border-b-0 border-[var(--ui-border)] p-4"
-      :model-value="modelValue?.[attr.name]"
-      :schema="attr.schema"
-      :name="attr.name"
-      :description="attr.description"
-      :default-value="attr.default"
-      @update:model-value="(value: any) => {
-        if (!modelValue) modelValue ||= {}
-        else modelValue = { ...modelValue, [attr.name]: value }
-      }"
-    />
-  </CollapseContainer>
+  <USlideover
+    class="rounded"
+    close-icon="i-lucide-arrow-right"
+    :ui="{
+      body: 'p-0 sm:p-0',
+      header: 'px-2.5 py-1.5 sm:py-1.5 sm:px-2.5 min-h-8 flex justify-between border-b-0',
+      close: 'top-1'
+    }"
+    :overlay="false"
+    :title="'Edit ' + (name ?? 'object')"
+  >
+    <template #close>
+      <UButton
+        size="sm"
+        icon="i-lucide-arrow-right"
+        color="neutral"
+        variant="ghost"
+      />
+    </template>
+    <UButton
+      color="neutral"
+      variant="outline"
+      icon="lucide:square-arrow-out-up-right"
+      class="w-full"
+      :ui="{ leadingIcon: 'size-4' }"
+    >
+      Edit
+    </UButton>
+
+    <template #body>
+      <div class="bg-(--ui-bg) p-0.5 border-y border-(--ui-border) sticky top-0 z-1 flex gap-2">
+        <UInput
+          v-model="propsSearchTerm"
+          placeholder="Search attributes..."
+          icon="lucide:search"
+          variant="none"
+          class="w-full ml-1"
+        />
+      </div>
+      <ComponentPropInput
+        v-for="attr in attrs"
+        v-show="visibleProps.has(attr.name)"
+        :key="attr.name"
+        :model-value="modelValue?.[attr.name]"
+        :schema="attr.schema"
+        :name="attr.name"
+        :description="attr.description"
+        :default-value="attr.default"
+        inline
+        class="px-6 py-4 not-last:border-b border-(--ui-border)"
+        @update:model-value="(value: any) => {
+          if (!modelValue) modelValue ||= {}
+          else modelValue = { ...modelValue, [attr.name]: value }
+        }"
+      />
+    </template>
+  </USlideover>
 </template>
diff --git a/devtools/app/components/inputs/PrimitiveArrayInput.vue b/devtools/app/components/inputs/PrimitiveArrayInput.vue
index 21a21c4c..2bac191a 100644
--- a/devtools/app/components/inputs/PrimitiveArrayInput.vue
+++ b/devtools/app/components/inputs/PrimitiveArrayInput.vue
@@ -5,11 +5,11 @@ const props = defineProps<{ schema: PrimitiveArrayInputSchema }>()
 
 const searchTerm = ref('')
 const items = ref<string[]>([])
-const modelValue = defineModel<any[]>({ default: [] })
+const modelValue = defineModel<any[]>()
 
 const inputValue = computed({
   get() {
-    return modelValue.value.map(v => v.toString())
+    return modelValue.value?.map(v => v.toString())
   },
   set(value: string[]) {
     modelValue.value = (props.schema as any).schema[0] === 'number' ? value.map(Number) : value
@@ -18,7 +18,7 @@ const inputValue = computed({
 
 function onCreate(item: string) {
   items.value.push(item)
-  inputValue.value = [...inputValue.value, item]
+  inputValue.value = [...inputValue.value ?? [], item]
   searchTerm.value = ''
 }
 </script>
@@ -39,7 +39,6 @@ function onCreate(item: string) {
     no-portal
     :items="items"
     :ui="{ viewport: 'invisible', content: 'invisible' }"
-    class="min-w-56"
     @create="onCreate"
   >
     <template #trailing>
diff --git a/devtools/app/components/inputs/StringEnumInput.vue b/devtools/app/components/inputs/StringEnumInput.vue
index 61279a8f..57481ddc 100644
--- a/devtools/app/components/inputs/StringEnumInput.vue
+++ b/devtools/app/components/inputs/StringEnumInput.vue
@@ -42,8 +42,5 @@ const options = computed(() => {
 </script>
 
 <template>
-  <USelectMenu
-    :items="options"
-    class="min-w-56"
-  />
+  <USelectMenu :items="options" />
 </template>
diff --git a/devtools/app/components/inputs/StringInput.vue b/devtools/app/components/inputs/StringInput.vue
index d6c8ef9d..57517bdd 100644
--- a/devtools/app/components/inputs/StringInput.vue
+++ b/devtools/app/components/inputs/StringInput.vue
@@ -5,5 +5,9 @@ defineProps<{ schema: StringEnumInputSchema }>()
 </script>
 
 <template>
-  <UInput class="min-w-56" />
+  <UTextarea
+    :rows="1"
+    :maxrows="8"
+    autoresize
+  />
 </template>
diff --git a/devtools/app/composables/useShiki.ts b/devtools/app/composables/useShiki.ts
index 164d78ae..cdc95dc0 100644
--- a/devtools/app/composables/useShiki.ts
+++ b/devtools/app/composables/useShiki.ts
@@ -29,5 +29,28 @@ export function useShiki() {
     })
   }
 
-  return { codeToHtml }
+  async function typeToHtml(code: string, lang: BuiltinLanguage | 'text' = 'text') {
+    if (!highlighter.value) {
+      highlighter.value = await createHighlighterCore({
+        themes: [MaterialThemeLighter, MaterialThemePalenight],
+        langs: [VueLang, MarkdownLang],
+        engine: createOnigurumaEngine(() => import('shiki/wasm'))
+      })
+    }
+
+    return highlighter.value.codeToHtml(code, {
+      lang,
+      grammarContextCode: 'let a:',
+      themes: {
+        dark: 'material-theme-palenight',
+        default: 'material-theme-lighter',
+        light: 'material-theme-lighter'
+      }
+    })
+  }
+
+  return {
+    typeToHtml,
+    codeToHtml
+  }
 }
diff --git a/devtools/app/pages/components/[id].vue b/devtools/app/pages/components/[id].vue
index 8f9aa812..5c323978 100644
--- a/devtools/app/pages/components/[id].vue
+++ b/devtools/app/pages/components/[id].vue
@@ -166,6 +166,7 @@ watch(component, () => propsSearchTerm.value = '')
           target="_blank"
         />
       </UTooltip>
+
       <UButton
         :icon="isDark ? 'lucide:moon' : 'lucide:sun'"
         variant="link"
@@ -175,7 +176,6 @@ watch(component, () => propsSearchTerm.value = '')
       />
     </div>
   </div>
-
   <div class="bg-(--ui-bg) w-md border-l border-(--ui-border)">
     <UTabs
       variant="link"
@@ -185,7 +185,7 @@ watch(component, () => propsSearchTerm.value = '')
     >
       <template #props>
         <div class="overflow-y-scroll h-full">
-          <div class="bg-(--ui-bg) p-0.5 border-y border-(--ui-border) sticky top-0 z-1 flex gap-2">
+          <div class="bg-(--ui-bg) p-0.5 border-y border-(--ui-border) sticky top-0 z-1 flex gap-0.5">
             <UInput
               v-model="propsSearchTerm"
               placeholder="Search props..."
@@ -193,11 +193,45 @@ watch(component, () => propsSearchTerm.value = '')
               variant="none"
               class="w-full ml-1"
             />
-
             <UTooltip
               text="Reset props"
               :content="{ side: 'left' }"
+              title="JSON Editor"
             >
+              <USlideover
+                ref="modal"
+                class="rounded"
+                close-icon="i-lucide-arrow-right"
+                :ui="{
+                  body: 'p-0 sm:p-0',
+                  header: 'px-2.5 py-1.5 sm:py-1.5 sm:px-2.5 min-h-8 flex justify-between',
+                  close: 'top-1'
+                }"
+                :overlay="false"
+                title="JSON Editor"
+              >
+                <template #close>
+                  <UButton
+                    size="sm"
+                    icon="i-lucide-arrow-right"
+                    color="neutral"
+                    variant="ghost"
+                  />
+                </template>
+                <UButton
+                  icon="lucide:braces"
+                  variant="link"
+                  color="neutral"
+                  size="sm"
+                />
+                <template #body>
+                  <JsonEditor
+                    v-model="props"
+                    class="h-full"
+                    @update:model-value="updatePropsDebounced"
+                  />
+                </template>
+              </USlideover>
               <UButton
                 icon="lucide:rotate-cw"
                 variant="link"
@@ -220,7 +254,8 @@ watch(component, () => propsSearchTerm.value = '')
               :schema="prop.schema"
               :name="prop.name"
               :description="prop.description"
-              class="p-4 rounded"
+              inline
+              class="p-3 rounded"
               @update:model-value="updatePropsDebounced"
             />
           </div>
diff --git a/devtools/package.json b/devtools/package.json
index c2641de0..d773370d 100644
--- a/devtools/package.json
+++ b/devtools/package.json
@@ -14,13 +14,14 @@
     "@vueuse/core": "^12.7.0",
     "@vueuse/integrations": "^12.7.0",
     "fuse.js": "^7.1.0",
+    "json-editor-vue": "^0.18.0",
     "knitwork": "^1.2.0",
     "nuxt": "^3.15.4",
     "prettier": "^3.5.2",
     "shiki": "^3.1.0"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.27",
-    "@compodium/meta": "workspace:*"
+    "@compodium/meta": "workspace:*",
+    "@iconify-json/lucide": "^1.2.27"
   }
 }
diff --git a/playground/components/CompodiumWelcome.vue b/playground/components/CompodiumWelcome.vue
index 71467067..1d1e0230 100644
--- a/playground/components/CompodiumWelcome.vue
+++ b/playground/components/CompodiumWelcome.vue
@@ -11,14 +11,17 @@ withDefaults(defineProps<{
 
 extendCompodiumMeta({
   defaultProps: {
-    bounceIt: true
+    bounceIt: true,
+    objArr: [{ foo: 'aksjda' }],
+    obj: { foo: 'kasjdkja' }
+
   }
 })
 </script>
 
 <template>
   <div
-    class="h-screen w-screen flex flex-col justify-center items-center data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce"
+    class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce"
     :data-spin="spinIt"
     :data-bounce="bounceIt"
     :class="{ shaker: shakeIt }"
diff --git a/playground/components/InputProps.vue b/playground/components/InputProps.vue
new file mode 100644
index 00000000..85313fc7
--- /dev/null
+++ b/playground/components/InputProps.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const _props = defineProps<{
+  string?: string
+  number?: number
+  boolean?: boolean
+  primitiveUnion?: string | number | boolean
+  stringArray: string[]
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  numberArray: number[]
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  booleanArray: boolean[]
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  object?: { foo: string }
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  objectArray?: ({ foo: string | number } | { fee: string })[]
+  /**
+   * This is a very long description of things I don't know yet what I'm going to say but it just needs to be long, not to make sense.
+   */
+  arrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[]
+  multipleArrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[]
+  objectMatrix?: (({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[])[]
+  numberMatrix?: number[][]
+  literalMatrix?: (number | string | boolean)[][]
+  aVeryVeryVeryLongPropNameWithLongType: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[][]
+}>()
+
+extendCompodiumMeta<typeof _props>({
+  defaultProps: {
+    string: 'hello',
+    primitiveUnion: 42,
+    objectArray: [{ foo: 'bar' }],
+    object: { foo: 'bar' },
+    arrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    multipleArrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    objectMatrix: [[{ foo: 'bar' }, { fee: 'bar' }], [{ foo: 42 }]],
+    numberMatrix: [[42, 42], [42]],
+    literalMatrix: [['string', true], [42]]
+  }
+})
+</script>
+
+<template>
+  <p> Supported prop types </p>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d96a194d..e36dd37a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,6 +131,9 @@ importers:
       fuse.js:
         specifier: ^7.1.0
         version: 7.1.0
+      json-editor-vue:
+        specifier: ^0.18.0
+        version: 0.18.0(vue@3.5.13(typescript@5.6.3))
       knitwork:
         specifier: ^1.2.0
         version: 1.2.0
@@ -356,6 +359,30 @@ packages:
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
 
+  '@codemirror/autocomplete@6.18.6':
+    resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
+
+  '@codemirror/commands@6.8.0':
+    resolution: {integrity: sha512-q8VPEFaEP4ikSlt6ZxjB3zW72+7osfAYW9i8Zu943uqbKuz6utc1+F170hyLUCUltXORjQXRyYQNfkckzA/bPQ==}
+
+  '@codemirror/lang-json@6.0.1':
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+
+  '@codemirror/language@6.10.8':
+    resolution: {integrity: sha512-wcP8XPPhDH2vTqf181U8MbZnW+tDyPYy0UzVOa+oHORjyT+mhhom9vBd7dApJwoDz9Nb/a8kHjJIsuA/t8vNFw==}
+
+  '@codemirror/lint@6.8.4':
+    resolution: {integrity: sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==}
+
+  '@codemirror/search@6.5.10':
+    resolution: {integrity: sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==}
+
+  '@codemirror/state@6.5.2':
+    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
+
+  '@codemirror/view@6.36.3':
+    resolution: {integrity: sha512-N2bilM47QWC8Hnx0rMdDxO2x2ImJ1FvZWXubwKgjeoOrWwEiFrtpA7SFHcuZ+o2Ze2VzbkgbzWVj4+V18LVkeg==}
+
   '@es-joy/jsdoccomment@0.49.0':
     resolution: {integrity: sha512-xjZTSFgECpb9Ohuk5yMX5RhUEbfeQcuOp8IF60e+wyzWEF0M5xeSgqsfLtvPEX8BIyOX9saZqzuGPmZ8oWc+5Q==}
     engines: {node: '>=16'}
@@ -853,6 +880,18 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
+  '@fortawesome/fontawesome-common-types@6.7.2':
+    resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-regular-svg-icons@6.7.2':
+    resolution: {integrity: sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-solid-svg-icons@6.7.2':
+    resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==}
+    engines: {node: '>=6'}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -928,17 +967,48 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@jsep-plugin/assignment@1.3.0':
+    resolution: {integrity: sha512-VVgV+CXrhbMI3aSusQyclHkenWSAm95WaiKrMxRFam3JSUiIaQjoMIw2sEs/OX4XifnqeQUN4DYbJjlA8EfktQ==}
+    engines: {node: '>= 10.16.0'}
+    peerDependencies:
+      jsep: ^0.4.0||^1.0.0
+
+  '@jsep-plugin/regex@1.0.4':
+    resolution: {integrity: sha512-q7qL4Mgjs1vByCaTnDFcBnV9HS7GVPJX5vyVoCgZHNSC9rjwIlmbXG5sUuorR5ndfHAIlJ8pVStxvjXHbNvtUg==}
+    engines: {node: '>= 10.16.0'}
+    peerDependencies:
+      jsep: ^0.4.0||^1.0.0
+
+  '@jsonquerylang/jsonquery@4.1.1':
+    resolution: {integrity: sha512-Rfyvq70Zrb561BqSuXLsl0rG0/1tz913EQDL/4zpkp+laFGUxXIVPSaJWcdREJwADXLZDkQyaWplzEaPQvh+7A==}
+    hasBin: true
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
   '@mapbox/node-pre-gyp@2.0.0':
     resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
     engines: {node: '>=18'}
     hasBin: true
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@netlify/functions@2.8.2':
     resolution: {integrity: sha512-DeoAQh8LuNPvBE4qsKlezjKj0PyXDryOFJfJKo3Z1qZLKzQ21sT314KQKPVjfvw6knqijj+IO+0kHXy/TJiqNA==}
     engines: {node: '>=14.0.0'}
@@ -1201,6 +1271,13 @@ packages:
     resolution: {integrity: sha512-HScpiSuluLic9+QpsI2JWaegeDuRn3hximPBpiUpy4WdXf74Ev094kpUgjhiD3xDuP/KpVdchooAkLnzQ0X+vg==}
     engines: {node: '>=18.17.0', npm: '>=9.5.0'}
 
+  '@replit/codemirror-indentation-markers@6.5.3':
+    resolution: {integrity: sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
     engines: {node: '>=14.0.0'}
@@ -1418,6 +1495,9 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@sphinxxxx/color-conversion@2.2.2':
+    resolution: {integrity: sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==}
+
   '@stylistic/eslint-plugin@4.1.0':
     resolution: {integrity: sha512-bytbL7qiici7yPyEiId0fGPK9kjQbzcPMj2aftPfzTCyJ/CRSKdtI+iVjM0LSGzGxfunflI+MDDU9vyIIeIpoQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1944,6 +2024,11 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
   acorn@8.14.0:
     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
@@ -1956,6 +2041,9 @@ packages:
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
   alien-signals@0.4.14:
     resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
 
@@ -2013,6 +2101,10 @@ packages:
     resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
     engines: {node: '>=10'}
 
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -2038,6 +2130,10 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
   b4a@1.6.7:
     resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
@@ -2214,10 +2310,21 @@ packages:
     resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
     engines: {node: '>=0.8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   cluster-key-slot@1.1.2:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
+  codemirror-wrapped-line-indent@1.0.8:
+    resolution: {integrity: sha512-5UwuHCz4oAZuvot1DbfFxSxJacTESdNGa/KpJD7HfpVpDAJdgB1vV9OG4b4pkJqPWuOfIpFLTQEKS85kTpV+XA==}
+    peerDependencies:
+      '@codemirror/language': ^6.9.0
+      '@codemirror/state': ^6.2.1
+      '@codemirror/view': ^6.17.1
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2300,6 +2407,9 @@ packages:
     resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
     engines: {node: '>= 14'}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   croner@9.0.0:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
@@ -2491,6 +2601,10 @@ packages:
   dfa@1.2.0:
     resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
 
+  diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   diff@7.0.0:
     resolution: {integrity: sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==}
     engines: {node: '>=0.3.1'}
@@ -2729,6 +2843,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   espree@10.3.0:
     resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2741,6 +2858,9 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esrap@1.4.5:
+    resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==}
+
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
@@ -2819,6 +2939,9 @@ packages:
   fast-npm-meta@0.3.1:
     resolution: {integrity: sha512-W9gVhqRyz2O3j20I0nFmYEyaMC/046oaMRxxAQ0w6noakfbhpLmlIXmnnqSOmVVuJZ6x5hOPVwlv7PocuawZsw==}
 
+  fast-uri@3.0.6:
+    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
+
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
@@ -3083,6 +3206,9 @@ packages:
   image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
 
+  immutable-json-patch@6.0.1:
+    resolution: {integrity: sha512-BHL/cXMjwFZlTOffiWNdY8ZTvNyYLrutCnWxrcKPHr5FqpAb6vsO6WWSPnVSys3+DruFN6lhHJJPHi8uELQL5g==}
+
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -3184,6 +3310,9 @@ packages:
   is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
 
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
   is-ssh@1.4.1:
     resolution: {integrity: sha512-JNeu1wQsHjyHgn9NcWTaXq6zWSR6hqE0++zhfZlkFBbScNkyvxCdeV8sRkSBaeLKxmbpR21brail63ACNxJ0Tg==}
 
@@ -3240,6 +3369,10 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
+  jmespath@0.16.0:
+    resolution: {integrity: sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==}
+    engines: {node: '>= 0.6.0'}
+
   js-levenshtein@1.1.6:
     resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
     engines: {node: '>=0.10.0'}
@@ -3258,6 +3391,10 @@ packages:
     resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
     engines: {node: '>=12.0.0'}
 
+  jsep@1.4.0:
+    resolution: {integrity: sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==}
+    engines: {node: '>= 10.16.0'}
+
   jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
     engines: {node: '>=6'}
@@ -3271,12 +3408,24 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-editor-vue@0.18.0:
+    resolution: {integrity: sha512-3eYVQzNU95V1AEIkwXPYBcDhKgCT+Zs/14S1/7pmhWaUMOfGo/we0ObS8hhY3a5QmWovWO4+ww8lh6pKghwxdA==}
+    peerDependencies:
+      '@vue/composition-api': '>=1'
+      vue: 2||3
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
+  json-source-map@0.6.1:
+    resolution: {integrity: sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==}
+
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -3288,6 +3437,15 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  jsonpath-plus@10.3.0:
+    resolution: {integrity: sha512-8TNmfeTCk2Le33A3vRRwtuworG/L5RrgMvdjhKZxvyShO+mBu2fP50OWUjRLNtvw344DdDarFh9buFAZs5ujeA==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  jsonrepair@3.12.0:
+    resolution: {integrity: sha512-SWfjz8SuQ0wZjwsxtSJ3Zy8vvLg6aO/kxcp9TWNPGwJKgTZVfhNEQBMk/vPOpYCDFWRxD6QWuI6IHR1t615f0w==}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -3396,10 +3554,16 @@ packages:
     resolution: {integrity: sha512-xbZBuX6gYIWrlLmZG43aAVer4ocntYO09vPy9lxd6Ns8DnR4U7N+IIeDkubinqFOHHzoMlPxTxwo0jhE7oYjAw==}
     engines: {node: '>=14'}
 
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
@@ -3452,6 +3616,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -3593,6 +3760,9 @@ packages:
   nanotar@0.2.0:
     resolution: {integrity: sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==}
 
+  natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -4438,6 +4608,9 @@ packages:
   structured-clone-es@1.0.0:
     resolution: {integrity: sha512-FL8EeKFFyNQv5cMnXI31CIMCsFarSVI2bF0U0ImeNE3g/F1IvJQyqzOXxPBRXiwQfyBTlbNe88jh1jFW0O/jiQ==}
 
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
   stylehacks@7.0.4:
     resolution: {integrity: sha512-i4zfNrGMt9SB4xRK9L83rlsFCgdGANfeDAYacO1pkqcE7cRHPdWHwnKZVz7WY17Veq/FvyYsRAU++Ga+qDFIww==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -4460,6 +4633,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svelte@5.20.5:
+    resolution: {integrity: sha512-dpu2lTPVsAAgZFKpF7A9741sBCdXGogfxFU4aQeVgun7GVNCSVheTzj0FsT7g9OsLhBaMX4lKLwVIvmzQGytmQ==}
+    engines: {node: '>=18'}
+
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
@@ -4820,6 +4997,12 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
+  vanilla-jsoneditor@3.0.0:
+    resolution: {integrity: sha512-bO9ihCFf6bsslmbz3A9dwXF6UelY5ZFUr7hulXRovbsQBYgwPtX3mvvT4I6DyvDXkcpvwxHeXHj/SK02MR/vcA==}
+
+  vanilla-picker@2.12.3:
+    resolution: {integrity: sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==}
+
   vaul-vue@0.3.0:
     resolution: {integrity: sha512-LwhBd7xLJtbdhq+vnQk9etOjZxr09GNFtMjOEYh969y5f8JKV5oR30CfB4toPkbtVMxFAFhMrp77EVWQgbtpHA==}
     peerDependencies:
@@ -5059,6 +5242,9 @@ packages:
       typescript:
         optional: true
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -5172,6 +5358,9 @@ packages:
   zhead@2.2.4:
     resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
   zip-stream@6.0.1:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
@@ -5416,6 +5605,56 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
+  '@codemirror/autocomplete@6.18.6':
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.8.0':
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-json@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@lezer/json': 1.0.3
+
+  '@codemirror/language@6.10.8':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/lint@6.8.4':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.10':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.2':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/view@6.36.3':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
   '@es-joy/jsdoccomment@0.49.0':
     dependencies:
       comment-parser: 1.4.1
@@ -5707,6 +5946,16 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@fortawesome/fontawesome-common-types@6.7.2': {}
+
+  '@fortawesome/free-regular-svg-icons@6.7.2':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.7.2
+
+  '@fortawesome/free-solid-svg-icons@6.7.2':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.7.2
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -5793,6 +6042,16 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@jsep-plugin/assignment@1.3.0(jsep@1.4.0)':
+    dependencies:
+      jsep: 1.4.0
+
+  '@jsep-plugin/regex@1.0.4(jsep@1.4.0)':
+    dependencies:
+      jsep: 1.4.0
+
+  '@jsonquerylang/jsonquery@4.1.1': {}
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.0(supports-color@9.4.0)
@@ -5801,6 +6060,22 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
+  '@lezer/common@1.2.3': {}
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+
   '@mapbox/node-pre-gyp@2.0.0':
     dependencies:
       consola: 3.4.0
@@ -5814,6 +6089,8 @@ snapshots:
       - encoding
       - supports-color
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@netlify/functions@2.8.2':
     dependencies:
       '@netlify/serverless-functions-api': 1.26.1
@@ -6573,6 +6850,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@replit/codemirror-indentation-markers@6.5.3(@codemirror/language@6.10.8)(@codemirror/state@6.5.2)(@codemirror/view@6.36.3)':
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+
   '@rollup/plugin-alias@5.1.1(rollup@3.29.5)':
     optionalDependencies:
       rollup: 3.29.5
@@ -6785,6 +7068,8 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@sphinxxxx/color-conversion@2.2.2': {}
+
   '@stylistic/eslint-plugin@4.1.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/utils': 8.25.0(eslint@9.21.0(jiti@2.4.2))(typescript@5.6.3)
@@ -7410,6 +7695,10 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
+  acorn-typescript@1.4.13(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
   acorn@8.14.0: {}
 
   agent-base@7.1.3: {}
@@ -7421,6 +7710,13 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.0.6
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
   alien-signals@0.4.14: {}
 
   alien-signals@1.0.4: {}
@@ -7476,6 +7772,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  aria-query@5.3.2: {}
+
   assertion-error@2.0.1: {}
 
   ast-kit@1.4.0:
@@ -7502,6 +7800,8 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
+  axobject-query@4.1.0: {}
+
   b4a@1.6.7: {}
 
   balanced-match@1.0.2: {}
@@ -7715,8 +8015,16 @@ snapshots:
 
   clone@2.1.2: {}
 
+  clsx@2.1.1: {}
+
   cluster-key-slot@1.1.2: {}
 
+  codemirror-wrapped-line-indent@1.0.8(@codemirror/language@6.10.8)(@codemirror/state@6.5.2)(@codemirror/view@6.36.3):
+    dependencies:
+      '@codemirror/language': 6.10.8
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -7780,6 +8088,8 @@ snapshots:
       crc-32: 1.2.2
       readable-stream: 4.7.0
 
+  crelt@1.0.6: {}
+
   croner@9.0.0: {}
 
   cronstrue@2.55.0: {}
@@ -7940,6 +8250,8 @@ snapshots:
 
   dfa@1.2.0: {}
 
+  diff-sequences@29.6.3: {}
+
   diff@7.0.0: {}
 
   dir-glob@3.0.1:
@@ -8299,6 +8611,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.2: {}
+
   espree@10.3.0:
     dependencies:
       acorn: 8.14.0
@@ -8315,6 +8629,10 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
+  esrap@1.4.5:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
@@ -8407,6 +8725,8 @@ snapshots:
 
   fast-npm-meta@0.3.1: {}
 
+  fast-uri@3.0.6: {}
+
   fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
@@ -8703,6 +9023,8 @@ snapshots:
 
   image-meta@0.2.1: {}
 
+  immutable-json-patch@6.0.1: {}
+
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -8806,6 +9128,10 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.6
 
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.6
+
   is-ssh@1.4.1:
     dependencies:
       protocols: 2.0.2
@@ -8848,6 +9174,8 @@ snapshots:
 
   jiti@2.4.2: {}
 
+  jmespath@0.16.0: {}
+
   js-levenshtein@1.1.6: {}
 
   js-tokens@4.0.0: {}
@@ -8860,16 +9188,26 @@ snapshots:
 
   jsdoc-type-pratt-parser@4.1.0: {}
 
+  jsep@1.4.0: {}
+
   jsesc@3.0.2: {}
 
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
 
+  json-editor-vue@0.18.0(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      vanilla-jsoneditor: 3.0.0
+      vue: 3.5.13(typescript@5.6.3)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.6.3))
+
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
 
+  json-source-map@0.6.1: {}
+
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@2.2.3: {}
@@ -8880,6 +9218,14 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jsonpath-plus@10.3.0:
+    dependencies:
+      '@jsep-plugin/assignment': 1.3.0(jsep@1.4.0)
+      '@jsep-plugin/regex': 1.0.4(jsep@1.4.0)
+      jsep: 1.4.0
+
+  jsonrepair@3.12.0: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -8985,10 +9331,14 @@ snapshots:
       pkg-types: 1.3.1
       quansync: 0.2.6
 
+  locate-character@3.0.0: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.17.21: {}
+
   lodash.defaults@4.2.0: {}
 
   lodash.isarguments@3.1.0: {}
@@ -9051,6 +9401,8 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  memoize-one@6.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -9165,6 +9517,8 @@ snapshots:
 
   nanotar@0.2.0: {}
 
+  natural-compare-lite@1.4.0: {}
+
   natural-compare@1.4.0: {}
 
   nitropack@2.10.4(typescript@5.6.3):
@@ -10340,6 +10694,8 @@ snapshots:
 
   structured-clone-es@1.0.0: {}
 
+  style-mod@4.1.2: {}
+
   stylehacks@7.0.4(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.4
@@ -10358,6 +10714,23 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svelte@5.20.5:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+      acorn: 8.14.0
+      acorn-typescript: 1.4.13(acorn@8.14.0)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 1.4.5
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.17
+      zimmerframe: 1.1.2
+
   svg-tags@1.0.0: {}
 
   svgo@3.3.2:
@@ -10803,6 +11176,39 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
+  vanilla-jsoneditor@3.0.0:
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.8.0
+      '@codemirror/lang-json': 6.0.1
+      '@codemirror/language': 6.10.8
+      '@codemirror/lint': 6.8.4
+      '@codemirror/search': 6.5.10
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.3
+      '@fortawesome/free-regular-svg-icons': 6.7.2
+      '@fortawesome/free-solid-svg-icons': 6.7.2
+      '@jsonquerylang/jsonquery': 4.1.1
+      '@lezer/highlight': 1.2.1
+      '@replit/codemirror-indentation-markers': 6.5.3(@codemirror/language@6.10.8)(@codemirror/state@6.5.2)(@codemirror/view@6.36.3)
+      ajv: 8.17.1
+      codemirror-wrapped-line-indent: 1.0.8(@codemirror/language@6.10.8)(@codemirror/state@6.5.2)(@codemirror/view@6.36.3)
+      diff-sequences: 29.6.3
+      immutable-json-patch: 6.0.1
+      jmespath: 0.16.0
+      json-source-map: 0.6.1
+      jsonpath-plus: 10.3.0
+      jsonrepair: 3.12.0
+      lodash-es: 4.17.21
+      memoize-one: 6.0.0
+      natural-compare-lite: 1.4.0
+      svelte: 5.20.5
+      vanilla-picker: 2.12.3
+
+  vanilla-picker@2.12.3:
+    dependencies:
+      '@sphinxxxx/color-conversion': 2.2.2
+
   vaul-vue@0.3.0(reka-ui@2.0.2(typescript@5.6.3)(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
       '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.6.3))
@@ -11106,6 +11512,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.3
 
+  w3c-keyname@2.2.8: {}
+
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@7.0.0: {}
@@ -11188,6 +11596,8 @@ snapshots:
 
   zhead@2.2.4: {}
 
+  zimmerframe@1.1.2: {}
+
   zip-stream@6.0.1:
     dependencies:
       archiver-utils: 5.0.2
diff --git a/src/runtime/libs/index.ts b/src/runtime/libs/index.ts
index 9e5a1704..90d67be5 100644
--- a/src/runtime/libs/index.ts
+++ b/src/runtime/libs/index.ts
@@ -25,10 +25,9 @@ export const buildLibraryCollections = (options: NuxtOptions) => [
 
 export async function getLibraryCollections(options: NuxtOptions, appResolver: Resolver) {
   const supportedCollections = buildLibraryCollections(options)
-  const result = []
-
   if (process.env.COMPODIUM_TEST === 'true') return supportedCollections
 
+  const result = []
   for (const collection of supportedCollections) {
     const appPath = appResolver.resolve(`node_modules/${collection.path}/package.json`)
     const packagePath = existsSync(appPath) ? appPath : resolve(`node_modules/${collection.path}/package.json`)
diff --git a/src/runtime/server/services/infer.ts b/src/runtime/server/services/infer.ts
index 9b9a8c67..abbc5ccb 100644
--- a/src/runtime/server/services/infer.ts
+++ b/src/runtime/server/services/infer.ts
@@ -48,8 +48,9 @@ export type DateInputSchema = z.infer<typeof dateInputSchema>
 const stringEnumInputSchema = z.object({
   kind: z.literal('enum'),
   schema: z.array(z.string())
-    .or(z.record(z.any(), z.string()).transform<string[]>(t => Object.values(t)))
-    .transform<string[]>(t => t.filter(s => s.trim().match(/^["'`]/)).map(s => s.trim().replaceAll(/["'`]/g, '')))
+    .or(z.record(z.any(), z.string()).transform(t => Object.values(t)))
+    .transform(t => t.filter(s => s.trim().match(/^["'`]/)))
+    .transform(t => t.map(s => s.trim().replaceAll(/["'`]/g, '')))
     .pipe(z.array(z.string()).min(1)),
   type: z.string(),
   default: z.any()
@@ -80,9 +81,9 @@ export type PrimitiveArrayInputSchema = z.infer<typeof primitiveArrayInputSchema
 
 const arrayInputSchema = z.object({
   kind: z.literal('array'),
-  schema: z.array(z.any({}))
-    .or(z.record(z.any(), z.any({})).transform(t => Object.values(t)))
-    .transform((t) => { return t.filter(s => s !== 'undefined') }).pipe(z.array(z.any()).min(1)),
+  schema: z.array(z.any())
+    .or(z.record(z.any(), z.any()).transform(t => Object.values(t)).transform(t => t.filter(s => s !== 'undefined')))
+    .pipe(z.array(z.any()).min(1)),
   type: z.string(),
   default: z.any()
 })