From b5da766165341eb79a54d1820281afa88e772ece Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sat, 1 Mar 2025 19:57:40 +0100
Subject: [PATCH 01/19] feat: improve property inputs

---
 devtools/app/components/ComponentCode.vue     |  1 +
 .../app/components/ComponentPropInput.vue     | 35 ++++++------
 devtools/app/components/inputs/ArrayInput.vue | 53 +++++++++++++------
 .../app/components/inputs/NumberInput.vue     |  2 +-
 .../app/components/inputs/ObjectInput.vue     |  8 +--
 .../components/inputs/PrimitiveArrayInput.vue |  8 +--
 .../app/components/inputs/StringInput.vue     |  7 ++-
 devtools/app/composables/useShiki.ts          | 25 ++++++++-
 devtools/app/pages/components/[id].vue        |  3 +-
 playground/components/CompodiumWelcome.vue    | 14 +++--
 playground/components/InputProps.vue          | 31 +++++++++++
 src/runtime/server/api/component-meta.get.ts  |  7 ++-
 src/runtime/server/services/infer.ts          | 11 ++--
 13 files changed, 151 insertions(+), 54 deletions(-)
 create mode 100644 playground/components/InputProps.vue

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..e1297c9e 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -22,7 +22,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, arrayItem?: boolean }>()
 const modelValue = defineModel<any>()
 
 const currentType = ref()
@@ -39,6 +39,8 @@ const currentInput = computed<PropSchema & { component: Component } | null>(() =
   return null
 })
 
+console.log('val', props.schema, currentInput.value)
+
 function inferDefaultInput(value?: any, types?: PropSchema[]): PropSchema | undefined {
   if (!value) return
   const valueType = typeof value
@@ -62,17 +64,30 @@ const description = computed(() => {
     <UFormField
       :name="name"
       class="w-full"
-      :ui="{ wrapper: 'mb-2' }"
       :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
+      :ui="{ label: 'w-full' }"
     >
       <template #label>
-        <div>
+        <div class="flex w-full justify-between gap-2 mb-2">
           <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)]"
+            class="flex-none font-mono font-semibold px-1.5 py-0.5 border border-(--ui-border-accented)/50 rounded bg-[var(--ui-bg-elevated)]"
           >
             {{ name }}
           </p>
+          <span v-else />
+
+          <USelect
+            v-if="schema?.length > 1"
+            v-model="currentType"
+            variant="none"
+            :items="schema"
+            label-key="type"
+            value-key="type"
+            trailing-icon=""
+            class="max-w-50 py-0.5 font-mono bg-(--ui-bg-elevated)/50 border border-(--ui-border)"
+            @update:model-value="modelValue = undefined"
+          />
         </div>
       </template>
 
@@ -89,18 +104,8 @@ const description = computed(() => {
         v-if="!disabled && currentInput"
         v-model="modelValue"
         :schema="currentInput.schema"
+        :array-item="arrayItem"
       />
     </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"
-    />
   </div>
 </template>
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
index ba3560a1..11e14fe3 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
@@ -30,22 +30,41 @@ function updateValue(index: number, value: any) {
     <div
       v-for="value, index in modelValue"
       :key="index"
-      class="relative"
+      class="relative mb-2 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)"
-      />
+      <UCollapsible :ui="{ root: 'border border-(--ui-border) w-full rounded-md' }">
+        <UButton
+          :label="'Value ' + (index + 1)"
+          class="group rounded-b-none border-(--ui-border) font-semibold"
+          color="neutral"
+          variant="ghost"
+          trailing-icon="i-lucide-chevron-down"
+          block
+          :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
+        />
+
+        <template #content>
+          <ComponentPropInput
+            :model-value="value"
+            :schema="schema.schema"
+            array-item
+            class="px-4 pb-4 pt-2"
+            @update:model-value="(val) => updateValue(index, val)"
+          />
+        </template>
+      </UCollapsible>
+
+      <div>
+        <UButton
+          variant="outline"
+          color="neutral"
+          icon="lucide:x"
+          size="sm"
+          square
+          class="p-2"
+          @click="removeArrayItem(index)"
+        />
+      </div>
     </div>
 
     <UButton
@@ -53,7 +72,7 @@ function updateValue(index: number, value: any) {
       color="neutral"
       variant="ghost"
       block
-      class="justify-center mt-4"
+      class="justify-center"
       @click="addArrayItem()"
     >
       Add value
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 4e406bdf..f25358b0 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ObjectInputSchema } from '#module/runtime/server/services/infer'
 
-const props = defineProps<{ schema: ObjectInputSchema }>()
+const props = defineProps<{ schema: ObjectInputSchema, arrayItem: boolean }>()
 
 const modelValue = defineModel<Record<string, any>>({})
 
@@ -11,20 +11,20 @@ const attrs = computed(() => {
 </script>
 
 <template>
-  <CollapseContainer>
+  <div :class="{ 'border-none p-0': arrayItem, 'p-4 rounded-md border border-(--ui-border)': !arrayItem }">
     <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"
+      class="not-last:mb-4"
       @update:model-value="(value: any) => {
         if (!modelValue) modelValue ||= {}
         else modelValue[attr.name] = value
       }"
     />
-  </CollapseContainer>
+  </div>
 </template>
diff --git a/devtools/app/components/inputs/PrimitiveArrayInput.vue b/devtools/app/components/inputs/PrimitiveArrayInput.vue
index 21a21c4c..4f2b9a1c 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,7 @@ function onCreate(item: string) {
     no-portal
     :items="items"
     :ui="{ viewport: 'invisible', content: 'invisible' }"
-    class="min-w-56"
+    class="max-w-56"
     @create="onCreate"
   >
     <template #trailing>
diff --git a/devtools/app/components/inputs/StringInput.vue b/devtools/app/components/inputs/StringInput.vue
index d6c8ef9d..0293d655 100644
--- a/devtools/app/components/inputs/StringInput.vue
+++ b/devtools/app/components/inputs/StringInput.vue
@@ -5,5 +5,10 @@ defineProps<{ schema: StringEnumInputSchema }>()
 </script>
 
 <template>
-  <UInput class="min-w-56" />
+  <UTextarea
+    class="min-w-56"
+    :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 429fe7a0..247fa62a 100644
--- a/devtools/app/pages/components/[id].vue
+++ b/devtools/app/pages/components/[id].vue
@@ -50,6 +50,7 @@ const { data: componentMeta, refresh: refreshComponentMeta } = useAsyncData('__c
 }, { watch: [componentId] })
 
 const { data: exampleMeta } = useAsyncData('__compodium-fetch-example-meta', async () => {
+  if (!exampleId.value) return
   const example = await $fetch<ComponentMeta>(`/api/component-meta/${exampleId.value}`, { baseURL: '/__compodium__' })
   return example
 }, { watch: [exampleId] })
@@ -219,7 +220,7 @@ watch(component, () => propsSearchTerm.value = '')
               :schema="prop.schema"
               :name="prop.name"
               :description="prop.description"
-              class="p-4 rounded"
+              class="m-4 rounded"
               @update:model-value="updatePropsDebounced"
             />
           </div>
diff --git a/playground/components/CompodiumWelcome.vue b/playground/components/CompodiumWelcome.vue
index 71467067..70a1478c 100644
--- a/playground/components/CompodiumWelcome.vue
+++ b/playground/components/CompodiumWelcome.vue
@@ -6,19 +6,27 @@ withDefaults(defineProps<{
   title?: string
   shakeIt?: boolean
   spinIt?: boolean
-  bounceIt?: boolean
+  bounceIt?: boolean | string | number
+  obj?: { foo: string }
+  objArr?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[]
+  boolArr: boolean[]
+  objMatrix?: (({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[])[]
+  numMatrix?: number[][]
 }>(), { title: 'Welcome!' })
 
 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..2cf5c9a1
--- /dev/null
+++ b/playground/components/InputProps.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const _props = defineProps<{
+  string?: string
+  number?: number
+  boolean?: boolean
+  primitiveUnion?: string | number | boolean
+  stringArray: string[]
+  numberArray: number[]
+  booleanArray: boolean[]
+  object?: { foo: string }
+  objectArray?: ({ foo: string | number } | { fee: string })[]
+  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)[][]
+}>()
+
+extendCompodiumMeta<typeof _props>({
+  defaultProps: {
+    string: 'hello',
+    primitiveUnion: 42,
+    objectArray: [{ foo: 'aksjda' }],
+    object: { foo: 'kasjdkja' }
+  }
+})
+</script>
+
+<template>
+  <p> Supported prop types </p>
+</template>
diff --git a/src/runtime/server/api/component-meta.get.ts b/src/runtime/server/api/component-meta.get.ts
index 69fb181b..c3f66d0a 100644
--- a/src/runtime/server/api/component-meta.get.ts
+++ b/src/runtime/server/api/component-meta.get.ts
@@ -5,6 +5,7 @@ import { useAppConfig } from '#imports'
 import { getChecker } from '../services/checker'
 import { inferPropTypes } from '../services/infer'
 import { camelCase } from 'scule'
+import type { CompodiumMeta } from '@compodium/meta'
 
 export default defineEventHandler(async (event) => {
   appendHeader(event, 'Access-Control-Allow-Origin', '*')
@@ -43,6 +44,8 @@ export default defineEventHandler(async (event) => {
           ...meta.compodium?.defaultProps
         }
       }
-    }
-  }
+    },
+    // TODO: remove
+    srcMeta: meta
+  } as CompodiumMeta
 })
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()
 })

From aa907b7ad5f6272315bdcbffa8d570f2cf89250b Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sat, 1 Mar 2025 22:07:01 +0100
Subject: [PATCH 02/19] feat: inline type select in collapsible header

---
 .../app/components/ComponentPropInput.vue     | 82 +++++++++++++------
 devtools/app/components/inputs/ArrayInput.vue | 34 +++-----
 .../app/components/inputs/ObjectInput.vue     |  7 +-
 devtools/app/pages/components/[id].vue        |  4 +-
 playground/components/CompodiumWelcome.vue    |  5 --
 playground/components/InputProps.vue          |  1 +
 6 files changed, 77 insertions(+), 56 deletions(-)

diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index e1297c9e..105ccdac 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, arrayItem?: boolean }>()
+const props = defineProps<{ name?: string, schema: PropSchema[], description?: string, disabled?: boolean, collapsible?: boolean, defaultOpen?: boolean }>()
 const modelValue = defineModel<any>()
 
 const currentType = ref()
@@ -39,8 +40,6 @@ const currentInput = computed<PropSchema & { component: Component } | null>(() =
   return null
 })
 
-console.log('val', props.schema, currentInput.value)
-
 function inferDefaultInput(value?: any, types?: PropSchema[]): PropSchema | undefined {
   if (!value) return
   const valueType = typeof value
@@ -57,11 +56,63 @@ 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 [DefineSelect, ReuseSelect] = createReusableTemplate()
+const [DefineInput, ReuseInput] = createReusableTemplate()
 </script>
 
 <template>
-  <div class="relative">
+  <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=""
+        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"
+        :schema="currentInput.schema"
+      />
+    </DefineInput>
+
+    <UCollapsible
+      v-if="collapsible"
+      :default-open="defaultOpen"
+      :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: 'p-4 border-t border-(--ui-border)' }"
+    >
+      <UButton
+        class="group rounded-b-none border-(--ui-border)"
+        color="neutral"
+        variant="ghost"
+        block
+        :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
+      >
+        <div class="flex justify-between w-full">
+          <p class="font-semibold truncate text-ellipsis max-w-50">
+            {{ name }}
+          </p>
+          <ReuseSelect />
+        </div>
+      </UButton>
+      <template #content>
+        <ReuseInput collapsible />
+      </template>
+    </UCollapsible>
+
     <UFormField
+      v-else
       :name="name"
       class="w-full"
       :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
@@ -71,23 +122,12 @@ const description = computed(() => {
         <div class="flex w-full justify-between gap-2 mb-2">
           <p
             v-if="name"
-            class="flex-none font-mono font-semibold px-1.5 py-0.5 border border-(--ui-border-accented)/50 rounded bg-[var(--ui-bg-elevated)]"
+            class="truncate text-ellipsis font-mono font-semibold px-1.5 py-0.5 border border-(--ui-border-accented)/50 rounded bg-[var(--ui-bg-elevated)]"
           >
             {{ name }}
           </p>
           <span v-else />
-
-          <USelect
-            v-if="schema?.length > 1"
-            v-model="currentType"
-            variant="none"
-            :items="schema"
-            label-key="type"
-            value-key="type"
-            trailing-icon=""
-            class="max-w-50 py-0.5 font-mono bg-(--ui-bg-elevated)/50 border border-(--ui-border)"
-            @update:model-value="modelValue = undefined"
-          />
+          <ReuseSelect />
         </div>
       </template>
 
@@ -99,13 +139,7 @@ const description = computed(() => {
           v-html="description"
         />
       </template>
-      <component
-        :is="currentInput.component"
-        v-if="!disabled && currentInput"
-        v-model="modelValue"
-        :schema="currentInput.schema"
-        :array-item="arrayItem"
-      />
+      <ReuseInput />
     </UFormField>
   </div>
 </template>
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
index 11e14fe3..96d58643 100644
--- a/devtools/app/components/inputs/ArrayInput.vue
+++ b/devtools/app/components/inputs/ArrayInput.vue
@@ -30,29 +30,17 @@ function updateValue(index: number, value: any) {
     <div
       v-for="value, index in modelValue"
       :key="index"
-      class="relative mb-2 w-full flex gap-2"
+      class="relative mb-2 w-full flex gap-1.5"
     >
-      <UCollapsible :ui="{ root: 'border border-(--ui-border) w-full rounded-md' }">
-        <UButton
-          :label="'Value ' + (index + 1)"
-          class="group rounded-b-none border-(--ui-border) font-semibold"
-          color="neutral"
-          variant="ghost"
-          trailing-icon="i-lucide-chevron-down"
-          block
-          :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
-        />
-
-        <template #content>
-          <ComponentPropInput
-            :model-value="value"
-            :schema="schema.schema"
-            array-item
-            class="px-4 pb-4 pt-2"
-            @update:model-value="(val) => updateValue(index, val)"
-          />
-        </template>
-      </UCollapsible>
+      <ComponentPropInput
+        :model-value="value"
+        :schema="schema.schema"
+        :name="'Value ' + (index + 1)"
+        array-item
+        collapsible
+        :default-open="true"
+        @update:model-value="(val) => updateValue(index, val)"
+      />
 
       <div>
         <UButton
@@ -61,7 +49,7 @@ function updateValue(index: number, value: any) {
           icon="lucide:x"
           size="sm"
           square
-          class="p-2"
+          class="p-2.5"
           @click="removeArrayItem(index)"
         />
       </div>
diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index f25358b0..d2061a67 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ObjectInputSchema } from '#module/runtime/server/services/infer'
 
-const props = defineProps<{ schema: ObjectInputSchema, arrayItem: boolean }>()
+const props = defineProps<{ schema: ObjectInputSchema, collapsible: boolean }>()
 
 const modelValue = defineModel<Record<string, any>>({})
 
@@ -11,7 +11,10 @@ const attrs = computed(() => {
 </script>
 
 <template>
-  <div :class="{ 'border-none p-0': arrayItem, 'p-4 rounded-md border border-(--ui-border)': !arrayItem }">
+  <div
+    class="border-(--ui-border)"
+    :class="{ 'p-4 rounded-md border': !collapsible }"
+  >
     <ComponentPropInput
       v-for="attr in attrs"
       :key="attr.name"
diff --git a/devtools/app/pages/components/[id].vue b/devtools/app/pages/components/[id].vue
index 247fa62a..862739d2 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"
@@ -220,7 +220,7 @@ watch(component, () => propsSearchTerm.value = '')
               :schema="prop.schema"
               :name="prop.name"
               :description="prop.description"
-              class="m-4 rounded"
+              class="p-4 rounded"
               @update:model-value="updatePropsDebounced"
             />
           </div>
diff --git a/playground/components/CompodiumWelcome.vue b/playground/components/CompodiumWelcome.vue
index 70a1478c..6dba33d8 100644
--- a/playground/components/CompodiumWelcome.vue
+++ b/playground/components/CompodiumWelcome.vue
@@ -7,11 +7,6 @@ withDefaults(defineProps<{
   shakeIt?: boolean
   spinIt?: boolean
   bounceIt?: boolean | string | number
-  obj?: { foo: string }
-  objArr?: ({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[]
-  boolArr: boolean[]
-  objMatrix?: (({ foo: string | number } | { fee: string })[] | ({ foo: number } | { fee: string })[])[]
-  numMatrix?: number[][]
 }>(), { title: 'Welcome!' })
 
 extendCompodiumMeta({
diff --git a/playground/components/InputProps.vue b/playground/components/InputProps.vue
index 2cf5c9a1..27854aef 100644
--- a/playground/components/InputProps.vue
+++ b/playground/components/InputProps.vue
@@ -14,6 +14,7 @@ const _props = defineProps<{
   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>({

From c6af817c22755da39010d21d984f65200af8dc58 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sat, 1 Mar 2025 23:32:31 +0100
Subject: [PATCH 03/19] chore: up

---
 .../app/components/ComponentPropInput.vue     | 81 ++++++++++---------
 devtools/app/components/inputs/ArrayInput.vue |  6 +-
 devtools/app/pages/components/[id].vue        |  2 +-
 playground/components/InputProps.vue          |  3 +
 4 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index 105ccdac..b9f3b3a3 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -23,7 +23,7 @@ const inputTypes: Record<PropInputType, Component> = {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{ name?: string, schema: PropSchema[], description?: string, disabled?: boolean, collapsible?: boolean, defaultOpen?: boolean }>()
+const props = defineProps<{ name: string, schema: PropSchema[], description?: string, disabled?: boolean, collapsible?: boolean, defaultOpen?: boolean }>()
 const modelValue = defineModel<any>()
 
 const currentType = ref()
@@ -59,6 +59,8 @@ const description = computed(() => {
 
 const [DefineSelect, ReuseSelect] = createReusableTemplate()
 const [DefineInput, ReuseInput] = createReusableTemplate()
+const [DefineLabel, ReuseLabel] = createReusableTemplate()
+const [DefineDescription, ReuseDescription] = createReusableTemplate()
 </script>
 
 <template>
@@ -87,58 +89,61 @@ const [DefineInput, ReuseInput] = createReusableTemplate()
       />
     </DefineInput>
 
-    <UCollapsible
-      v-if="collapsible"
-      :default-open="defaultOpen"
-      :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: 'p-4 border-t border-(--ui-border)' }"
-    >
-      <UButton
-        class="group rounded-b-none border-(--ui-border)"
-        color="neutral"
-        variant="ghost"
-        block
-        :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
+    <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"
+      />
+    </DefineDescription>
+
+    <template v-if="collapsible">
+      <UCollapsible
+        :default-open="defaultOpen"
+        :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: 'p-4 border-t border-(--ui-border)' }"
       >
-        <div class="flex justify-between w-full">
-          <p class="font-semibold truncate text-ellipsis max-w-50">
-            {{ name }}
-          </p>
-          <ReuseSelect />
-        </div>
-      </UButton>
-      <template #content>
-        <ReuseInput collapsible />
-      </template>
-    </UCollapsible>
+        <UButton
+          class="group rounded-b-none text-sm ring-0 hover:bg-(--ui-bg-elevated)/50 py-1 flex justify-between w-full"
+          color="neutral"
+          size="sm"
+          variant="ghost"
+          block
+          :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
+        >
+          <ReuseLabel />
+          <ReuseSelect class="border-none" />
+        </UButton>
+        <template #content>
+          <ReuseInput :collapsible="collapsible" />
+        </template>
+      </UCollapsible>
 
+      <ReuseDescription />
+    </template>
     <UFormField
       v-else
       :name="name"
       class="w-full"
       :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
-      :ui="{ label: 'w-full' }"
+      :ui="{ label: 'w-full mb-1' }"
     >
       <template #label>
-        <div class="flex w-full justify-between gap-2 mb-2">
-          <p
-            v-if="name"
-            class="truncate text-ellipsis font-mono font-semibold px-1.5 py-0.5 border border-(--ui-border-accented)/50 rounded bg-[var(--ui-bg-elevated)]"
-          >
-            {{ name }}
-          </p>
-          <span v-else />
+        <div class="flex w-full justify-between gap-2">
+          <ReuseLabel class="py-0.5 px-1.5 font-mono bg-(--ui-bg-elevated)/50 border border-(--ui-border) rounded text-md" />
           <ReuseSelect />
         </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"
-        />
+        <ReuseDescription class="mb-2" />
       </template>
+
       <ReuseInput />
     </UFormField>
   </div>
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
index 96d58643..ea4b1ce4 100644
--- a/devtools/app/components/inputs/ArrayInput.vue
+++ b/devtools/app/components/inputs/ArrayInput.vue
@@ -30,7 +30,7 @@ function updateValue(index: number, value: any) {
     <div
       v-for="value, index in modelValue"
       :key="index"
-      class="relative mb-2 w-full flex gap-1.5"
+      class="relative mb-1 w-full flex gap-2"
     >
       <ComponentPropInput
         :model-value="value"
@@ -38,7 +38,6 @@ function updateValue(index: number, value: any) {
         :name="'Value ' + (index + 1)"
         array-item
         collapsible
-        :default-open="true"
         @update:model-value="(val) => updateValue(index, val)"
       />
 
@@ -49,7 +48,7 @@ function updateValue(index: number, value: any) {
           icon="lucide:x"
           size="sm"
           square
-          class="p-2.5"
+          class="p-1.75"
           @click="removeArrayItem(index)"
         />
       </div>
@@ -60,7 +59,6 @@ function updateValue(index: number, value: any) {
       color="neutral"
       variant="ghost"
       block
-      class="justify-center"
       @click="addArrayItem()"
     >
       Add value
diff --git a/devtools/app/pages/components/[id].vue b/devtools/app/pages/components/[id].vue
index 862739d2..6dc29bc2 100644
--- a/devtools/app/pages/components/[id].vue
+++ b/devtools/app/pages/components/[id].vue
@@ -220,7 +220,7 @@ watch(component, () => propsSearchTerm.value = '')
               :schema="prop.schema"
               :name="prop.name"
               :description="prop.description"
-              class="p-4 rounded"
+              class="p-3 rounded"
               @update:model-value="updatePropsDebounced"
             />
           </div>
diff --git a/playground/components/InputProps.vue b/playground/components/InputProps.vue
index 27854aef..40cb51ae 100644
--- a/playground/components/InputProps.vue
+++ b/playground/components/InputProps.vue
@@ -7,6 +7,9 @@ const _props = defineProps<{
   stringArray: string[]
   numberArray: number[]
   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 }
   objectArray?: ({ foo: string | number } | { fee: string })[]
   arrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[]

From e30aff5caa2296f3f047730c55a9bf8a6a884759 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 09:45:33 +0100
Subject: [PATCH 04/19] chore: up

---
 devtools/app/components/ComponentPropInput.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index b9f3b3a3..5262d8c7 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -106,18 +106,18 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
     <template v-if="collapsible">
       <UCollapsible
         :default-open="defaultOpen"
-        :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: 'p-4 border-t border-(--ui-border)' }"
+        :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: 'p-4' }"
       >
         <UButton
-          class="group rounded-b-none text-sm ring-0 hover:bg-(--ui-bg-elevated)/50 py-1 flex justify-between w-full"
+          class="rounded-b-none text-sm py-1 flex justify-between w-full"
           color="neutral"
           size="sm"
           variant="ghost"
           block
-          :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
+          :ui="{ base: 'py-1 hover:bg-(--ui-bg-elevated)/50', trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
         >
-          <ReuseLabel />
-          <ReuseSelect class="border-none" />
+          <ReuseLabel class="text-sm" />
+          <ReuseSelect />
         </UButton>
         <template #content>
           <ReuseInput :collapsible="collapsible" />
@@ -135,7 +135,7 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
     >
       <template #label>
         <div class="flex w-full justify-between gap-2">
-          <ReuseLabel class="py-0.5 px-1.5 font-mono bg-(--ui-bg-elevated)/50 border border-(--ui-border) rounded text-md" />
+          <ReuseLabel />
           <ReuseSelect />
         </div>
       </template>

From e14109b3bf398c1d0f8dac9e2ab0bfd168ef46d6 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 10:42:34 +0100
Subject: [PATCH 05/19] chore: up

---
 .../app/components/ComponentPropInput.vue     | 23 +++++++++++--------
 devtools/app/components/inputs/ArrayInput.vue | 16 ++++++++++---
 .../app/components/inputs/ObjectInput.vue     |  9 +++-----
 playground/components/InputProps.vue          |  9 ++++++--
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index 5262d8c7..f800065d 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -57,6 +57,9 @@ 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 open = defineModel<boolean>('open')
+const isObject = computed(() => currentInput.value?.inputType === 'object')
+
 const [DefineSelect, ReuseSelect] = createReusableTemplate()
 const [DefineInput, ReuseInput] = createReusableTemplate()
 const [DefineLabel, ReuseLabel] = createReusableTemplate()
@@ -74,7 +77,7 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
         :items="schema"
         label-key="type"
         value-key="type"
-        trailing-icon=""
+        :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"
       />
@@ -103,10 +106,11 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
       />
     </DefineDescription>
 
-    <template v-if="collapsible">
+    <template v-if="collapsible || isObject">
       <UCollapsible
-        :default-open="defaultOpen"
-        :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: 'p-4' }"
+        v-model:open="open"
+        :default-open="defaultOpen || isObject"
+        :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: !isObject ? 'p-4' : '' }"
       >
         <UButton
           class="rounded-b-none text-sm py-1 flex justify-between w-full"
@@ -114,7 +118,7 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
           size="sm"
           variant="ghost"
           block
-          :ui="{ base: 'py-1 hover:bg-(--ui-bg-elevated)/50', trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
+          :ui="{ base: 'py-1.5 hover:bg-(--ui-bg-elevated)/50', trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
         >
           <ReuseLabel class="text-sm" />
           <ReuseSelect />
@@ -123,15 +127,16 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
           <ReuseInput :collapsible="collapsible" />
         </template>
       </UCollapsible>
-
-      <ReuseDescription />
+      <div class="mt-2">
+        <ReuseDescription />
+      </div>
     </template>
     <UFormField
       v-else
       :name="name"
       class="w-full"
       :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
-      :ui="{ label: 'w-full mb-1' }"
+      :ui="{ label: 'w-full', description: 'mb-2' }"
     >
       <template #label>
         <div class="flex w-full justify-between gap-2">
@@ -141,7 +146,7 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
       </template>
 
       <template #description>
-        <ReuseDescription class="mb-2" />
+        <ReuseDescription />
       </template>
 
       <ReuseInput />
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
index ea4b1ce4..78816e9b 100644
--- a/devtools/app/components/inputs/ArrayInput.vue
+++ b/devtools/app/components/inputs/ArrayInput.vue
@@ -16,6 +16,7 @@ function addArrayItem() {
   } else {
     modelValue.value.push(null)
   }
+  openedItem.value = modelValue.value?.length - 1
 }
 
 function updateValue(index: number, value: any) {
@@ -23,6 +24,13 @@ function updateValue(index: number, value: any) {
   modelValue.value[index] = value
   modelValue.value = [...modelValue.value]
 }
+
+const openedItem = ref<number | null>(0)
+
+function onUpdateOpen(index: number, value?: boolean) {
+  if (!value && openedItem.value === index) openedItem.value = null
+  if (value) openedItem.value = index
+}
 </script>
 
 <template>
@@ -30,15 +38,17 @@ function updateValue(index: number, value: any) {
     <div
       v-for="value, index in modelValue"
       :key="index"
-      class="relative mb-1 w-full flex gap-2"
+      class="relative w-full flex gap-2"
     >
       <ComponentPropInput
         :model-value="value"
         :schema="schema.schema"
-        :name="'Value ' + (index + 1)"
+        :name="'value ' + (index + 1)"
         array-item
         collapsible
+        :open="openedItem === index"
         @update:model-value="(val) => updateValue(index, val)"
+        @update:open="(val) => onUpdateOpen(index, val)"
       />
 
       <div>
@@ -48,7 +58,7 @@ function updateValue(index: number, value: any) {
           icon="lucide:x"
           size="sm"
           square
-          class="p-1.75"
+          class="p-2.25"
           @click="removeArrayItem(index)"
         />
       </div>
diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index d2061a67..1c4f9c6b 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ObjectInputSchema } from '#module/runtime/server/services/infer'
 
-const props = defineProps<{ schema: ObjectInputSchema, collapsible: boolean }>()
+const props = defineProps<{ schema: ObjectInputSchema }>()
 
 const modelValue = defineModel<Record<string, any>>({})
 
@@ -11,10 +11,7 @@ const attrs = computed(() => {
 </script>
 
 <template>
-  <div
-    class="border-(--ui-border)"
-    :class="{ 'p-4 rounded-md border': !collapsible }"
-  >
+  <div>
     <ComponentPropInput
       v-for="attr in attrs"
       :key="attr.name"
@@ -23,7 +20,7 @@ const attrs = computed(() => {
       :name="attr.name"
       :description="attr.description"
       :default-value="attr.default"
-      class="not-last:mb-4"
+      class="p-4 not-last:border-b border-(--ui-border)"
       @update:model-value="(value: any) => {
         if (!modelValue) modelValue ||= {}
         else modelValue[attr.name] = value
diff --git a/playground/components/InputProps.vue b/playground/components/InputProps.vue
index 40cb51ae..32a5e908 100644
--- a/playground/components/InputProps.vue
+++ b/playground/components/InputProps.vue
@@ -24,8 +24,13 @@ extendCompodiumMeta<typeof _props>({
   defaultProps: {
     string: 'hello',
     primitiveUnion: 42,
-    objectArray: [{ foo: 'aksjda' }],
-    object: { foo: 'kasjdkja' }
+    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>

From bb3ff59521faabd593255d261d98888d58ccf24f Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 13:24:17 +0100
Subject: [PATCH 06/19] chore: up

---
 .../app/components/ComponentPropInput.vue     | 86 ++++++++++---------
 devtools/app/components/inputs/ArrayInput.vue | 38 +++-----
 .../app/components/inputs/BooleanInput.vue    |  2 +-
 .../app/components/inputs/ObjectInput.vue     | 76 ++++++++++++----
 .../components/inputs/PrimitiveArrayInput.vue |  1 -
 .../app/components/inputs/StringEnumInput.vue |  5 +-
 .../app/components/inputs/StringInput.vue     |  1 -
 devtools/app/pages/components/[id].vue        |  1 +
 playground/components/InputProps.vue          | 12 +++
 9 files changed, 133 insertions(+), 89 deletions(-)

diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index f800065d..e12de412 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -23,7 +23,7 @@ const inputTypes: Record<PropInputType, Component> = {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{ name: string, schema: PropSchema[], description?: string, disabled?: boolean, collapsible?: boolean, defaultOpen?: boolean }>()
+const props = defineProps<{ name: string, schema: PropSchema[], description?: string, disabled?: boolean, inline?: boolean }>()
 const modelValue = defineModel<any>()
 
 const currentType = ref()
@@ -57,8 +57,7 @@ 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 open = defineModel<boolean>('open')
-const isObject = computed(() => currentInput.value?.inputType === 'object')
+const isArray = computed(() => currentInput.value?.inputType === 'array')
 
 const [DefineSelect, ReuseSelect] = createReusableTemplate()
 const [DefineInput, ReuseInput] = createReusableTemplate()
@@ -88,7 +87,9 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
         :is="currentInput.component"
         v-if="!disabled && currentInput"
         v-model="modelValue"
+        class="w-full"
         :schema="currentInput.schema"
+        :name="name"
       />
     </DefineInput>
 
@@ -106,50 +107,53 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
       />
     </DefineDescription>
 
-    <template v-if="collapsible || isObject">
-      <UCollapsible
-        v-model:open="open"
-        :default-open="defaultOpen || isObject"
-        :ui="{ root: 'w-full border border-(--ui-border) rounded-md', content: !isObject ? 'p-4' : '' }"
+    <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' }"
       >
-        <UButton
-          class="rounded-b-none text-sm py-1 flex justify-between w-full"
-          color="neutral"
-          size="sm"
-          variant="ghost"
-          block
-          :ui="{ base: 'py-1.5 hover:bg-(--ui-bg-elevated)/50', trailingIcon: 'group-data-[state=open]:rotate-180 transition duration-200' }"
-        >
-          <ReuseLabel class="text-sm" />
+        <template #label>
+          <ReuseLabel class="py-0.5" />
           <ReuseSelect />
-        </UButton>
-        <template #content>
-          <ReuseInput :collapsible="collapsible" />
         </template>
-      </UCollapsible>
-      <div class="mt-2">
+
         <ReuseDescription />
-      </div>
-    </template>
-    <UFormField
-      v-else
-      :name="name"
-      class="w-full"
-      :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
-      :ui="{ label: 'w-full', description: 'mb-2' }"
-    >
-      <template #label>
-        <div class="flex w-full justify-between gap-2">
-          <ReuseLabel />
-          <ReuseSelect />
+
+        <div class="flex gap-2 justify-center">
+          <ReuseInput />
+          <slot name="actions" />
         </div>
-      </template>
+      </UFormField>
+    </template>
 
-      <template #description>
+    <template v-else>
+      <div class="flex justify-end mb-1">
+        <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 />
-      </template>
-
-      <ReuseInput />
-    </UFormField>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/devtools/app/components/inputs/ArrayInput.vue b/devtools/app/components/inputs/ArrayInput.vue
index 78816e9b..0d27f2e3 100644
--- a/devtools/app/components/inputs/ArrayInput.vue
+++ b/devtools/app/components/inputs/ArrayInput.vue
@@ -26,15 +26,10 @@ function updateValue(index: number, value: any) {
 }
 
 const openedItem = ref<number | null>(0)
-
-function onUpdateOpen(index: number, value?: boolean) {
-  if (!value && openedItem.value === index) openedItem.value = null
-  if (value) openedItem.value = index
-}
 </script>
 
 <template>
-  <div>
+  <div class="flex flex-col gap-2">
     <div
       v-for="value, index in modelValue"
       :key="index"
@@ -43,25 +38,20 @@ function onUpdateOpen(index: number, value?: boolean) {
       <ComponentPropInput
         :model-value="value"
         :schema="schema.schema"
-        :name="'value ' + (index + 1)"
-        array-item
-        collapsible
-        :open="openedItem === index"
         @update:model-value="(val) => updateValue(index, val)"
-        @update:open="(val) => onUpdateOpen(index, val)"
-      />
-
-      <div>
-        <UButton
-          variant="outline"
-          color="neutral"
-          icon="lucide:x"
-          size="sm"
-          square
-          class="p-2.25"
-          @click="removeArrayItem(index)"
-        />
-      </div>
+      >
+        <template #actions>
+          <UButton
+            variant="outline"
+            color="neutral"
+            icon="i-lucide-x"
+            size="sm"
+            class="p-2"
+            square
+            @click="removeArrayItem(index)"
+          />
+        </template>
+      </ComponentPropInput>
     </div>
 
     <UButton
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/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 1c4f9c6b..ef839219 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -1,30 +1,72 @@
 <script setup lang="ts">
 import type { ObjectInputSchema } from '#module/runtime/server/services/infer'
 
-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 modalState = ref(false)
 </script>
 
 <template>
-  <div>
-    <ComponentPropInput
-      v-for="attr in attrs"
-      :key="attr.name"
-      :model-value="modelValue?.[attr.name]"
-      :schema="attr.schema"
-      :name="attr.name"
-      :description="attr.description"
-      :default-value="attr.default"
-      class="p-4 not-last:border-b border-(--ui-border)"
-      @update:model-value="(value: any) => {
-        if (!modelValue) modelValue ||= {}
-        else modelValue[attr.name] = value
-      }"
-    />
-  </div>
+  <UModal
+    ref="modal"
+    v-model:open="modalState"
+    close-icon="i-lucide-x"
+    class="rounded"
+  >
+    <UButton
+      color="neutral"
+      variant="outline"
+      trailing-icon="lucide:square-arrow-out-up-right"
+      block
+    >
+      Edit
+    </UButton>
+    <template #content>
+      <UCard
+        :ui="{
+          body: 'p-0 sm:p-0 max-h-[60vh] overflow-y-scroll',
+          footer: 'sticky top-0 bg-(--ui-bg) z-1 sm:px-6 p-4 border-none font-bold',
+          header: 'sticky top-0 bg-(--ui-bg) z-1 sm:p-6 p-6 border-none font-bold'
+        }"
+      >
+        <template #header>
+          Edit {{ name }}
+        </template>
+
+        <ComponentPropInput
+          v-for="attr in attrs"
+          :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 first:pt-0 not-last:border-b border-(--ui-border)"
+          @update:model-value="(value: any) => {
+            if (!modelValue) modelValue ||= {}
+            else modelValue[attr.name] = value
+          }"
+        />
+
+        <template #footer>
+          <div class="flex justify-end">
+            <UButton
+              variant="outline"
+              color="neutral"
+              @click="modalState = false"
+            >
+              Close
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
 </template>
diff --git a/devtools/app/components/inputs/PrimitiveArrayInput.vue b/devtools/app/components/inputs/PrimitiveArrayInput.vue
index 4f2b9a1c..2bac191a 100644
--- a/devtools/app/components/inputs/PrimitiveArrayInput.vue
+++ b/devtools/app/components/inputs/PrimitiveArrayInput.vue
@@ -39,7 +39,6 @@ function onCreate(item: string) {
     no-portal
     :items="items"
     :ui="{ viewport: 'invisible', content: 'invisible' }"
-    class="max-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 0293d655..57517bdd 100644
--- a/devtools/app/components/inputs/StringInput.vue
+++ b/devtools/app/components/inputs/StringInput.vue
@@ -6,7 +6,6 @@ defineProps<{ schema: StringEnumInputSchema }>()
 
 <template>
   <UTextarea
-    class="min-w-56"
     :rows="1"
     :maxrows="8"
     autoresize
diff --git a/devtools/app/pages/components/[id].vue b/devtools/app/pages/components/[id].vue
index 6dc29bc2..2b619157 100644
--- a/devtools/app/pages/components/[id].vue
+++ b/devtools/app/pages/components/[id].vue
@@ -220,6 +220,7 @@ watch(component, () => propsSearchTerm.value = '')
               :schema="prop.schema"
               :name="prop.name"
               :description="prop.description"
+              inline
               class="p-3 rounded"
               @update:model-value="updatePropsDebounced"
             />
diff --git a/playground/components/InputProps.vue b/playground/components/InputProps.vue
index 32a5e908..85313fc7 100644
--- a/playground/components/InputProps.vue
+++ b/playground/components/InputProps.vue
@@ -5,13 +5,25 @@ const _props = defineProps<{
   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 })[])[]

From f05dc4997cec85fb44c78915b2f31c9ea694761d Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 16:03:43 +0100
Subject: [PATCH 07/19] chore: up

---
 .../app/components/ComponentPropInput.vue     |  4 +-
 .../app/components/inputs/ObjectInput.vue     | 72 +++++++++----------
 src/runtime/libs/index.ts                     | 35 +++++----
 3 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index e12de412..9d94b0eb 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -23,7 +23,7 @@ const inputTypes: Record<PropInputType, Component> = {
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{ name: string, schema: PropSchema[], description?: string, disabled?: boolean, inline?: boolean }>()
+const props = defineProps<{ name?: string, schema: PropSchema[], description?: string, disabled?: boolean, inline?: boolean }>()
 const modelValue = defineModel<any>()
 
 const currentType = ref()
@@ -130,7 +130,7 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
     </template>
 
     <template v-else>
-      <div class="flex justify-end mb-1">
+      <div class="flex justify-end mb-2">
         <ReuseSelect />
       </div>
       <UFormField
diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index ef839219..3fa06d3c 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -18,55 +18,47 @@ const modalState = ref(false)
     v-model:open="modalState"
     close-icon="i-lucide-x"
     class="rounded"
+    :title="'Edit ' + name"
+    :ui="{ body: 'p-0 sm:p-0' }"
   >
     <UButton
       color="neutral"
       variant="outline"
-      trailing-icon="lucide:square-arrow-out-up-right"
-      block
+      icon="lucide:square-arrow-out-up-right"
+      class="w-full"
+      :ui="{ leadingIcon: 'size-4' }"
     >
       Edit
     </UButton>
-    <template #content>
-      <UCard
-        :ui="{
-          body: 'p-0 sm:p-0 max-h-[60vh] overflow-y-scroll',
-          footer: 'sticky top-0 bg-(--ui-bg) z-1 sm:px-6 p-4 border-none font-bold',
-          header: 'sticky top-0 bg-(--ui-bg) z-1 sm:p-6 p-6 border-none font-bold'
-        }"
-      >
-        <template #header>
-          Edit {{ name }}
-        </template>
 
-        <ComponentPropInput
-          v-for="attr in attrs"
-          :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 first:pt-0 not-last:border-b border-(--ui-border)"
-          @update:model-value="(value: any) => {
-            if (!modelValue) modelValue ||= {}
-            else modelValue[attr.name] = value
-          }"
-        />
+    <template #body>
+      <ComponentPropInput
+        v-for="attr in attrs"
+        :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 first:pt-0 not-last:border-b border-(--ui-border)"
+        @update:model-value="(value: any) => {
+          if (!modelValue) modelValue ||= {}
+          else modelValue[attr.name] = value
+        }"
+      />
+    </template>
 
-        <template #footer>
-          <div class="flex justify-end">
-            <UButton
-              variant="outline"
-              color="neutral"
-              @click="modalState = false"
-            >
-              Close
-            </UButton>
-          </div>
-        </template>
-      </UCard>
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <UButton
+          variant="outline"
+          color="neutral"
+          @click="modalState = false"
+        >
+          Close
+        </UButton>
+      </div>
     </template>
   </UModal>
 </template>
diff --git a/src/runtime/libs/index.ts b/src/runtime/libs/index.ts
index b7e562ee..c799c1bb 100644
--- a/src/runtime/libs/index.ts
+++ b/src/runtime/libs/index.ts
@@ -1,8 +1,6 @@
 import { kebabCase } from 'scule'
-import { existsSync, readFileSync } from 'node:fs'
 import type { NuxtOptions } from '@nuxt/schema'
 import type { Resolver } from '@nuxt/kit'
-import { satisfies } from 'semver'
 
 export const buildLibraryCollections = (options: NuxtOptions) => [
   {
@@ -22,22 +20,23 @@ export const buildLibraryCollections = (options: NuxtOptions) => [
   }
 ]
 
-export async function getLibraryCollections(options: NuxtOptions, appResolver: Resolver) {
+export async function getLibraryCollections(options: NuxtOptions, _appResolver: Resolver) {
   const supportedCollections = buildLibraryCollections(options)
-  const result = []
+  return supportedCollections
+  // if (process.env.COMPODIUM_TEST === 'true') return supportedCollections
 
-  if (process.env.COMPODIUM_TEST === 'true') return supportedCollections
-
-  for (const collection of supportedCollections) {
-    const packagePath = appResolver.resolve(`node_modules/${collection.path}/package.json`)
-    if (existsSync(packagePath)) {
-      const pkg = JSON.parse(readFileSync(packagePath).toString())
-
-      if (satisfies(pkg.version, collection.version)) {
-        result.push(collection)
-      }
-    }
-  }
-
-  return result
+  // TODO: Fixme
+  // const result = []
+  // for (const collection of supportedCollections) {
+  //   const packagePath = appResolver.resolve(`node_modules/${collection.path}/package.json`)
+  //   if (existsSync(packagePath)) {
+  //     const pkg = JSON.parse(readFileSync(packagePath).toString())
+  //
+  //     if (satisfies(pkg.version, collection.version)) {
+  //       result.push(collection)
+  //     }
+  //   }
+  // }
+  //
+  // return result
 }

From 9f99d98fc70141215d5e180f2b61c1b65b51d473 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 16:09:43 +0100
Subject: [PATCH 08/19] chore: up

---
 devtools/app/components/inputs/ObjectInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 3fa06d3c..2a464ce1 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -41,7 +41,7 @@ const modalState = ref(false)
         :description="attr.description"
         :default-value="attr.default"
         inline
-        class="px-6 py-4 first:pt-0 not-last:border-b border-(--ui-border)"
+        class="px-6 py-4 not-last:border-b border-(--ui-border)"
         @update:model-value="(value: any) => {
           if (!modelValue) modelValue ||= {}
           else modelValue[attr.name] = value

From 2f0698ed5c1ddb229531b75217468d467bccb9bb Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 16:27:18 +0100
Subject: [PATCH 09/19] chore: up

---
 .../app/components/inputs/ObjectInput.vue     | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 2a464ce1..8023480a 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -13,14 +13,27 @@ const modalState = ref(false)
 </script>
 
 <template>
-  <UModal
+  <USlideover
     ref="modal"
     v-model:open="modalState"
-    close-icon="i-lucide-x"
     class="rounded"
-    :title="'Edit ' + name"
-    :ui="{ body: 'p-0 sm:p-0' }"
+    :close="false"
+    :ui="{ body: 'p-0 sm:p-0', header: 'p-4 sm:p-4' }"
+    :overlay="false"
   >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UButton
+          icon="i-lucide-arrow-left"
+          color="neutral"
+          variant="ghost"
+          @click="modalState = false"
+        />
+        <p class="font-bold">
+          Edit {{ name }}
+        </p>
+      </div>
+    </template>
     <UButton
       color="neutral"
       variant="outline"
@@ -48,17 +61,5 @@ const modalState = ref(false)
         }"
       />
     </template>
-
-    <template #footer>
-      <div class="flex w-full justify-end">
-        <UButton
-          variant="outline"
-          color="neutral"
-          @click="modalState = false"
-        >
-          Close
-        </UButton>
-      </div>
-    </template>
-  </UModal>
+  </USlideover>
 </template>

From c7374ddbd5542070e994535efb1b834ff022877b Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 16:40:25 +0100
Subject: [PATCH 10/19] chore: up

---
 .../app/components/ComponentPropInput.vue     |  2 +-
 .../app/components/inputs/ObjectInput.vue     | 29 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/devtools/app/components/ComponentPropInput.vue b/devtools/app/components/ComponentPropInput.vue
index 9d94b0eb..d4b41b3b 100644
--- a/devtools/app/components/ComponentPropInput.vue
+++ b/devtools/app/components/ComponentPropInput.vue
@@ -113,7 +113,7 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
         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' }"
+        :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" />
diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 8023480a..cc634a48 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -1,5 +1,7 @@
 <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, name: string }>()
 
@@ -10,6 +12,20 @@ const attrs = computed(() => {
 })
 
 const modalState = ref(false)
+
+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>
@@ -18,7 +34,7 @@ const modalState = ref(false)
     v-model:open="modalState"
     class="rounded"
     :close="false"
-    :ui="{ body: 'p-0 sm:p-0', header: 'p-4 sm:p-4' }"
+    :ui="{ body: 'p-0 sm:p-0', header: 'px-4 py-1.5 sm:py-1.5 sm:px-4 min-h-0' }"
     :overlay="false"
   >
     <template #header>
@@ -27,6 +43,7 @@ const modalState = ref(false)
           icon="i-lucide-arrow-left"
           color="neutral"
           variant="ghost"
+          size="sm"
           @click="modalState = false"
         />
         <p class="font-bold">
@@ -45,8 +62,18 @@ const modalState = ref(false)
     </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"

From 0812edc0a6cc0addc5453a2ef25e6df8f6cf748d Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 16:45:08 +0100
Subject: [PATCH 11/19] chore: up

---
 devtools/app/components/inputs/ObjectInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index cc634a48..55bf8700 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -34,7 +34,7 @@ const visibleProps = computed(() => new Set(fuseResults.value?.map(result => res
     v-model:open="modalState"
     class="rounded"
     :close="false"
-    :ui="{ body: 'p-0 sm:p-0', header: 'px-4 py-1.5 sm:py-1.5 sm:px-4 min-h-0' }"
+    :ui="{ body: 'p-0 sm:p-0', header: 'px-2.5 py-1.5 sm:py-1.5 sm:px-2.5 min-h-0' }"
     :overlay="false"
   >
     <template #header>

From 04cc6d3ddedcdb57e60a343445083d75ceee6816 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sun, 2 Mar 2025 21:22:38 +0100
Subject: [PATCH 12/19] chore: up

---
 playground/components/CompodiumWelcome.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playground/components/CompodiumWelcome.vue b/playground/components/CompodiumWelcome.vue
index 6dba33d8..1d1e0230 100644
--- a/playground/components/CompodiumWelcome.vue
+++ b/playground/components/CompodiumWelcome.vue
@@ -6,7 +6,7 @@ withDefaults(defineProps<{
   title?: string
   shakeIt?: boolean
   spinIt?: boolean
-  bounceIt?: boolean | string | number
+  bounceIt?: boolean
 }>(), { title: 'Welcome!' })
 
 extendCompodiumMeta({

From decb309015fc0f9cd35f3ce71bea971d560d235d Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 3 Mar 2025 10:39:20 +0100
Subject: [PATCH 13/19] feat: add json editor for props

---
 devtools/app/components/JsonEditor.vue        | 145 +++++++
 .../app/components/inputs/ObjectInput.vue     |  29 +-
 devtools/app/pages/components/[id].vue        |  36 +-
 devtools/package.json                         |   5 +-
 pnpm-lock.yaml                                | 410 ++++++++++++++++++
 5 files changed, 607 insertions(+), 18 deletions(-)
 create mode 100644 devtools/app/components/JsonEditor.vue

diff --git a/devtools/app/components/JsonEditor.vue b/devtools/app/components/JsonEditor.vue
new file mode 100644
index 00000000..2bd355d9
--- /dev/null
+++ b/devtools/app/components/JsonEditor.vue
@@ -0,0 +1,145 @@
+<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
+      v-model="jsonValue"
+      class="h-full w-full"
+      :mode="Mode.text"
+      :stringified="false"
+      :main-menu-bar="false"
+      :status-bar="false"
+    />
+  </div>
+</template>
+
+<style>
+.json-editor {
+  --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: green;
+  --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;
+}
+</style>
diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 55bf8700..0dfe0a31 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -33,23 +33,22 @@ const visibleProps = computed(() => new Set(fuseResults.value?.map(result => res
     ref="modal"
     v-model:open="modalState"
     class="rounded"
-    :close="false"
-    :ui="{ body: 'p-0 sm:p-0', header: 'px-2.5 py-1.5 sm:py-1.5 sm:px-2.5 min-h-0' }"
+    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="'Edit ' + (name ?? 'object')"
   >
-    <template #header>
-      <div class="flex items-center gap-2">
-        <UButton
-          icon="i-lucide-arrow-left"
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          @click="modalState = false"
-        />
-        <p class="font-bold">
-          Edit {{ name }}
-        </p>
-      </div>
+    <template #close>
+      <UButton
+        size="sm"
+        icon="i-lucide-arrow-right"
+        color="neutral"
+        variant="ghost"
+      />
     </template>
     <UButton
       color="neutral"
diff --git a/devtools/app/pages/components/[id].vue b/devtools/app/pages/components/[id].vue
index a4a9fd60..c48c6eab 100644
--- a/devtools/app/pages/components/[id].vue
+++ b/devtools/app/pages/components/[id].vue
@@ -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"
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/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

From dc3683621feb144979444862021cb0295e7b8be3 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 3 Mar 2025 10:41:03 +0100
Subject: [PATCH 14/19] chore: up

---
 devtools/app/pages/components/[id].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devtools/app/pages/components/[id].vue b/devtools/app/pages/components/[id].vue
index c48c6eab..5c323978 100644
--- a/devtools/app/pages/components/[id].vue
+++ b/devtools/app/pages/components/[id].vue
@@ -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..."

From 13916ba83be001877fb81239527e81cfe583fd46 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 3 Mar 2025 10:52:28 +0100
Subject: [PATCH 15/19] chore: up

---
 devtools/app/components/inputs/ObjectInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 0dfe0a31..a58f797f 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -36,7 +36,7 @@ const visibleProps = computed(() => new Set(fuseResults.value?.map(result => res
     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',
+      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"

From 938c17dbfe030d5f2f84cccc1211812fa964aefb Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 3 Mar 2025 11:38:16 +0100
Subject: [PATCH 16/19] chore: up

---
 devtools/app/components/JsonEditor.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/devtools/app/components/JsonEditor.vue b/devtools/app/components/JsonEditor.vue
index 2bd355d9..016b00cd 100644
--- a/devtools/app/components/JsonEditor.vue
+++ b/devtools/app/components/JsonEditor.vue
@@ -14,6 +14,7 @@ watch(jsonValue, (value) => {
 <template>
   <div class="json-editor">
     <JsonEditorVue
+      ref="editor"
       v-model="jsonValue"
       class="h-full w-full"
       :mode="Mode.text"
@@ -26,12 +27,15 @@ watch(jsonValue, (value) => {
 
 <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: green;
+  --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);

From 2436b59e8873879a0c11ba1f57a3bd0f7952aa15 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 3 Mar 2025 11:53:31 +0100
Subject: [PATCH 17/19] chore: up

---
 devtools/app/components/JsonEditor.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/devtools/app/components/JsonEditor.vue b/devtools/app/components/JsonEditor.vue
index 016b00cd..a60dfd09 100644
--- a/devtools/app/components/JsonEditor.vue
+++ b/devtools/app/components/JsonEditor.vue
@@ -21,6 +21,8 @@ watch(jsonValue, (value) => {
       :stringified="false"
       :main-menu-bar="false"
       :status-bar="false"
+      :indentation="2"
+      :tab-size="2"
     />
   </div>
 </template>
@@ -146,4 +148,9 @@ watch(jsonValue, (value) => {
   --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>

From 9fe2b09a82f053357de3f6a3e13a2b68d469fe40 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 3 Mar 2025 13:39:01 +0100
Subject: [PATCH 18/19] chore: up

---
 devtools/app/components/inputs/ObjectInput.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index f6de7700..812c539e 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -11,8 +11,6 @@ const attrs = computed(() => {
   return Object.values(props.schema.schema)
 })
 
-const modalState = ref(false)
-
 const componentProps = computed(() => attrs.value ?? [])
 const propsSearchTerm = ref()
 
@@ -30,8 +28,6 @@ const visibleProps = computed(() => new Set(fuseResults.value?.map(result => res
 
 <template>
   <USlideover
-    ref="modal"
-    v-model:open="modalState"
     class="rounded"
     close-icon="i-lucide-arrow-right"
     :ui="{

From ca2f5e608ec1974e54c389e4a60316b9714715e2 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 3 Mar 2025 13:42:41 +0100
Subject: [PATCH 19/19] chore: up

---
 devtools/app/components/inputs/ObjectInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/devtools/app/components/inputs/ObjectInput.vue b/devtools/app/components/inputs/ObjectInput.vue
index 812c539e..2771e694 100644
--- a/devtools/app/components/inputs/ObjectInput.vue
+++ b/devtools/app/components/inputs/ObjectInput.vue
@@ -3,7 +3,7 @@ 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, name: string }>()
+const props = defineProps<{ schema: ObjectInputSchema, name?: string }>()
 
 const modelValue = defineModel<Record<string, any>>({})