@michaelthielemann/kestrel 1.2.1

package/layers/ui/app/components/field/Layout.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FieldRenderer from './Renderer.vue'
+import FieldDeadRefNote from './DeadRefNote.vue'
+import { isFieldVisible } from '../../../../fields/app/utils/condition'
+import { resolveLocalized } from '../../utils/localized'
+import type { FieldDef, Localized } from '../../../../core/server/utils/defineCollection'
+import type { LayoutNode, LayoutTrack } from '../../../../core/server/utils/field-layout'
+
+// The ONE shared field-list renderer, reused by every field-list surface (collection page fields, block
+// fields, repeater sub-fields). A FRAGMENT (no wrapper root) so its rows/groups drop straight into the
+// caller's existing gapped flex column — the per-context vertical rhythm is preserved. Imports are
+// explicit (not auto-imported) because this component also renders inside Repeater, which is exercised
+// by the auto-import-free `dom` test runner.
+const props = defineProps<{
+  layout?: LayoutNode[]
+  fields: Record<string, FieldDef>
+  values: Record<string, unknown>
+  errors?: Record<string, string>
+  /** Field keys holding a stale reference — shown as a non-blocking note under the field. Omit to disable. */
+  deadFields?: Set<string>
+  locale: string
+  disabled?: boolean
+}>()
+const emit = defineEmits<{ update: [name: string, value: unknown] }>()
+const { lang } = useT()
+
+// No author layout → the historical one-field-per-row flow, expressed as single-field full-width rows, so
+// both cases flow through a single render path.
+const nodes = computed<LayoutNode[]>(() =>
+  props.layout ?? Object.keys(props.fields).map((f) => ({ kind: 'row', fields: [f], tracks: [1] })),
+)
+
+// A render-ready row: only the cells that are present + visible, with the grid columns rebuilt from just
+// their tracks. A field hidden by its `condition` must collapse its grid TRACK — otherwise the resolved
+// row would still reserve it and the surviving cells auto-place into the wrong columns. This is the ONE
+// place that turns the engine's neutral tracks (weight numbers / length strings) into CSS-grid columns.
+interface RenderRow { fields: string[]; cols: string }
+type RenderNode = { kind: 'row'; row: RenderRow } | { kind: 'group'; label: Localized; rows: RenderRow[] }
+
+const isVisible = (name: string) => !!props.fields[name] && isFieldVisible(props.fields[name]!, props.values)
+const trackToCss = (t: LayoutTrack): string => (typeof t === 'number' ? `${t}fr` : t)
+
+function pruneRow(fields: string[], tracks: LayoutTrack[] = []): RenderRow {
+  const kept: string[] = []
+  const cols: string[] = []
+  fields.forEach((name, i) => {
+    if (isVisible(name)) { kept.push(name); cols.push(trackToCss(tracks[i] ?? 1)) }
+  })
+  return { fields: kept, cols: cols.join(' ') || '1fr' }
+}
+
+const renderNodes = computed<RenderNode[]>(() =>
+  nodes.value.map((node) =>
+    node.kind === 'group'
+      ? { kind: 'group', label: node.label, rows: node.rows.map((r) => pruneRow(r.fields, r.tracks)) }
+      : { kind: 'row', row: pruneRow(node.fields, node.tracks) },
+  ),
+)
+</script>
+
+<template>
+  <template v-for="(node, i) in renderNodes" :key="i">
+    <!-- Named group: a labelled fieldset wrapping its stacked rows (one level deep). -->
+    <fieldset v-if="node.kind === 'group'" class="ui-field-group">
+      <legend class="ui-field-group__legend">{{ resolveLocalized(node.label, lang) }}</legend>
+      <div
+        v-for="(row, r) in node.rows"
+        :key="r"
+        class="ui-field-row"
+        :style="{ '--ui-field-cols': row.cols }"
+      >
+        <div v-for="fname in row.fields" :key="fname" class="ui-field-cell">
+          <FieldRenderer
+            :field="fields[fname]!"
+            :name="fname"
+            :locale="locale"
+            :disabled="disabled"
+            :error="errors?.[fname] || null"
+            :model-value="values[fname]"
+            @update:model-value="(v) => emit('update', fname, v)"
+          />
+          <FieldDeadRefNote v-if="deadFields" :show="deadFields.has(fname)" />
+        </div>
+      </div>
+    </fieldset>
+
+    <!-- Plain row: the same grid + cell markup as a group's row, just without the fieldset wrapper. -->
+    <div v-else class="ui-field-row" :style="{ '--ui-field-cols': node.row.cols }">
+      <div v-for="fname in node.row.fields" :key="fname" class="ui-field-cell">
+        <FieldRenderer
+          :field="fields[fname]!"
+          :name="fname"
+          :locale="locale"
+          :disabled="disabled"
+          :error="errors?.[fname] || null"
+          :model-value="values[fname]"
+          @update:model-value="(v) => emit('update', fname, v)"
+        />
+        <FieldDeadRefNote v-if="deadFields" :show="deadFields.has(fname)" />
+      </div>
+    </div>
+  </template>
+</template>
+
+<style lang="scss">
+// Grid track set from the CUSTOM PROPERTY (not grid-template-columns directly) so the responsive collapse
+// below — a plain stylesheet rule — wins over the inline value.
+.ui-field-row {
+  display: grid;
+  grid-template-columns: var(--ui-field-cols, 1fr);
+  gap: var(--space-3);
+  align-items: start;
+  min-inline-size: 0;
+}
+.ui-field-cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1); // separates a field from its stale-reference note; inert for a single-child cell
+  min-inline-size: 0; // let inputs shrink inside a grid track (the repeater idiom)
+}
+.ui-field-group {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.ui-field-group__legend {
+  padding: 0;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--color-text-muted);
+}
+// Responsive collapse to a single column (the repo's existing breakpoint). Container queries are a follow-up.
+@media (max-width: 48rem) {
+  .ui-field-row { grid-template-columns: 1fr; }
+}
+</style>

package/layers/ui/app/components/field/Link.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiField from '../ui/Field.vue'
+import UiButtonGroup from '../ui/ButtonGroup.vue'
+import UiTextInput from '../ui/TextInput.vue'
+import LinkInternalPicker from './LinkInternalPicker.vue'
+import { useLinkField } from '../../composables/useLinkField'
+import type { FieldComponentProps } from '../../utils/field-component'
+import type { FieldOf, LinkType, LinkValue } from '../../../../core/server/utils/defineCollection'
+
+const ALL: LinkType[] = ['external', 'email', 'tel', 'internal']
+const TYPE_KEYS: Record<LinkType, string> = {
+  internal: 'field.link.type_internal',
+  external: 'field.link.type_url',
+  email: 'field.link.type_email',
+  tel: 'field.link.type_phone',
+}
+
+const { t } = useT()
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<LinkValue | null>()
+
+const required = computed(() => !!props.field.required)
+const allowed = computed<LinkType[]>(() =>
+  props.field.type === 'link' ? ((props.field as FieldOf<'link'>).options?.types ?? ALL) : ALL,
+)
+const typeOptions = computed(() => allowed.value.map((ltype) => ({ value: ltype, label: t(TYPE_KEYS[ltype]) })))
+const internalCollections = computed(() =>
+  props.field.type === 'link' ? (props.field as FieldOf<'link'>).options?.collections : undefined,
+)
+
+const { currentType, typeModel, url, email, tel, label, collection, recordId, hash } = useLinkField(model, allowed)
+</script>
+
+<template>
+  <UiField :id="id" :label="name" :error="error" :required="required">
+    <template #default="f">
+      <UiButtonGroup
+        v-if="allowed.length > 1"
+        v-model="typeModel"
+        :options="typeOptions"
+        :disabled="disabled"
+        :aria-label="t('field.link.link_type')"
+      />
+
+      <template v-if="currentType === 'external'">
+        <UiTextInput
+          v-model="url"
+          type="url"
+          :disabled="disabled"
+          :placeholder="t('field.link.url_placeholder')"
+          v-bind="f"
+        />
+      </template>
+      <template v-else-if="currentType === 'email'">
+        <UiTextInput
+          v-model="email"
+          type="email"
+          :disabled="disabled"
+          v-bind="f"
+        />
+      </template>
+      <template v-else-if="currentType === 'tel'">
+        <UiTextInput
+          v-model="tel"
+          type="tel"
+          :disabled="disabled"
+          v-bind="f"
+        />
+      </template>
+      <template v-else>
+        <LinkInternalPicker
+          v-model:collection="collection"
+          v-model:record-id="recordId"
+          :collections="internalCollections"
+          :locale="locale"
+          :disabled="disabled"
+          :input-id="f.id"
+          :invalid="f['aria-invalid'] === 'true'"
+          :describedby="f['aria-describedby']"
+          :required="f.required"
+        />
+        <UiTextInput
+          v-model="hash"
+          class="ui-link__hash"
+          :disabled="disabled"
+          :placeholder="t('field.link.hash_placeholder')"
+          :aria-label="t('field.link.hash_placeholder')"
+        />
+      </template>
+
+      <span class="ui-link__label-row">
+        <UiTextInput
+          v-model="label"
+          :disabled="disabled"
+          :placeholder="t('field.link.label_placeholder')"
+          :aria-label="t('field.link.label_placeholder')"
+        />
+      </span>
+    </template>
+  </UiField>
+</template>
+
+<style lang="scss">
+.ui-link__label-row {
+  display: block;
+  margin-top: var(--space-1);
+}
+.ui-link__hash {
+  margin-top: var(--space-1);
+}
+</style>

package/layers/ui/app/components/field/LinkInternalPicker.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, toRef } from 'vue'
+import UiSelect from '../ui/Select.vue'
+import UiCombobox from '../ui/Combobox.vue'
+import { useRecordOptions } from '../../composables/useRecordOptions'
+import { resolveLocalized } from '../../utils/localized'
+import type { SerializedCollection } from '../../../../core/server/utils/serialize-collection'
+
+const { t, lang } = useT()
+
+const props = defineProps<{
+  collections?: string[]
+  locale: string
+  disabled?: boolean
+  inputId?: string
+  invalid?: boolean
+  describedby?: string
+  required?: boolean
+}>()
+
+const collection = defineModel<string | null>('collection')
+const recordId = defineModel<number | null>('recordId')
+
+interface CollectionOption { label: string; value: string }
+const collectionOptions = ref<CollectionOption[]>([])
+const showSelect = ref(false) // stays hidden until the fetch resolves → no flash, no empty select
+const loadError = ref<string | null>(null)
+
+onMounted(async () => {
+  try {
+    const res = await $fetch<{ data: SerializedCollection[] }>('/api/collections')
+    const filtered = res.data.filter((c) => !props.collections || props.collections.includes(c.name))
+    collectionOptions.value = filtered.map((c) => ({
+      value: c.name,
+      label: resolveLocalized(c.label?.plural, lang.value) ?? resolveLocalized(c.label?.singular, lang.value) ?? c.name,
+    }))
+    if (collectionOptions.value.length === 1) collection.value ||= collectionOptions.value[0]!.value
+    showSelect.value = collectionOptions.value.length > 1
+  } catch {
+    loadError.value = t('field.linkPicker.loadError')
+  }
+})
+
+// Reset only on a user pick — a programmatic {collection, id} reseed (record loader) sets both
+// together and must not have its freshly-set id clobbered.
+function onPickCollection(value: string | null | undefined) {
+  collection.value = value ?? null
+  recordId.value = null
+}
+
+const coll = computed(() => collection.value ?? '')
+const ids = computed(() => (recordId.value != null ? [recordId.value] : []))
+const { options, selected, loading, onSearch } = useRecordOptions(coll, ids, toRef(props, 'locale'))
+</script>
+
+<template>
+  <div class="ui-link-internal">
+    <p v-if="loadError" class="ui-link-internal__error">{{ loadError }}</p>
+    <UiSelect
+      v-if="showSelect"
+      :model-value="collection"
+      :options="collectionOptions"
+      :disabled="disabled"
+      :placeholder="t('field.linkPicker.chooseCollection')"
+      :aria-label="t('field.linkPicker.collectionLabel')"
+      :aria-invalid="invalid || undefined"
+      :aria-describedby="describedby"
+      @update:model-value="onPickCollection"
+    />
+    <UiCombobox
+      v-model="recordId"
+      :options="options"
+      :selected="selected"
+      :loading="loading"
+      :multiple="false"
+      :disabled="disabled || !collection"
+      :input-id="inputId"
+      :invalid="invalid"
+      :describedby="describedby"
+      :required="required"
+      :placeholder="t('field.linkPicker.searchRecords')"
+      @search="onSearch"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+// The internal arm stacks two block controls (collection select + record combobox) plus an error line;
+// without this they touched. Matches the `--space-1` rhythm the hash/label rows already use.
+.ui-link-internal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+</style>

package/layers/ui/app/components/field/Number.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiField from '../ui/Field.vue'
+import UiNumberInput from '../ui/NumberInput.vue'
+import { fieldConstraints } from '../../../../fields/app/utils/field-meta'
+import type { FieldComponentProps } from '../../utils/field-component'
+import type { FieldOf } from '../../../../core/server/utils/defineCollection'
+
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<number | null>()
+const c = computed(() => fieldConstraints(props.field))
+// Display-only unit suffix (e.g. 'rem'); the stored value stays a bare number.
+const unit = computed(() => (props.field.type === 'number' ? (props.field as FieldOf<'number'>).options?.unit : undefined))
+</script>
+
+<template>
+  <UiField :id="id" :label="name" :error="error" :required="c.required">
+    <template #default="f">
+      <UiNumberInput
+        v-model="model"
+        :min="c.min"
+        :max="c.max"
+        :step="c.step"
+        :suffix="unit"
+        :disabled="disabled"
+        v-bind="f"
+      />
+    </template>
+  </UiField>
+</template>

package/layers/ui/app/components/field/Relation.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiField from '../ui/Field.vue'
+import UiCombobox from '../ui/Combobox.vue'
+import { useRecordOptions } from '../../composables/useRecordOptions'
+import type { FieldComponentProps } from '../../utils/field-component'
+import type { FieldOf } from '../../../../core/server/utils/defineCollection'
+
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<number | number[] | null>()
+
+const cfg = computed(() => {
+  if (props.field.type !== 'relation') return { collection: '', many: false, label: undefined as string | undefined }
+  const r = (props.field as FieldOf<'relation'>).relation
+  return { collection: r.collection, many: !!r.many, label: r.labelField }
+})
+const required = computed(() => !!props.field.required)
+
+const ids = computed<number[]>(() =>
+  cfg.value.many ? (Array.isArray(model.value) ? model.value : []) : (typeof model.value === 'number' ? [model.value] : []))
+
+const collection = computed(() => cfg.value.collection)
+const locale = computed(() => props.locale)
+const labelField = computed(() => cfg.value.label)
+
+const { options, selected, loading, onSearch } = useRecordOptions(collection, ids, locale, labelField)
+const { t } = useT()
+</script>
+
+<template>
+  <UiField :id="id" :label="name" :error="error" :required="required">
+    <template #default="f">
+      <UiCombobox
+        v-model="model"
+        :options="options"
+        :selected="selected"
+        :multiple="cfg.many"
+        :loading="loading"
+        :disabled="disabled"
+        :placeholder="t('field.relation.placeholder')"
+        :input-id="f.id"
+        :invalid="f['aria-invalid'] === 'true'"
+        :describedby="f['aria-describedby']"
+        :required="f.required"
+        @search="onSearch"
+      />
+    </template>
+  </UiField>
+</template>

package/layers/ui/app/components/field/Renderer.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { resolveFieldComponent } from '../../utils/field-registry'
+import { resolveLocalized } from '../../utils/localized'
+import { humanizeFieldName } from '../../utils/humanize'
+import FieldUnsupported from './Unsupported.vue'
+import type { FieldComponentProps } from '../../utils/field-component'
+
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<unknown>()
+const { lang } = useT()
+const component = computed(() => resolveFieldComponent(props.field.type) ?? FieldUnsupported)
+// The widget renders `name` as its display label. Prefer the def's (localized) label, else humanize the
+// key (`siteName` → "Site Name") so the editor label matches the collection-list header. The field's wire
+// key is owned by the parent, so passing the human label down as `name` is safe.
+const label = computed(() => resolveLocalized(props.field.label, lang.value) ?? humanizeFieldName(props.name))
+</script>
+
+<template>
+  <component
+    :is="component"
+    :id="id"
+    v-model="model"
+    :field="field"
+    :name="label"
+    :locale="locale"
+    :error="error"
+    :disabled="disabled"
+  />
+</template>