@michaelthielemann/kestrel 1.2.1

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

@@ -0,0 +1,460 @@
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue'
+import UiIcon from '../ui/Icon.vue'
+import FieldLayout from './Layout.vue'
+import { useRepeater } from '../../composables/useRepeater'
+import { useFieldA11y } from '../../utils/useFieldA11y'
+import type { FieldComponentProps } from '../../utils/field-component'
+import type { FieldDef, FieldOf } from '../../../../core/server/utils/defineCollection'
+import type { LayoutNode } from '../../../../core/server/utils/field-layout'
+
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<Record<string, unknown>[] | null>()
+
+const subFields = computed<Record<string, FieldDef>>(() =>
+  props.field.type === 'repeater' ? (props.field as FieldOf<'repeater'>).options.fields : {})
+// The repeater's optional sub-field layout (carried on the serialized options; undefined → flat). One
+// documented cast, same category as the repeater arm's own narrowing above.
+const subLayout = computed<LayoutNode[] | undefined>(() =>
+  (props.field as { options?: { fieldLayout?: LayoutNode[] } }).options?.fieldLayout)
+const required = computed(() => !!props.field.required)
+const { rows, keys, addRow, removeRow, move, setCell, insertRow, duplicateRow } = useRepeater(model, subFields)
+const { errId, describedby, ariaInvalid } = useFieldA11y(props)
+const { t } = useT()
+
+const rowsEl = ref<HTMLElement | null>(null)
+const addEl = ref<HTMLButtonElement | null>(null)
+const dragIndex = ref<number | null>(null)
+const overIndex = ref<number | null>(null)
+const liveMessage = ref('')
+
+// Toggle a zero-width suffix so an identical message still re-triggers the polite live region.
+function say(msg: string) {
+  liveMessage.value = msg === liveMessage.value ? `${msg}\u200B` : msg
+}
+function announce(to: number) {
+  say(t('field.repeater.moved', { n: to + 1, total: rows.value.length }))
+}
+
+function onDragStart(i: number, event: DragEvent) {
+  if (props.disabled) return
+  dragIndex.value = i
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(i))
+  }
+}
+
+function onDragEnter(i: number) {
+  if (dragIndex.value !== null) overIndex.value = i
+}
+
+// Clear drop highlight only when leaving the list entirely (not between sibling rows).
+function onDragLeave(event: DragEvent) {
+  if (!(event.currentTarget as Element).contains(event.relatedTarget as Node | null)) {
+    overIndex.value = null
+  }
+}
+
+function onDrop(i: number) {
+  if (props.disabled || dragIndex.value === null) return
+  if (dragIndex.value !== i) {
+    move(dragIndex.value, i)
+    nextTick(() => announce(i))
+  }
+  dragIndex.value = null
+  overIndex.value = null
+}
+
+function onDragEnd() {
+  dragIndex.value = null
+  overIndex.value = null
+}
+
+function moveRow(from: number, to: number) {
+  move(from, to)
+  nextTick(() => {
+    announce(to)
+    const row = rowsEl.value?.querySelectorAll(':scope > .ui-repeater__row-wrap > .ui-repeater__row')[to] as HTMLElement | undefined
+    if (!row) return
+    const dir = to < from ? 'up' : 'down'
+    const btns = row.querySelectorAll<HTMLButtonElement>(':scope > .ui-repeater__actions > .ui-repeater__move')
+    const dirBtn = dir === 'up' ? btns[0] : btns[1]
+    ;(dirBtn && !dirBtn.disabled ? dirBtn : row.querySelector<HTMLButtonElement>(':scope > .ui-repeater__actions > .ui-repeater__remove'))?.focus()
+  })
+}
+
+// Keep keyboard focus in the list after deletion: the row that slid into this index, else the new last row, else Add.
+function removeRowAt(i: number) {
+  removeRow(i)
+  say(t('field.repeater.removed', { n: i + 1, remaining: rows.value.length }))
+  nextTick(() => {
+    const idx = Math.min(i, rows.value.length - 1)
+    const row = idx >= 0
+      ? rowsEl.value?.querySelectorAll(':scope > .ui-repeater__row-wrap > .ui-repeater__row')[idx] as HTMLElement | undefined
+      : undefined
+    ;(row?.querySelector<HTMLButtonElement>(':scope > .ui-repeater__actions > .ui-repeater__remove') ?? addEl.value)?.focus()
+  })
+}
+
+function duplicateRowAt(i: number) {
+  duplicateRow(i)
+  say(t('field.repeater.duplicated', { n: i + 1 }))
+  nextTick(() => {
+    const row = rowsEl.value?.querySelectorAll(':scope > .ui-repeater__row-wrap > .ui-repeater__row')[i + 1] as HTMLElement | undefined
+    row?.querySelector<HTMLElement>('input, button:not([disabled]), [tabindex]:not([tabindex="-1"])')?.focus()
+  })
+}
+
+function insertRowAt(at: number) {
+  insertRow(at)
+  say(t('field.repeater.inserted', { n: at + 1 }))
+  nextTick(() => {
+    const row = rowsEl.value?.querySelectorAll(':scope > .ui-repeater__row-wrap > .ui-repeater__row')[at] as HTMLElement | undefined
+    row?.querySelector<HTMLElement>('input, button:not([disabled]), [tabindex]:not([tabindex="-1"])')?.focus()
+  })
+}
+</script>
+
+<template>
+  <fieldset
+    class="ui-repeater"
+    :aria-describedby="describedby"
+    :aria-invalid="ariaInvalid"
+  >
+    <legend class="ui-repeater__legend">
+      {{ name }}<span v-if="required" aria-hidden="true">*</span>
+    </legend>
+
+    <div ref="rowsEl" class="ui-repeater__rows" @dragleave="onDragLeave">
+      <template v-for="(row, i) in rows" :key="keys[i]">
+        <div class="ui-repeater__insert-zone">
+          <button
+            type="button"
+            class="ui-repeater__insert"
+            :aria-label="t('field.repeater.insert_label', { n: i + 1 })"
+            :disabled="disabled"
+            @click="insertRowAt(i)"
+          >
+            <UiIcon name="plus" :size="16" />
+          </button>
+        </div>
+
+        <div
+          class="ui-repeater__row-wrap"
+          :class="{ 'ui-repeater__row-wrap--over': overIndex === i && dragIndex !== i }"
+          @dragenter="onDragEnter(i)"
+          @dragover.prevent="onDragEnter(i)"
+          @drop.prevent="onDrop(i)"
+          @dragend="onDragEnd"
+        >
+          <div class="ui-repeater__row" role="group" :aria-label="t('field.repeater.item_label', { n: i + 1 })">
+            <div
+              class="ui-repeater__gutter"
+              :draggable="!disabled"
+              aria-hidden="true"
+              @dragstart="onDragStart(i, $event)"
+            >
+              <span class="ui-repeater__index">{{ i + 1 }}</span>
+              <UiIcon name="grip" :size="16" />
+            </div>
+
+            <div class="ui-repeater__fields">
+              <!-- The shared field renderer, scoped to this row (the sibling scope for the condition gate).
+                   An unmet condition unmounts the sub-field (not just hides it), so no constraint lingers. -->
+              <FieldLayout
+                :layout="subLayout"
+                :fields="subFields"
+                :values="row"
+                :locale="locale"
+                :disabled="disabled"
+                @update="(key, value) => setCell(i, key, value)"
+              />
+            </div>
+
+            <div class="ui-repeater__actions">
+              <button
+                type="button"
+                class="ui-repeater__move"
+                :aria-label="t('field.repeater.move_up', { n: i + 1 })"
+                :disabled="disabled || i === 0"
+                @click="moveRow(i, i - 1)"
+              >
+                <UiIcon name="chevron-up" :size="16" />
+              </button>
+              <button
+                type="button"
+                class="ui-repeater__move"
+                :aria-label="t('field.repeater.move_down', { n: i + 1 })"
+                :disabled="disabled || i === rows.length - 1"
+                @click="moveRow(i, i + 1)"
+              >
+                <UiIcon name="chevron-down" :size="16" />
+              </button>
+              <button
+                type="button"
+                class="ui-repeater__duplicate"
+                :aria-label="t('field.repeater.duplicate_label', { n: i + 1 })"
+                :disabled="disabled"
+                @click="duplicateRowAt(i)"
+              >
+                <UiIcon name="copy" :size="16" />
+              </button>
+              <button
+                type="button"
+                class="ui-repeater__remove"
+                :aria-label="t('field.repeater.remove_label', { n: i + 1 })"
+                :disabled="disabled"
+                @click="removeRowAt(i)"
+              >
+                <UiIcon name="trash" :size="16" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div class="ui-repeater__insert-zone">
+        <button
+          type="button"
+          class="ui-repeater__insert"
+          :aria-label="t('field.repeater.insert_label', { n: rows.length + 1 })"
+          :disabled="disabled"
+          @click="insertRowAt(rows.length)"
+        >
+          <UiIcon name="plus" :size="16" />
+        </button>
+      </div>
+    </div>
+
+    <p v-if="!rows.length" class="ui-repeater__empty">{{ t('field.repeater.empty') }}</p>
+
+    <button ref="addEl" type="button" class="ui-repeater__add" :disabled="disabled" @click="addRow">{{ t('field.repeater.add') }}</button>
+
+    <p v-if="error" :id="errId" class="ui-repeater__error" role="alert">{{ error }}</p>
+    <span class="ui-repeater__live" aria-live="polite">{{ liveMessage }}</span>
+  </fieldset>
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-repeater {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  &__legend {
+    padding: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    margin-bottom: var(--space-1);
+  }
+
+  &__rows {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__insert-zone {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 1px;
+      background: var(--color-border);
+      opacity: 0;
+      transition: opacity 0.1s;
+    }
+
+    &:hover {
+      &::before { opacity: 1; }
+      .ui-repeater__insert { opacity: 1; }
+    }
+    // Instant on keyboard focus so the focus ring is not hidden by the opacity transition.
+    &:focus-within {
+      &::before { opacity: 1; }
+      .ui-repeater__insert { opacity: 1; transition: none; }
+    }
+  }
+
+  &__insert {
+    @include focus-ring;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-surface);
+    cursor: pointer;
+    color: var(--color-text-muted);
+    opacity: 0;
+    transition: opacity 0.1s;
+
+    &:hover:not(:disabled) {
+      background: var(--color-bg);
+      color: var(--color-text);
+    }
+
+    &:disabled { cursor: default; }
+  }
+
+  @media (hover: none) {
+    &__insert-zone::before { opacity: 1; }
+    &__insert { opacity: 1; }
+  }
+
+  &__row-wrap {
+    &--over {
+      .ui-repeater__row {
+        outline: 2px solid var(--color-primary);
+        outline-offset: -2px;
+      }
+    }
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: var(--space-2);
+    align-items: start;
+    padding: var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+
+    // Keyboard focus must reveal the actions instantly: an opacity transition would hide the
+    // focus ring for its duration (the buttons sit in an opacity:0 layer). Hover stays animated.
+    &:hover .ui-repeater__actions { opacity: 1; }
+    &:focus-within .ui-repeater__actions { opacity: 1; transition: none; }
+  }
+
+  &__gutter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1);
+    padding-top: var(--space-1);
+    cursor: grab;
+    color: var(--color-text-muted);
+    user-select: none;
+
+    &:active { cursor: grabbing; }
+  }
+
+  &__index {
+    font-size: var(--text-sm);
+    line-height: 1;
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-inline-size: 0;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    opacity: 0;
+    transition: opacity 0.1s;
+  }
+
+  @media (hover: none) {
+    &__actions { opacity: 1; }
+  }
+
+  &__move,
+  &__duplicate,
+  &__remove {
+    @include focus-ring;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-text-muted);
+    transition: background 0.1s, border-color 0.1s, color 0.1s;
+
+    &:hover:not(:disabled) {
+      background: var(--color-bg);
+      border-color: var(--color-border);
+      color: var(--color-text);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+  }
+
+  &__remove {
+    color: var(--color-danger);
+
+    &:hover:not(:disabled) {
+      color: var(--color-danger);
+      border-color: var(--color-danger);
+    }
+  }
+
+  &__empty {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+
+  &__add {
+    @include focus-ring;
+    align-self: flex-start;
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    border-radius: var(--radius-sm);
+    padding: var(--space-1) var(--space-3);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    color: var(--color-text);
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+  }
+
+  &__error {
+    font-size: var(--text-sm);
+    color: var(--color-danger);
+  }
+
+  &__live {
+    @include sr-only;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__actions,
+    &__insert,
+    &__insert-zone::before { transition: none; }
+  }
+}
+</style>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiField from '../ui/Field.vue'
+import UiRichtext from '../ui/Richtext.vue'
+import type { FieldComponentProps } from '../../utils/field-component'
+
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<string | null>()
+const required = computed(() => !!props.field.required)
+</script>
+
+<template>
+  <UiField :id="id" :label="name" :error="error" :required="required">
+    <template #default="f">
+      <UiRichtext
+        v-model="model"
+        :disabled="disabled"
+        :locale="locale"
+        :aria-label="name"
+        :describedby="f['aria-describedby']"
+        :invalid="f['aria-invalid'] === 'true'"
+        :required="!!f.required"
+      />
+    </template>
+  </UiField>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { slugify } from '../../../../core/app/utils/slugify'
+import type { FieldComponentProps } from '../../utils/field-component'
+import type { FieldOf } from '../../../../core/server/utils/defineCollection'
+
+// Editor widget for the `slug` field type. Shows the (display-only) `prefix` before an editable slug input,
+// and normalizes the value to a real slug on blur. Leaving it blank is fine — the server auto-generates it
+// from `options.from` (e.g. the title) on save. `options.from`/`prefix` come from the field def.
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<string | null>()
+
+const opts = computed(() => (props.field.type === 'slug' ? (props.field as FieldOf<'slug'>).options : undefined))
+const prefix = computed(() => opts.value?.prefix ?? '')
+const fromField = computed(() => opts.value?.from)
+
+// Blur must not turn a null (never-touched, server-auto-generates) slug into '' — that would mark
+// an untouched record dirty. Only normalize when there is actual text, and only write if it changes.
+function onBlur() {
+  const cur = model.value ?? ''
+  if (!cur.trim()) return
+  const s = slugify(cur)
+  if (s && s !== cur) model.value = s
+}
+</script>
+
+<template>
+  <UiField :id="id" :label="name" :error="error ?? undefined">
+    <template #default="f">
+      <div class="field-slug" :data-prefixed="!!prefix">
+        <span v-if="prefix" class="field-slug__prefix">{{ prefix }}</span>
+        <input
+          :id="f.id"
+          class="field-slug__input"
+          type="text"
+          :value="model ?? ''"
+          :placeholder="fromField ? `auto-generated from ${fromField}` : 'slug'"
+          :aria-invalid="f['aria-invalid']"
+          :aria-describedby="f['aria-describedby']"
+          :disabled="disabled"
+          @input="model = ($event.target as HTMLInputElement).value"
+          @blur="onBlur"
+        />
+      </div>
+    </template>
+  </UiField>
+</template>
+
+<style lang="scss" scoped>
+.field-slug {
+  display: flex; align-items: stretch; min-width: 0;
+  border: 1px solid var(--color-control-border, var(--color-border)); border-radius: var(--radius-md);
+  background: var(--color-surface); overflow: hidden;
+}
+.field-slug__prefix {
+  display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3);
+  background: var(--color-surface-2); color: var(--color-text-muted);
+  border-right: 1px solid var(--color-border); font-size: var(--text-sm); white-space: nowrap;
+}
+.field-slug__input {
+  flex: 1 1 auto; min-width: 0; padding: var(--space-2) var(--space-3);
+  border: 0; background: transparent; color: var(--color-text); font: inherit;
+  &:focus { outline: none; }
+}
+.field-slug:focus-within { border-color: var(--color-primary, #6366f1); }
+</style>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiField from '../ui/Field.vue'
+import UiTextInput from '../ui/TextInput.vue'
+import UiTextarea from '../ui/Textarea.vue'
+import { fieldConstraints } from '../../../../fields/app/utils/field-meta'
+import type { FieldComponentProps } from '../../utils/field-component'
+
+const props = defineProps<FieldComponentProps>()
+const model = defineModel<string | null>()
+const c = computed(() => fieldConstraints(props.field))
+</script>
+
+<template>
+  <UiField :id="id" :label="name" :error="error" :required="c.required">
+    <template #default="f">
+      <UiTextarea
+        v-if="c.multiline"
+        v-model="model"
+        :disabled="disabled"
+        :maxlength="c.maxlength"
+        :minlength="c.minlength"
+        v-bind="f"
+      />
+      <UiTextInput
+        v-else
+        v-model="model"
+        :disabled="disabled"
+        :maxlength="c.maxlength"
+        :minlength="c.minlength"
+        v-bind="f"
+      />
+    </template>
+  </UiField>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { FieldComponentProps } from '../../utils/field-component'
+
+defineProps<FieldComponentProps>()
+defineModel<unknown>()
+</script>
+
+<template>
+  <div class="field-unsupported">
+    <span class="field-unsupported__label">{{ name }}</span>
+    <p class="field-unsupported__note">Field type "{{ field.type }}" is not yet available.</p>
+  </div>
+</template>
+
+<style lang="scss">
+.field-unsupported {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+
+  &__label {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+  &__note {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface-2);
+  }
+}
+</style>

package/layers/ui/app/components/ui/Alert.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'info' | 'success' | 'warning' | 'error'
+  }>(),
+  { variant: 'info' },
+)
+
+const role = computed(() =>
+  props.variant === 'error' || props.variant === 'warning' ? 'alert' : 'status',
+)
+</script>
+
+<template>
+  <div class="ui-alert" :class="`ui-alert--${variant}`" :role="role">
+    <p v-if="$slots.title?.()?.[0]" class="ui-alert__title"><slot name="title" /></p>
+    <div class="ui-alert__body"><slot /></div>
+  </div>
+</template>
+
+<style lang="scss">
+.ui-alert {
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-inline-start-width: 4px;
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  font-size: var(--text-sm);
+
+  &__title {
+    font-weight: var(--weight-bold);
+    margin-bottom: var(--space-1);
+  }
+
+  &--info {
+    border-inline-start-color: var(--color-primary);
+  }
+  &--success {
+    border-inline-start-color: var(--color-success);
+  }
+  &--warning {
+    border-inline-start-color: var(--color-warning);
+  }
+  &--error {
+    border-inline-start-color: var(--color-danger);
+  }
+}
+</style>

package/layers/ui/app/components/ui/Brand.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// The Kestrel brand mark. The wordmark and the surrounding wrapper (a NuxtLink in the rail, a static
+// heading on the login screen) stay with each caller.
+</script>
+
+<template>
+  <span class="ui-brand-mark" aria-hidden="true">K</span>
+</template>
+
+<style lang="scss">
+.ui-brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-md);
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+}
+</style>