@michaelthielemann/kestrel 4.1.3 → 5.0.0

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

@@ -1,460 +0,0 @@
-<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, LayoutNode } from '@michaelthielemann/kestrel-core'
-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>
-
-    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -- @dragleave is a mouse-only progressive enhancement; the move-up/move-down buttons below give the same reorder fully keyboard access -->
-    <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>
-
-        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -- drag handlers are a mouse-only progressive enhancement; the move-up/move-down buttons below give the same reorder fully keyboard access -->
-        <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';
-
-.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 mixins.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 mixins.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 mixins.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 mixins.sr-only;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &__actions,
-    &__insert,
-    &__insert-zone::before { transition: none; }
-  }
-}
-</style>

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

@@ -1,26 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { slugify } from '@michaelthielemann/kestrel-core/client'
-import type { FieldOf } from '@michaelthielemann/kestrel-core'
-import type { FieldComponentProps } from '../../utils/field-component'
-// 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>
-  <KestrelUiField :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>
-  </KestrelUiField>
-</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

@@ -1,35 +0,0 @@
-<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 '@michaelthielemann/kestrel-fields/client'
-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

@@ -1,34 +0,0 @@
-<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

@@ -1,50 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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>