@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/fields/BlocksField.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import { computed, onMounted, watch } from 'vue'
+import { useSets } from '../../composables/useSets.js'
+import { EMPTY_BLOCKS_DOC, blocksEditorExtensions } from './blocks-editor-extensions.js'
+import { sanitizeLinkHref } from './url-utils.js'
+
+const props = defineProps<{
+  label: string
+  modelValue: unknown
+  error?: string
+  blocksSets?: string[]
+}>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: unknown): void }>()
+
+const { get, hydrate } = useSets()
+onMounted(() => { void hydrate() })
+
+const availableSetHandles = computed<string[]>(() => {
+  const declared = props.blocksSets ?? []
+  return declared.filter((h) => !!get(h))
+})
+
+function insertSet(handle: string) {
+  if (!handle) return
+  editor.value?.chain().focus().insertVulseSet(handle).run()
+}
+
+const editor = useEditor({
+  extensions: blocksEditorExtensions,
+  content: (props.modelValue as object) ?? EMPTY_BLOCKS_DOC,
+  onUpdate: ({ editor: ed }) => {
+    emit('update:modelValue', ed.getJSON())
+  },
+})
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (!editor.value) return
+    const current = JSON.stringify(editor.value.getJSON())
+    const incoming = JSON.stringify(v)
+    if (current !== incoming && v) {
+      editor.value.commands.setContent(v as object, false)
+    }
+  },
+)
+
+function insertCallout(tone: 'info' | 'warn') {
+  editor.value?.chain().focus().insertVulseCallout(tone).run()
+}
+
+function toggleLink() {
+  const currentHref = (editor.value?.getAttributes('link').href as string | undefined) ?? ''
+  const raw = window.prompt('Link URL', currentHref)
+  if (raw === null) return
+  const href = sanitizeLinkHref(raw)
+  if (!href) {
+    editor.value?.chain().focus().unsetVulseLink().run()
+    return
+  }
+  if (editor.value?.state.selection.empty) {
+    editor.value?.chain().focus()
+      .insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] })
+      .run()
+    return
+  }
+  editor.value?.chain().focus().extendMarkRange('link').setVulseLink(href).run()
+}
+
+function insertEmoji() {
+  const value = window.prompt('Emoji', '🙂')
+  if (!value?.trim()) return
+  editor.value?.chain().focus().insertEmoji(value.trim()).run()
+}
+
+function insertAccordion() {
+  editor.value?.chain().focus().insertVulseAccordionGroup('Accordion').run()
+}
+
+function insertIframe() {
+  editor.value?.chain().focus().insertVulseIframe().run()
+}
+
+function insertVideo() {
+  editor.value?.chain().focus().insertVulseVideo().run()
+}
+</script>
+
+<template>
+  <div :data-testid="`field-${label}`">
+    <span class="block text-sm font-medium text-zinc-700 capitalize">{{ label }}</span>
+    <div class="mt-1 rounded border border-zinc-300 bg-white">
+      <div class="flex flex-wrap gap-1 border-b border-zinc-200 bg-zinc-50 px-2 py-1 text-xs">
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="editor?.chain().focus().toggleBold().run()">B</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200 italic" @click="editor?.chain().focus().toggleItalic().run()">I</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="toggleLink">Link</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()">H2</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()">H3</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="editor?.chain().focus().toggleHeading({ level: 4 }).run()">H4</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="editor?.chain().focus().toggleBulletList().run()">• List</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="editor?.chain().focus().toggleOrderedList().run()">1. List</button>
+        <span class="mx-1 w-px bg-zinc-300" />
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="insertEmoji">Emoji</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="insertCallout('info')">+ Info</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="insertCallout('warn')">+ Warn</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="insertAccordion">Accordion</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="insertIframe">Iframe</button>
+        <button type="button" class="rounded px-2 py-1 hover:bg-zinc-200" @click="insertVideo">Video</button>
+        <select
+          v-if="availableSetHandles.length > 0"
+          class="rounded border border-zinc-300 px-2 py-1 text-xs"
+          @change="insertSet(($event.target as HTMLSelectElement).value); ($event.target as HTMLSelectElement).value = ''"
+        >
+          <option value="" disabled selected>+ Insert set</option>
+          <option v-for="h in availableSetHandles" :key="h" :value="h">{{ get(h)?.label ?? h }}</option>
+        </select>
+      </div>
+      <EditorContent v-if="editor" :editor="editor" class="prose max-w-none p-3 text-sm" />
+    </div>
+    <span v-if="error" class="mt-1 block text-xs text-red-600">{{ error }}</span>
+  </div>
+</template>

package/src/admin/components/fields/BlocksSetsPicker.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useSets } from '../../composables/useSets.js'
+
+const props = defineProps<{ modelValue: string[] }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: string[]): void }>()
+
+const { sets, hydrate } = useSets()
+
+onMounted(() => {
+  void hydrate()
+})
+
+const setList = computed(() => [...sets.value.values()])
+const selected = computed(() => props.modelValue ?? [])
+
+function toggle(handle: string, checked: boolean) {
+  const next = checked
+    ? [...selected.value, handle]
+    : selected.value.filter((entry) => entry !== handle)
+  emit('update:modelValue', next)
+}
+</script>
+
+<template>
+  <div class="mt-2 rounded border border-zinc-200 bg-zinc-50 px-3 py-3">
+    <span class="block text-xs font-medium text-zinc-700">Global sets</span>
+    <p class="mt-1 text-xs text-zinc-500">
+      Choose reusable sets from
+      <a href="/admin/settings/sets" class="text-zinc-700 underline">Settings → Sets</a>.
+      Editors can insert them inside this blocks field.
+    </p>
+    <div v-if="setList.length === 0" class="mt-2 text-xs text-zinc-500">
+      No sets defined yet.
+      <a href="/admin/settings/sets/new" class="text-zinc-700 underline">Create one</a>.
+    </div>
+    <div v-else class="mt-2 grid grid-cols-1 gap-1 sm:grid-cols-2">
+      <label
+        v-for="set in setList"
+        :key="set.handle"
+        class="flex items-center gap-2 rounded border border-transparent px-2 py-1.5 text-sm hover:border-zinc-200 hover:bg-white"
+      >
+        <input
+          type="checkbox"
+          :value="set.handle"
+          :checked="selected.includes(set.handle)"
+          @change="toggle(set.handle, ($event.target as HTMLInputElement).checked)"
+        />
+        <span>
+          {{ set.label }}
+          <span class="font-mono text-xs text-zinc-500">({{ set.handle }})</span>
+        </span>
+      </label>
+    </div>
+    <p v-if="selected.length > 0" class="mt-2 text-xs text-zinc-500">
+      {{ selected.length }} set{{ selected.length === 1 ? '' : 's' }} selected.
+    </p>
+  </div>
+</template>

package/src/admin/components/fields/BoolField.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{ modelValue: boolean; label: string }>()
+defineEmits<{ (e: 'update:modelValue', v: boolean): void }>()
+</script>
+<template>
+  <label class="flex items-center gap-2">
+    <input type="checkbox" :checked="modelValue" @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)" />
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+  </label>
+</template>

package/src/admin/components/fields/DateField.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+const props = defineProps<{ modelValue: string | Date | null | undefined; label: string }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: string | null): void }>()
+const local = computed({
+  get() {
+    if (!props.modelValue) return ''
+    const d = props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
+    if (Number.isNaN(d.getTime())) return ''
+    return d.toISOString().slice(0, 16)
+  },
+  set(v: string) {
+    emit('update:modelValue', v ? new Date(v).toISOString() : null)
+  },
+})
+</script>
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+    <input v-model="local" type="datetime-local" class="mt-1 w-full rounded border px-3 py-2" />
+  </label>
+</template>

package/src/admin/components/fields/EntriesField.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { entryOptionLabel, useEntrySearch } from '../../composables/useEntrySearch.js'
+
+const props = defineProps<{
+  modelValue: string[]
+  label: string
+  collections: string[]
+  max?: number
+}>()
+
+const emit = defineEmits<{ (e: 'update:modelValue', v: string[]): void }>()
+
+const selected = ref<Array<{ id: string; collection: string; label: string }>>([])
+
+const {
+  open,
+  query,
+  options,
+  loading,
+  resolveLabel,
+  openDropdown,
+  closeDropdown,
+  onBlur,
+} = useEntrySearch(() => props.collections)
+
+const atMax = computed(() => props.max !== undefined && selected.value.length >= props.max)
+
+const availableOptions = computed(() =>
+  options.value.filter(
+    (o) => !selected.value.some((s) => s.id === o.id && s.collection === o.collection),
+  ),
+)
+
+async function syncSelected(ids: string[]) {
+  if (ids.length === 0) {
+    selected.value = []
+    return
+  }
+
+  const next: Array<{ id: string; collection: string; label: string }> = []
+  for (const id of ids) {
+    let found = selected.value.find((s) => s.id === id)
+    if (found) {
+      next.push(found)
+      continue
+    }
+    for (const collection of props.collections) {
+      try {
+        const label = await resolveLabel(id, collection)
+        if (label && label !== id) {
+          next.push({ id, collection, label })
+          break
+        }
+      } catch {
+        // try next collection
+      }
+    }
+    if (!next.some((s) => s.id === id)) {
+      next.push({ id, collection: props.collections[0] ?? '', label: id })
+    }
+  }
+  selected.value = next
+}
+
+function addOption(option: { id: string; collection: string; title?: string; email?: string }) {
+  if (atMax.value) return
+  if (selected.value.some((s) => s.id === option.id)) return
+  const next = [
+    ...selected.value,
+    { id: option.id, collection: option.collection, label: entryOptionLabel(option) },
+  ]
+  selected.value = next
+  emit('update:modelValue', next.map((s) => s.id))
+  query.value = ''
+  if (props.max === 1) closeDropdown()
+}
+
+function removeAt(index: number) {
+  const next = [...selected.value]
+  next.splice(index, 1)
+  selected.value = next
+  emit('update:modelValue', next.map((s) => s.id))
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    void syncSelected(value ?? [])
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+    <div class="relative mt-1" @blur="onBlur">
+      <div v-if="selected.length" class="mb-2 flex flex-wrap gap-2">
+        <span
+          v-for="(item, i) in selected"
+          :key="item.id"
+          class="inline-flex items-center gap-1 rounded-full border border-zinc-200 bg-zinc-50 px-2 py-1 text-sm"
+        >
+          {{ item.label }}
+          <button type="button" class="text-zinc-400 hover:text-red-600" @click="removeAt(i)">×</button>
+        </span>
+      </div>
+
+      <button
+        v-if="!atMax"
+        type="button"
+        class="vulse-input flex w-full items-center justify-between bg-white text-left"
+        :class="open && 'border-zinc-400'"
+        @click="open ? closeDropdown() : openDropdown()"
+      >
+        <span class="text-zinc-400">{{ max === 1 ? 'Select entry…' : 'Add entry…' }}</span>
+        <span class="text-xs text-zinc-400">{{ open ? '▴' : '▾' }}</span>
+      </button>
+      <p v-else-if="max" class="text-xs text-zinc-500">Maximum of {{ max }} selected.</p>
+
+      <div
+        v-if="open"
+        class="absolute z-20 mt-1 w-full overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg"
+      >
+        <div class="border-b border-zinc-200 p-2">
+          <input
+            v-model="query"
+            type="search"
+            class="vulse-input bg-white"
+            placeholder="Search entries…"
+            autofocus
+            @keydown.esc.prevent="closeDropdown()"
+          />
+        </div>
+        <ul class="max-h-48 overflow-auto py-1 text-sm">
+          <li v-if="loading" class="px-3 py-2 text-zinc-500">Loading…</li>
+          <li v-else-if="availableOptions.length === 0" class="px-3 py-2 text-zinc-500">No matches</li>
+          <li v-for="option in availableOptions" v-else :key="`${option.collection}:${option.id}`">
+            <button
+              type="button"
+              class="flex w-full items-center px-3 py-2 text-left hover:bg-zinc-100"
+              @click="addOption(option)"
+            >
+              <span v-if="collections.length > 1" class="mr-2 text-xs text-zinc-400">{{ option.collection }}</span>
+              {{ entryOptionLabel(option) }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </label>
+</template>

package/src/admin/components/fields/EntryField.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, toRef, watch } from 'vue'
+import { entryOptionLabel, useEntrySearch } from '../../composables/useEntrySearch.js'
+
+const props = defineProps<{
+  modelValue: string | null
+  label: string
+  collections: string[]
+}>()
+
+const emit = defineEmits<{ (e: 'update:modelValue', v: string | null): void }>()
+
+const selectedCollection = ref(props.collections[0] ?? '')
+const selectedLabel = ref('')
+
+const {
+  open,
+  query,
+  options,
+  loading,
+  resolveLabel,
+  openDropdown,
+  closeDropdown,
+  onBlur,
+} = useEntrySearch(() => {
+  const col = selectedCollection.value || props.collections[0]
+  return col ? [col] : props.collections
+})
+
+function selectOption(option: { id: string; collection: string; title?: string; email?: string }) {
+  selectedCollection.value = option.collection
+  emit('update:modelValue', option.id)
+  selectedLabel.value = entryOptionLabel(option)
+  query.value = ''
+  closeDropdown()
+}
+
+function clearSelection() {
+  emit('update:modelValue', null)
+  selectedLabel.value = ''
+  query.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value) {
+      selectedLabel.value = ''
+      return
+    }
+    const col = selectedCollection.value || props.collections[0]
+    if (!col) return
+    void resolveLabel(value, col).then((label) => {
+      selectedLabel.value = label
+    })
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.collections,
+  (cols) => {
+    if (cols.length === 1) selectedCollection.value = cols[0]!
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+    <div class="mt-1 space-y-2">
+      <select
+        v-if="collections.length > 1"
+        v-model="selectedCollection"
+        class="vulse-input bg-white text-sm"
+        @change="clearSelection()"
+      >
+        <option v-for="col in collections" :key="col" :value="col">{{ col }}</option>
+      </select>
+
+      <div class="relative" @blur="onBlur">
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="vulse-input flex flex-1 items-center justify-between bg-white text-left"
+            :class="open && 'border-zinc-400'"
+            @click="open ? closeDropdown() : openDropdown()"
+          >
+            <span :class="modelValue ? 'text-zinc-900' : 'text-zinc-400'">
+              {{ modelValue ? selectedLabel || modelValue : 'Select entry…' }}
+            </span>
+            <span class="text-xs text-zinc-400">{{ open ? '▴' : '▾' }}</span>
+          </button>
+          <button
+            v-if="modelValue"
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-600 hover:bg-zinc-50"
+            @click="clearSelection"
+          >
+            Clear
+          </button>
+        </div>
+
+        <div
+          v-if="open"
+          class="absolute z-20 mt-1 w-full overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg"
+        >
+          <div class="border-b border-zinc-200 p-2">
+            <input
+              v-model="query"
+              type="search"
+              class="vulse-input bg-white"
+              placeholder="Search entries…"
+              autofocus
+              @keydown.esc.prevent="closeDropdown()"
+            />
+          </div>
+          <ul class="max-h-48 overflow-auto py-1 text-sm">
+            <li v-if="loading" class="px-3 py-2 text-zinc-500">Loading…</li>
+            <li v-else-if="options.length === 0" class="px-3 py-2 text-zinc-500">No matches</li>
+            <li v-for="option in options" v-else :key="`${option.collection}:${option.id}`">
+              <button
+                type="button"
+                class="flex w-full items-center px-3 py-2 text-left hover:bg-zinc-100"
+                :class="option.id === modelValue && 'bg-zinc-50 font-medium'"
+                @click="selectOption(option)"
+              >
+                <span v-if="collections.length > 1" class="mr-2 text-xs text-zinc-400">{{ option.collection }}</span>
+                {{ entryOptionLabel(option) }}
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </label>
+</template>

package/src/admin/components/fields/EnumField.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string | string[]
+  label: string
+  options: { key: string; label: string }[]
+  multiple?: boolean
+  placeholder?: string
+  clearable?: boolean
+  required?: boolean
+}>()
+
+const emit = defineEmits<{ (e: 'update:modelValue', v: string | string[]): void }>()
+
+const normalizedOptions = computed(() =>
+  props.options.length > 0 ? props.options : [{ key: '', label: '—' }],
+)
+
+function onSingleChange(event: Event) {
+  const value = (event.target as HTMLSelectElement).value
+  emit('update:modelValue', value)
+}
+
+function onMultipleChange(event: Event) {
+  const select = event.target as HTMLSelectElement
+  emit(
+    'update:modelValue',
+    Array.from(select.selectedOptions).map((o) => o.value),
+  )
+}
+
+function clearSingle() {
+  emit('update:modelValue', '')
+}
+</script>
+
+<template>
+  <label class="block">
+    <span class="text-sm text-zinc-600">{{ label }}</span>
+    <div v-if="multiple" class="mt-1">
+      <select
+        multiple
+        class="w-full rounded border px-3 py-2"
+        :value="modelValue as string[]"
+        @change="onMultipleChange"
+      >
+        <option v-for="o in normalizedOptions" :key="o.key" :value="o.key">{{ o.label }}</option>
+      </select>
+      <p class="mt-1 text-xs text-zinc-500">Hold Ctrl/Cmd to select multiple options.</p>
+    </div>
+    <div v-else class="mt-1 flex gap-2">
+      <select
+        :value="(modelValue as string) ?? ''"
+        class="w-full rounded border px-3 py-2"
+        :required="required"
+        @change="onSingleChange"
+      >
+        <option v-if="placeholder || clearable" value="" disabled :selected="!(modelValue as string)">
+          {{ placeholder || 'Choose…' }}
+        </option>
+        <option
+          v-for="o in normalizedOptions"
+          :key="o.key"
+          :value="o.key"
+          :disabled="!o.key"
+        >
+          {{ o.label }}
+        </option>
+      </select>
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="rounded border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-600 hover:bg-zinc-50"
+        @click="clearSingle"
+      >
+        Clear
+      </button>
+    </div>
+  </label>
+</template>

package/src/admin/components/fields/FieldRenderer.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { LinkValue } from '../../../core/blueprints/definition.js'
+import type { FieldDescriptor } from '../../client/form-from-zod'
+import TextField from './TextField.vue'
+import TextareaField from './TextareaField.vue'
+import NumberField from './NumberField.vue'
+import BoolField from './BoolField.vue'
+import DateField from './DateField.vue'
+import EnumField from './EnumField.vue'
+import ObjectField from './ObjectField.vue'
+import RepeaterField from './RepeaterField.vue'
+import ReplicatorField from './ReplicatorField.vue'
+import RefField from './RefField.vue'
+import EntryField from './EntryField.vue'
+import EntriesField from './EntriesField.vue'
+import LinkField from './LinkField.vue'
+import MediaField from './MediaField.vue'
+import BlocksField from './BlocksField.vue'
+import GridField from './GridField.vue'
+
+const props = defineProps<{
+  field: FieldDescriptor
+  modelValue: unknown
+  fieldErrors?: Record<string, string>
+  tree?: boolean
+  linkCollections?: string[]
+}>()
+defineEmits<{ (e: 'update:modelValue', v: unknown): void }>()
+
+const ownError = computed<string | undefined>(() => props.fieldErrors?.[props.field.path])
+
+const selectOptions = computed(() => {
+  if (props.field.selectOptions?.length) return props.field.selectOptions
+  return (props.field.options ?? []).map((key) => ({ key, label: key }))
+})
+</script>
+<template>
+  <div :class="['vulse-field', ownError && 'vulse-field-error']">
+    <TextField v-if="field.widget === 'text'" :model-value="(modelValue as string) ?? ''" :label="field.label ?? field.path" :required="field.required" @update:modelValue="$emit('update:modelValue', $event)" />
+    <TextareaField v-else-if="field.widget === 'textarea'" :model-value="(modelValue as string) ?? ''" :label="field.label ?? field.path" :required="field.required" @update:modelValue="$emit('update:modelValue', $event)" />
+    <NumberField v-else-if="field.widget === 'number'" :model-value="modelValue as number" :label="field.label ?? field.path" :required="field.required" @update:modelValue="$emit('update:modelValue', $event)" />
+    <BoolField v-else-if="field.widget === 'bool'" :model-value="!!modelValue" :label="field.label ?? field.path" @update:modelValue="$emit('update:modelValue', $event)" />
+    <DateField v-else-if="field.widget === 'date'" :model-value="modelValue as string | null" :label="field.label ?? field.path" @update:modelValue="$emit('update:modelValue', $event)" />
+    <EnumField
+      v-else-if="field.widget === 'enum'"
+      :model-value="field.selectMultiple ? ((modelValue as string[]) ?? []) : ((modelValue as string) ?? '')"
+      :label="field.label ?? field.path"
+      :options="selectOptions"
+      :multiple="field.selectMultiple"
+      :placeholder="field.selectPlaceholder"
+      :clearable="field.selectClearable"
+      :required="field.required"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <RefField v-else-if="field.widget === 'ref'" :model-value="modelValue as string | null" :label="field.label ?? field.path" :ref-target="field.refTarget!" @update:modelValue="$emit('update:modelValue', $event)" />
+    <EntryField v-else-if="field.widget === 'entry'" :model-value="modelValue as string | null" :label="field.label ?? field.path" :collections="field.entryCollections ?? []" @update:modelValue="$emit('update:modelValue', $event)" />
+    <EntriesField v-else-if="field.widget === 'entries'" :model-value="(modelValue as string[]) ?? []" :label="field.label ?? field.path" :collections="field.entriesCollections ?? []" :max="field.entriesMax" @update:modelValue="$emit('update:modelValue', $event)" />
+    <LinkField
+      v-else-if="field.widget === 'link'"
+      :model-value="modelValue as LinkValue | null"
+      :label="field.label ?? field.path"
+      :collections="field.linkCollections"
+      :tree="tree"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <MediaField v-else-if="field.widget === 'media'" :model-value="modelValue" :label="field.label ?? field.path" @update:modelValue="$emit('update:modelValue', $event)" />
+    <BlocksField v-else-if="field.widget === 'blocks'" :model-value="modelValue" :label="field.label ?? field.path" :blocks-sets="field.blocksSets" @update:modelValue="$emit('update:modelValue', $event)" />
+    <ObjectField v-else-if="field.widget === 'object'" :model-value="(modelValue as Record<string, unknown>) ?? {}" :label="field.label ?? field.path" :fields="field.children ?? []" @update:modelValue="$emit('update:modelValue', $event)" />
+    <ReplicatorField v-else-if="field.widget === 'replicator'" :model-value="modelValue" :label="field.label ?? field.path" :replicator-sets="field.replicatorSets" @update:modelValue="$emit('update:modelValue', $event)" />
+    <RepeaterField v-else-if="field.widget === 'repeater'" :model-value="(modelValue as Record<string, unknown>[]) ?? []" :label="field.label ?? field.path" :item-fields="field.itemFields ?? []" @update:modelValue="$emit('update:modelValue', $event)" />
+    <GridField
+      v-else-if="field.widget === 'grid'"
+      :model-value="(modelValue as Record<string, unknown>[]) ?? []"
+      :label="field.label ?? field.path"
+      :item-fields="field.itemFields ?? []"
+      :mode="field.gridMode"
+      :min-rows="field.gridMinRows"
+      :max-rows="field.gridMaxRows"
+      :add-label="field.gridAddLabel"
+      :tree="tree"
+      :link-collections="linkCollections"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <p v-if="ownError" class="mt-1 text-xs text-red-600">{{ ownError }}</p>
+  </div>
+</template>