@michaelthielemann/kestrel 1.2.1

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiIcon from './Icon.vue'
+import {
+  DatePickerRoot, DatePickerField, DatePickerInput, DatePickerTrigger,
+  DatePickerContent, DatePickerArrow, DatePickerCalendar,
+  DatePickerHeader, DatePickerPrev, DatePickerHeading, DatePickerNext,
+  DatePickerGrid, DatePickerGridHead, DatePickerGridBody, DatePickerGridRow,
+  DatePickerHeadCell, DatePickerCell, DatePickerCellTrigger,
+} from 'reka-ui'
+import type { DateValue } from '@internationalized/date'
+import { isoToDate, dateToIso, type IsoPrecision } from '../../utils/iso-date'
+
+const { t } = useT()
+
+const props = withDefaults(
+  defineProps<{
+    precision?: IsoPrecision
+    disabled?: boolean
+    locale?: string
+    // a11y: the segmented control has no single labelable <input>, so the field name is carried as an
+    // aria-label on the role=group field, with the error/hint + invalid/required state wired alongside.
+    ariaLabel?: string
+    describedby?: string
+    invalid?: boolean
+    required?: boolean
+  }>(),
+  { precision: 'datetime', disabled: false },
+)
+const model = defineModel<string | null>()
+
+// Match the native inputs, which format to the browser locale. Overridable for a future admin-locale setting.
+const displayLocale = computed(() => props.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en'))
+const granularity = computed(() => (props.precision === 'date' ? 'day' : 'minute'))
+const value = computed<DateValue | undefined>({
+  get: () => isoToDate(model.value, props.precision),
+  set: (v) => { model.value = dateToIso(v) },
+})
+</script>
+
+<template>
+  <DatePickerRoot v-model="value" :granularity="granularity" :disabled="disabled" :locale="displayLocale">
+    <DatePickerField
+      v-slot="{ segments }"
+      class="ui-datepicker__field"
+      role="group"
+      :aria-label="ariaLabel"
+      :aria-describedby="describedby"
+      :aria-invalid="invalid || undefined"
+      :aria-required="required || undefined"
+    >
+      <DatePickerInput
+        v-for="item in segments"
+        :key="item.part"
+        :part="item.part"
+        class="ui-datepicker__segment"
+      >{{ item.value }}</DatePickerInput>
+      <DatePickerTrigger class="ui-datepicker__trigger" :aria-label="t('datePicker.openCalendar')"><UiIcon name="calendar" :size="16" /></DatePickerTrigger>
+    </DatePickerField>
+
+    <DatePickerContent class="ui-datepicker__content" :side-offset="6">
+      <DatePickerArrow class="ui-datepicker__arrow" />
+      <DatePickerCalendar v-slot="{ weekDays, grid }" class="ui-datepicker__calendar">
+        <DatePickerHeader class="ui-datepicker__header">
+          <DatePickerPrev class="ui-datepicker__nav" :aria-label="t('datePicker.previousMonth')">‹</DatePickerPrev>
+          <DatePickerHeading class="ui-datepicker__heading" />
+          <DatePickerNext class="ui-datepicker__nav" :aria-label="t('datePicker.nextMonth')">›</DatePickerNext>
+        </DatePickerHeader>
+        <DatePickerGrid v-for="month in grid" :key="month.value.toString()" class="ui-datepicker__grid">
+          <DatePickerGridHead>
+            <DatePickerGridRow class="ui-datepicker__row">
+              <DatePickerHeadCell v-for="day in weekDays" :key="day" class="ui-datepicker__weekday">{{ day }}</DatePickerHeadCell>
+            </DatePickerGridRow>
+          </DatePickerGridHead>
+          <DatePickerGridBody>
+            <DatePickerGridRow v-for="(weekDates, i) in month.rows" :key="`w${i}`" class="ui-datepicker__row">
+              <DatePickerCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+                <DatePickerCellTrigger :day="weekDate" :month="month.value" class="ui-datepicker__cell" />
+              </DatePickerCell>
+            </DatePickerGridRow>
+          </DatePickerGridBody>
+        </DatePickerGrid>
+      </DatePickerCalendar>
+    </DatePickerContent>
+  </DatePickerRoot>
+</template>
+
+<style lang="scss">
+// Shared, global (non-scoped) datepicker chrome — the calendar is teleported to <body>.
+@use '../../assets/scss/datepicker' as *;
+@include ui-datepicker;
+</style>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiIcon from './Icon.vue'
+import {
+  DateRangePickerRoot, DateRangePickerField, DateRangePickerInput, DateRangePickerTrigger,
+  DateRangePickerContent, DateRangePickerArrow, DateRangePickerCalendar,
+  DateRangePickerHeader, DateRangePickerPrev, DateRangePickerHeading, DateRangePickerNext,
+  DateRangePickerGrid, DateRangePickerGridHead, DateRangePickerGridBody, DateRangePickerGridRow,
+  DateRangePickerHeadCell, DateRangePickerCell, DateRangePickerCellTrigger,
+} from 'reka-ui'
+import type { DateValue } from '@internationalized/date'
+import { isoToDate, dateToIso, type IsoPrecision } from '../../utils/iso-date'
+
+const { t } = useT()
+const props = withDefaults(
+  defineProps<{
+    precision?: IsoPrecision
+    disabled?: boolean
+    locale?: string
+    // a11y: see DatePicker — the field name rides as an aria-label on the role=group field.
+    ariaLabel?: string
+    describedby?: string
+    invalid?: boolean
+    required?: boolean
+  }>(),
+  { precision: 'datetime', disabled: false },
+)
+const model = defineModel<{ start: string; end: string } | null>()
+
+const displayLocale = computed(() => props.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en'))
+const granularity = computed(() => (props.precision === 'date' ? 'day' : 'minute'))
+const value = computed<{ start: DateValue | undefined; end: DateValue | undefined }>({
+  get: () => ({
+    start: isoToDate(model.value?.start, props.precision),
+    end: isoToDate(model.value?.end, props.precision),
+  }),
+  set: (v) => {
+    const start = dateToIso(v.start)
+    const end = dateToIso(v.end)
+    // Preserve a partial selection (Reka commits start before end) as empty strings.
+    model.value = start || end ? { start: start ?? '', end: end ?? '' } : null
+  },
+})
+</script>
+
+<template>
+  <DateRangePickerRoot v-model="value" :granularity="granularity" :disabled="disabled" :locale="displayLocale">
+    <DateRangePickerField
+      v-slot="{ segments }"
+      class="ui-datepicker__field"
+      role="group"
+      :aria-label="ariaLabel"
+      :aria-describedby="describedby"
+      :aria-invalid="invalid || undefined"
+      :aria-required="required || undefined"
+    >
+      <template v-for="item in segments.start" :key="`s-${item.part}`">
+        <DateRangePickerInput :part="item.part" type="start" class="ui-datepicker__segment">{{ item.value }}</DateRangePickerInput>
+      </template>
+      <span class="ui-datepicker__sep" aria-hidden="true">–</span>
+      <template v-for="item in segments.end" :key="`e-${item.part}`">
+        <DateRangePickerInput :part="item.part" type="end" class="ui-datepicker__segment">{{ item.value }}</DateRangePickerInput>
+      </template>
+      <DateRangePickerTrigger class="ui-datepicker__trigger" :aria-label="t('dateRange.openCalendar')"><UiIcon name="calendar" :size="16" /></DateRangePickerTrigger>
+    </DateRangePickerField>
+
+    <DateRangePickerContent class="ui-datepicker__content" :side-offset="6">
+      <DateRangePickerArrow class="ui-datepicker__arrow" />
+      <DateRangePickerCalendar v-slot="{ weekDays, grid }" class="ui-datepicker__calendar">
+        <DateRangePickerHeader class="ui-datepicker__header">
+          <DateRangePickerPrev class="ui-datepicker__nav" :aria-label="t('dateRange.previousMonth')">‹</DateRangePickerPrev>
+          <DateRangePickerHeading class="ui-datepicker__heading" />
+          <DateRangePickerNext class="ui-datepicker__nav" :aria-label="t('dateRange.nextMonth')">›</DateRangePickerNext>
+        </DateRangePickerHeader>
+        <DateRangePickerGrid v-for="month in grid" :key="month.value.toString()" class="ui-datepicker__grid">
+          <DateRangePickerGridHead>
+            <DateRangePickerGridRow class="ui-datepicker__row">
+              <DateRangePickerHeadCell v-for="day in weekDays" :key="day" class="ui-datepicker__weekday">{{ day }}</DateRangePickerHeadCell>
+            </DateRangePickerGridRow>
+          </DateRangePickerGridHead>
+          <DateRangePickerGridBody>
+            <DateRangePickerGridRow v-for="(weekDates, i) in month.rows" :key="`w${i}`" class="ui-datepicker__row">
+              <DateRangePickerCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+                <DateRangePickerCellTrigger :day="weekDate" :month="month.value" class="ui-datepicker__cell" />
+              </DateRangePickerCell>
+            </DateRangePickerGridRow>
+          </DateRangePickerGridBody>
+        </DateRangePickerGrid>
+      </DateRangePickerCalendar>
+    </DateRangePickerContent>
+  </DateRangePickerRoot>
+</template>
+
+<style lang="scss">
+// Shares the global (non-scoped) datepicker chrome — the calendar is teleported to <body>, so a
+// `scoped` block would silently drop these styles. Included explicitly rather than borrowing them
+// from DatePicker being present on the page.
+@use '../../assets/scss/datepicker' as *;
+@include ui-datepicker;
+</style>

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { DialogRoot, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from 'reka-ui'
+import UiIcon from './Icon.vue'
+
+const props = defineProps<{ open: boolean; title: string; description?: string; size?: 'md' | 'lg' | 'xl' }>()
+const emit = defineEmits<{ 'update:open': [boolean] }>()
+const { t } = useT()
+
+// Rendering in place means dialog inputs are form-associated with any ancestor form (the record
+// editor): Enter in a text-entry input would implicitly submit it — saving the half-edited record
+// from inside a picker. Swallow that default here; Enter on buttons (and click-like inputs) keeps
+// its activation behavior, and a dialog can still opt into Enter via its own @keydown.enter handler.
+const CLICK_INPUT_TYPES = new Set(['button', 'submit', 'reset', 'checkbox', 'radio', 'file'])
+function onKeydown(e: KeyboardEvent) {
+  if (e.key !== 'Enter' || e.isComposing) return
+  const el = e.target
+  if (el instanceof HTMLInputElement && !CLICK_INPUT_TYPES.has(el.type)) e.preventDefault()
+}
+</script>
+
+<template>
+  <!-- Reka Dialog, rendered IN PLACE (no DialogPortal). Reka provides the focus trap, scroll lock,
+       Escape/outside-click dismissal, ARIA wiring and focus restore; rendering in place (rather than
+       teleporting) keeps the dialog synchronously DOM-testable and needs no force-mount hack. The
+       admin's flat layouts don't need a portal to escape clipping — add DialogPortal here if that
+       ever changes. -->
+  <DialogRoot :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogOverlay class="ui-dialog__overlay" />
+    <DialogContent
+      class="ui-dialog__content"
+      :class="`ui-dialog__content--${size ?? 'md'}`"
+      v-bind="description ? {} : { 'aria-describedby': undefined }"
+      @keydown="onKeydown"
+    >
+      <header class="ui-dialog__header">
+        <DialogTitle class="ui-dialog__title">{{ title }}</DialogTitle>
+        <DialogClose data-test="dialog-close" class="ui-dialog__close" :aria-label="t('common.close')"><UiIcon name="x" :size="16" /></DialogClose>
+      </header>
+      <DialogDescription v-if="description" class="ui-dialog__desc">{{ description }}</DialogDescription>
+      <div class="ui-dialog__body"><slot /></div>
+      <footer v-if="$slots.footer" class="ui-dialog__footer"><slot name="footer" /></footer>
+    </DialogContent>
+  </DialogRoot>
+</template>
+
+<style lang="scss" scoped>
+.ui-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-dialog);
+  background: var(--color-scrim);
+}
+.ui-dialog__content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--z-dialog);
+  max-height: calc(100svh - var(--space-6));
+  overflow: auto;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-4);
+
+  &:focus,
+  &:focus-visible { outline: none; }
+}
+.ui-dialog__content--md { width: min(32rem, calc(100vw - 2rem)); }
+.ui-dialog__content--lg { width: min(64rem, calc(100vw - 2rem)); }
+.ui-dialog__content--xl { width: min(80rem, calc(100vw - 2rem)); }
+.ui-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.ui-dialog__title {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-bold);
+  margin: 0;
+}
+.ui-dialog__desc {
+  margin: 0 0 var(--space-3);
+  color: var(--color-text-muted);
+}
+.ui-dialog__close {
+  background: none;
+  border: 0;
+  font-size: var(--text-xl);
+  line-height: 1;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+
+  &:hover { background: var(--color-hover); color: var(--color-text); }
+  &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+}
+.ui-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+}
+</style>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { IconName } from '../../utils/icons'
+
+defineProps<{ icon?: IconName; title: string; description?: string }>()
+</script>
+
+<template>
+  <div class="ui-empty">
+    <UiIcon v-if="icon" :name="icon" size="1.5rem" class="ui-empty__icon" />
+    <p class="ui-empty__title">{{ title }}</p>
+    <p v-if="description" class="ui-empty__desc">{{ description }}</p>
+    <div v-if="$slots.action" class="ui-empty__action"><slot name="action" /></div>
+  </div>
+</template>
+
+<style lang="scss">
+.ui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+
+  &__icon {
+    margin-bottom: var(--space-1);
+    color: var(--color-text-subtle);
+  }
+  &__title {
+    font-weight: var(--weight-medium);
+    color: var(--color-text);
+  }
+  &__desc {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    max-width: 40ch;
+  }
+  &__action {
+    margin-top: var(--space-2);
+  }
+}
+</style>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFieldA11y } from '../../utils/useFieldA11y'
+
+const props = defineProps<{
+  label?: string
+  hint?: string
+  error?: string | null
+  required?: boolean
+  id?: string
+}>()
+
+const { fieldId, hintId, errId, describedby, ariaInvalid } = useFieldA11y(props)
+
+const slotProps = computed(() => ({
+  id: fieldId.value,
+  'aria-invalid': ariaInvalid.value,
+  'aria-describedby': describedby.value,
+  required: props.required,
+}))
+</script>
+
+<template>
+  <div class="ui-field" :data-invalid="error ? 'true' : undefined">
+    <label v-if="label" :for="fieldId" class="ui-field__label">
+      {{ label }}<span v-if="required" class="ui-field__required" aria-hidden="true">*</span>
+    </label>
+    <slot v-bind="slotProps" />
+    <p v-if="hint" :id="hintId" class="ui-field__hint">{{ hint }}</p>
+    <p v-if="error" :id="errId" class="ui-field__error" role="alert">{{ error }}</p>
+  </div>
+</template>
+
+<style lang="scss">
+.ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+
+  &__label {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+  &__required {
+    color: var(--color-danger);
+    margin-inline-start: var(--space-1);
+  }
+  &__hint {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+  &__error {
+    font-size: var(--text-sm);
+    color: var(--color-danger);
+  }
+}
+</style>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFieldA11y } from '../../utils/useFieldA11y'
+
+const props = defineProps<{
+  label?: string
+  hint?: string
+  error?: string | null
+  required?: boolean
+  id?: string
+}>()
+
+const { fieldId, hintId, errId, describedby, ariaInvalid, ariaRequired } = useFieldA11y(props)
+
+// No `id` — a group has no single control to point a label `for` at; the
+// <legend> labels the group natively. Consumers spread these onto the group root.
+const slotProps = computed(() => ({
+  'aria-invalid': ariaInvalid.value,
+  'aria-describedby': describedby.value,
+  'aria-required': ariaRequired.value,
+  required: props.required,
+}))
+</script>
+
+<template>
+  <fieldset class="ui-fieldset" :data-invalid="error ? 'true' : undefined">
+    <legend v-if="label" class="ui-fieldset__legend">
+      {{ label }}<span v-if="required" class="ui-fieldset__required" aria-hidden="true">*</span>
+    </legend>
+    <slot v-bind="slotProps" />
+    <p v-if="hint" :id="hintId" class="ui-fieldset__hint">{{ hint }}</p>
+    <p v-if="error" :id="errId" class="ui-fieldset__error" role="alert">{{ error }}</p>
+  </fieldset>
+</template>
+
+<style lang="scss">
+.ui-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  &__legend {
+    padding: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+  &__required {
+    color: var(--color-danger);
+    margin-inline-start: var(--space-1);
+  }
+  &__hint {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+  &__error {
+    font-size: var(--text-sm);
+    color: var(--color-danger);
+  }
+}
+</style>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { isIconName, resolveIconBody, type IconSpec } from '../../utils/icons'
+
+const props = withDefaults(defineProps<{ name: IconSpec; size?: string | number; label?: string }>(), { size: '1em' })
+const attrs = useAttrs()
+
+const dim = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size))
+const body = computed(() => resolveIconBody(props.name))
+// `data-icon` exposes the resolved registry key (or `custom` for raw SVG) for styling/tests.
+const dataIcon = computed(() => (isIconName(props.name) ? props.name : 'custom'))
+// A caller can give the icon an accessible name via fallthrough attrs (role/aria-label) instead of the
+// `label` prop — either way it must not stay `aria-hidden`, or the name is invisible to AT.
+const hasA11yName = computed(() => props.label != null || attrs.role != null || attrs['aria-label'] != null || attrs['aria-labelledby'] != null)
+</script>
+
+<template>
+  <!-- v-html body is either a static registry icon or developer-supplied SVG allowlist-sanitised by
+       resolveIconBody → sanitizeIconSvg (no script-capable elements/attributes survive). -->
+  <svg
+    class="ui-icon"
+    :data-icon="dataIcon"
+    :width="dim"
+    :height="dim"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :role="label ? 'img' : undefined"
+    :aria-label="label || undefined"
+    :aria-hidden="hasA11yName ? undefined : 'true'"
+    v-html="body"
+  />
+</template>
+
+<style lang="scss">
+.ui-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, ContextMenuContent, ContextMenuItem } from 'reka-ui'
+
+export interface MenuItem { label: string; value: string; danger?: boolean; disabled?: boolean }
+defineProps<{ items: MenuItem[] }>()
+const emit = defineEmits<{ select: [string] }>()
+</script>
+
+<template>
+  <ContextMenuRoot>
+    <ContextMenuTrigger as-child>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal>
+      <ContextMenuContent class="ui-menu" :collision-padding="8">
+        <ContextMenuItem
+          v-for="it in items"
+          :key="it.value"
+          :disabled="it.disabled"
+          class="ui-menu__item"
+          :class="{ 'ui-menu__item--danger': it.danger }"
+          @select="emit('select', it.value)"
+        >{{ it.label }}</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>
+
+<style lang="scss">
+// Not scoped: Reka teleports the menu content to <body>, where a scoped data-v selector would no
+// longer match — so the surface background/border silently dropped out (Image: a backgroundless,
+// hard-to-read context menu). The other portaled overlays (Combobox/DatePicker/Select) are global too.
+.ui-menu {
+  min-width: 11rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-1);
+  z-index: var(--z-dropdown);
+}
+.ui-menu__item {
+  display: block;
+  width: 100%;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  user-select: none;
+  &[data-highlighted] { background: var(--color-hover); outline: none; }
+  &[data-disabled] { color: var(--color-text-muted); cursor: default; }
+  &--danger { color: var(--color-danger); }
+}
+</style>