@michaelthielemann/kestrel 1.2.1

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { IconName } from '../../utils/icons'
+
+withDefaults(
+  defineProps<{
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    type?: 'button' | 'submit' | 'reset'
+    disabled?: boolean
+    loading?: boolean
+    icon?: IconName
+  }>(),
+  { variant: 'secondary', size: 'md', type: 'button', disabled: false, loading: false },
+)
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="ui-button"
+    :class="[`ui-button--${variant}`, `ui-button--${size}`]"
+    :disabled="disabled || loading"
+    :aria-busy="loading || undefined"
+  >
+    <span v-if="loading" class="ui-button__spinner" aria-hidden="true" />
+    <UiIcon v-else-if="icon" :name="icon" class="ui-button__icon" />
+    <span v-if="$slots.default" class="ui-button__label"><slot /></span>
+  </button>
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-button {
+  @include focus-ring;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  transition:
+    background-color var(--motion-fast) var(--ease-standard),
+    border-color var(--motion-fast) var(--ease-standard);
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &--sm {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+  }
+  &--md {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-base);
+  }
+  &--lg {
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--text-lg);
+  }
+
+  &--primary {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+
+    &:hover:not(:disabled) {
+      background: var(--color-primary-hover);
+    }
+  }
+  &--secondary {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border-color: var(--color-border);
+
+    &:hover:not(:disabled) {
+      background: var(--color-surface-2);
+      border-color: var(--color-border-strong);
+    }
+  }
+  &--ghost {
+    background: transparent;
+    color: var(--color-text);
+
+    &:hover:not(:disabled) {
+      background: var(--color-hover);
+    }
+  }
+  &--danger {
+    background: var(--color-danger-solid);
+    color: var(--color-on-danger);
+
+    &:hover:not(:disabled) {
+      filter: brightness(0.93);
+    }
+  }
+
+  &__spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: var(--radius-full);
+    animation: ui-button-spin var(--motion-base) linear infinite;
+  }
+}
+
+@keyframes ui-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ToggleGroupRoot, ToggleGroupItem } from 'reka-ui'
+import UiIcon from './Icon.vue'
+import type { IconName } from '../../utils/icons'
+
+const props = withDefaults(
+  defineProps<{
+    options: { label: string; value: string; icon?: IconName }[]
+    multiple?: boolean
+    disabled?: boolean
+  }>(),
+  { multiple: false, disabled: false },
+)
+
+const model = defineModel<string | string[] | null>()
+
+const current = computed(() =>
+  props.multiple ? (Array.isArray(model.value) ? model.value : []) : (model.value ?? undefined),
+)
+
+// reka's ToggleGroupRoot emits the broad `AcceptableValue`; an `unknown` param satisfies that contract and
+// we coerce back to our `string | string[]` model here.
+function onUpdate(v: unknown) {
+  if (props.multiple) model.value = Array.isArray(v) ? (v as string[]) : []
+  else model.value = v ? (v as string) : null
+}
+</script>
+
+<template>
+  <ToggleGroupRoot
+    :model-value="current"
+    :type="multiple ? 'multiple' : 'single'"
+    :disabled="disabled"
+    class="ui-btngroup"
+    @update:model-value="onUpdate"
+  >
+    <ToggleGroupItem
+      v-for="o in options"
+      :key="o.value"
+      :value="o.value"
+      :disabled="disabled"
+      class="ui-btngroup__item"
+    >
+      <UiIcon v-if="o.icon" :name="o.icon" :size="15" />
+      {{ o.label }}
+    </ToggleGroupItem>
+  </ToggleGroupRoot>
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-btngroup {
+  display: inline-flex;
+  // Wrap is required: this is a shared primitive (field/Choice renders it with arbitrary options), so a
+  // long set must break onto multiple rows rather than overflow/clip. A 2-item toggle never wraps anyway.
+  flex-wrap: wrap;
+  border: 1px solid var(--color-control-border, var(--color-border));
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  width: fit-content;
+
+  &__item {
+    @include focus-ring;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-3);
+    border: 0;
+    border-inline-start: 1px solid var(--color-control-border, var(--color-border));
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: var(--text-sm);
+    cursor: pointer;
+
+    &:first-child {
+      border-inline-start: 0;
+    }
+    &:hover {
+      background: var(--color-hover);
+    }
+    // Neutral fill + an indigo label so the active segment reads at a glance (the fill alone is too
+    // close to the hover wash to rely on). Fallback for use outside the themed admin shell.
+    &[data-state='on'] {
+      background: var(--color-active, var(--color-surface-2));
+      color: var(--color-primary-on-fill, var(--color-primary));
+      font-weight: var(--weight-medium);
+    }
+    &[data-disabled] {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    /** Tri-state marker for a "some but not all" selection (e.g. a select-all header). */
+    indeterminate?: boolean
+  }>(),
+  { disabled: false, indeterminate: false },
+)
+
+// Defaulted so the emitted value is a plain `boolean`: an undefined-able model would force every
+// handler to coerce, and an unbound checkbox is unchecked anyway.
+const model = defineModel<boolean>({ default: false })
+
+// `indeterminate` is a DOM PROPERTY with no HTML attribute, so it can't be bound in the template and must
+// be assigned imperatively: once on mount (the element now exists) and again whenever the prop changes.
+const input = ref<HTMLInputElement | null>(null)
+function syncIndeterminate() {
+  if (input.value) input.value.indeterminate = props.indeterminate
+}
+onMounted(syncIndeterminate)
+watch(() => props.indeterminate, syncIndeterminate)
+</script>
+
+<template>
+  <input
+    ref="input"
+    v-model="model"
+    type="checkbox"
+    :disabled="disabled"
+    class="ui-checkbox"
+  >
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-checkbox {
+  @include focus-ring;
+  width: 1.25rem;
+  height: 1.25rem;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+</style>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiCheckbox from './Checkbox.vue'
+
+withDefaults(
+  defineProps<{
+    options: { label: string; value: string }[]
+    disabled?: boolean
+  }>(),
+  { disabled: false },
+)
+
+const model = defineModel<string[]>()
+const selected = computed(() => model.value ?? [])
+
+function toggle(value: string, checked: boolean) {
+  const set = new Set(selected.value)
+  if (checked) set.add(value)
+  else set.delete(value)
+  model.value = [...set]
+}
+</script>
+
+<template>
+  <div class="ui-checkbox-group" role="group">
+    <label v-for="o in options" :key="o.value" class="ui-checkbox-group__item">
+      <UiCheckbox
+        :model-value="selected.includes(o.value)"
+        :disabled="disabled"
+        @update:model-value="(c) => toggle(o.value, c)"
+      />
+      <span>{{ o.label }}</span>
+    </label>
+  </div>
+</template>
+
+<style lang="scss">
+.ui-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from 'vue'
+import UiIcon from './Icon.vue'
+import {
+  ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel,
+  ComboboxContent, ComboboxViewport, ComboboxItem, ComboboxItemIndicator,
+} from 'reka-ui'
+import type { FieldOption } from '../../utils/field-component'
+import { reorder } from '../../utils/reorder'
+
+const props = withDefaults(
+  defineProps<{
+    options: FieldOption[]
+    selected: FieldOption[]
+    multiple?: boolean
+    loading?: boolean
+    placeholder?: string
+    disabled?: boolean
+    inputId?: string
+    invalid?: boolean
+    describedby?: string
+    required?: boolean
+  }>(),
+  { multiple: false, loading: false, disabled: false, invalid: false, required: false },
+)
+
+const model = defineModel<number | number[] | null>()
+const emit = defineEmits<{ search: [term: string] }>()
+
+const query = ref('')
+
+// Reka's root model: an array for multiple, the value (or undefined) for single.
+const rootModel = computed<number | number[] | undefined>({
+  get: () => (props.multiple
+    ? (Array.isArray(model.value) ? model.value : [])
+    : (typeof model.value === 'number' ? model.value : undefined)),
+  set: (v) => { model.value = props.multiple ? ((v as number[]) ?? []) : (typeof v === 'number' ? v : null) },
+})
+
+function labelFor(id: number): string {
+  return props.selected.find((s) => s.value === id)?.label
+    ?? props.options.find((o) => o.value === id)?.label
+    ?? `#${id}`
+}
+const displayValue = (id: unknown) => (typeof id === 'number' ? labelFor(id) : '')
+
+// In single mode Reka resyncs the input text to the selected label on select/blur;
+// that programmatic update must not be treated as a user search.
+const currentLabel = computed(() => (!props.multiple && typeof model.value === 'number' ? labelFor(model.value) : null))
+
+// A selected label can resolve asynchronously (id known, label fetched later) with no model change,
+// which Reka's display-value callback won't re-evaluate — mirror it into the single-mode input.
+watch(currentLabel, (lbl) => { if (lbl != null) query.value = lbl })
+
+function onInput(term: string) {
+  query.value = term
+  if (term === currentLabel.value) return
+  emit('search', term)
+}
+// Focusing an empty box loads the first page of records, so options appear without typing.
+function onFocus() {
+  if (!query.value.trim()) emit('search', '')
+}
+function removeChip(id: number) {
+  if (Array.isArray(model.value)) model.value = model.value.filter((v) => v !== id)
+}
+
+const { t } = useT()
+
+const chips = ref<HTMLElement | null>(null)
+const liveMessage = ref('')
+
+function announceMove(label: string, to: number) {
+  liveMessage.value = t('combobox.moved', { label, pos: to + 1, total: props.selected.length })
+}
+
+// The chip index IS the model index here, so commit reorders the model directly.
+const { dragIndex, overIndex, onDragStart, onDragEnter, onDragLeave, onDrop, onDragEnd } = useDragReorder({
+  disabled: () => props.disabled || !Array.isArray(model.value),
+  commit: (from, to) => {
+    // Re-stated here rather than relying on the `disabled` predicate above: only the local check narrows
+    // the model to the multi-value array `reorder` returns (and that `model.value` accepts back).
+    if (!Array.isArray(model.value)) return
+    const label = props.selected[from]?.label ?? ''
+    model.value = reorder(model.value, from, to)
+    nextTick(() => announceMove(label, to))
+  },
+})
+
+function moveChip(from: number, to: number) {
+  if (props.disabled || !Array.isArray(model.value) || to < 0 || to >= model.value.length) return
+  const dir = to < from ? 'earlier' : 'later'
+  const label = props.selected[from]?.label ?? ''
+  model.value = reorder(model.value, from, to)
+  // Keep keyboard focus on the moved chip: keyed reuse preserves it for the pressed button, but when that
+  // button becomes disabled at a boundary the browser drops focus to <body> — redirect to the remove button.
+  nextTick(() => {
+    announceMove(label, to)
+    const chip = chips.value?.children[to] as HTMLElement | undefined
+    if (!chip) return
+    const moveBtns = chip.querySelectorAll<HTMLButtonElement>('.ui-combobox__chip-move')
+    const dirBtn = dir === 'earlier' ? moveBtns[0] : moveBtns[1]
+    ;(dirBtn && !dirBtn.disabled ? dirBtn : chip.querySelector<HTMLButtonElement>('.ui-combobox__chip-remove'))?.focus()
+  })
+}
+</script>
+
+<template>
+  <ComboboxRoot
+    v-model="rootModel"
+    :multiple="multiple"
+    :disabled="disabled"
+    ignore-filter
+    reset-model-value-on-clear
+    :open-on-click="true"
+    :open-on-focus="true"
+    class="ui-combobox"
+  >
+    <ComboboxAnchor class="ui-combobox__anchor" :data-multiple="multiple || undefined" :aria-invalid="invalid || undefined">
+      <ul v-if="multiple && selected.length" ref="chips" class="ui-combobox__chips" role="list" @dragleave="onDragLeave">
+        <li
+          v-for="(s, i) in selected"
+          :key="s.value"
+          class="ui-combobox__chip"
+          :class="{ 'ui-combobox__chip--over': overIndex === i && dragIndex !== i }"
+          :draggable="!disabled"
+          @dragstart="onDragStart(i, $event)"
+          @dragenter="onDragEnter(i)"
+          @dragover.prevent="onDragEnter(i)"
+          @drop.prevent="onDrop(i)"
+          @dragend="onDragEnd"
+        >
+          <button
+            type="button"
+            draggable="false"
+            class="ui-combobox__chip-move"
+            :aria-label="t('combobox.move_earlier', { label: s.label })"
+            :disabled="disabled || i === 0"
+            @click="moveChip(i, i - 1)"
+          ><UiIcon name="chevron-left" :size="14" /></button>
+          <span>{{ s.label }}</span>
+          <button
+            type="button"
+            draggable="false"
+            class="ui-combobox__chip-move"
+            :aria-label="t('combobox.move_later', { label: s.label })"
+            :disabled="disabled || i === selected.length - 1"
+            @click="moveChip(i, i + 1)"
+          ><UiIcon name="chevron-right" :size="14" /></button>
+          <button
+            type="button"
+            draggable="false"
+            class="ui-combobox__chip-remove"
+            :aria-label="t('combobox.remove', { label: s.label })"
+            :disabled="disabled"
+            @click="removeChip(s.value)"
+          ><UiIcon name="x" :size="14" /></button>
+        </li>
+      </ul>
+      <ComboboxInput
+        :id="inputId"
+        class="ui-combobox__input"
+        :model-value="query"
+        :placeholder="placeholder"
+        :display-value="multiple ? undefined : displayValue"
+        :disabled="disabled"
+        :aria-invalid="invalid || undefined"
+        :aria-describedby="describedby"
+        :required="required || undefined"
+        @update:model-value="onInput"
+        @focus="onFocus"
+      />
+      <ComboboxCancel v-if="!multiple" class="ui-combobox__icon" :aria-label="t('combobox.clear')"><UiIcon name="x" :size="14" /></ComboboxCancel>
+      <ComboboxTrigger class="ui-combobox__icon" :aria-label="t('combobox.toggle_options')"><UiIcon name="chevron-down" :size="14" /></ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxContent class="ui-combobox__content" :side-offset="4">
+      <ComboboxViewport class="ui-combobox__viewport">
+        <p v-if="loading" class="ui-combobox__note">{{ t('combobox.loading') }}</p>
+        <p v-else-if="!options.length" class="ui-combobox__note">{{ t('combobox.no_results') }}</p>
+        <ComboboxItem
+          v-for="o in options"
+          :key="o.value"
+          :value="o.value"
+          class="ui-combobox__item"
+        >
+          <span>{{ o.label }}</span>
+          <ComboboxItemIndicator class="ui-combobox__check"><UiIcon name="check" :size="14" /></ComboboxItemIndicator>
+        </ComboboxItem>
+      </ComboboxViewport>
+    </ComboboxContent>
+
+    <span class="ui-combobox__live" aria-live="polite">{{ liveMessage }}</span>
+  </ComboboxRoot>
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-combobox {
+  &__anchor {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--color-control-border, var(--color-border));
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+
+    &:focus-within { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+    &[aria-invalid='true'] { border-color: var(--color-danger); }
+  }
+  &__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: 0 var(--space-1) 0 var(--space-2);
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-sm);
+  }
+  &__chip-remove {
+    @include focus-ring;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-text-muted);
+    font-size: var(--text-base);
+    line-height: 1;
+  }
+  &__chip-move {
+    @include focus-ring;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-text-muted);
+    font-size: var(--text-base);
+    line-height: 1;
+    // Collapsed + transparent when idle so the chip stays compact, but NOT display/visibility:none —
+    // the button must remain focusable so keyboard users can Tab to it (which then reveals it via
+    // :focus-within below). Revealed on hover/focus, and always shown where there is no hover (touch).
+    opacity: 0;
+    max-width: 0;
+    padding: 0;
+    overflow: hidden;
+    // animate only size, not opacity, so the focus ring shows immediately on keyboard focus
+    transition: max-width 0.1s, padding 0.1s;
+
+    &:disabled { cursor: default; } // stays collapsed (the reveal selector excludes :disabled)
+  }
+  &__live { @include sr-only; }
+  &__chip {
+    &:hover,
+    &:focus-within {
+      .ui-combobox__chip-move:not(:disabled) {
+        opacity: 1;
+        max-width: 1.5rem;
+        padding: 0 var(--space-1);
+      }
+    }
+  }
+  @media (hover: none) {
+    &__chip-move:not(:disabled) {
+      opacity: 1;
+      max-width: 1.5rem;
+      padding: 0 var(--space-1);
+    }
+  }
+  &__chip--over {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+  &__input {
+    flex: 1;
+    min-width: 6rem;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--color-text);
+    font-size: var(--text-base);
+    padding: var(--space-1) 0;
+  }
+  &__icon {
+    @include focus-ring;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-text-muted);
+  }
+  &__content {
+    z-index: var(--z-dropdown);
+    width: var(--reka-combobox-trigger-width);
+    max-height: 16rem;
+    overflow: hidden;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+  }
+  &__viewport {
+    max-height: 16rem;
+    overflow-y: auto;
+    padding: var(--space-1);
+  }
+  &__note {
+    padding: var(--space-2) var(--space-3);
+    color: var(--color-text-muted);
+    font-size: var(--text-sm);
+  }
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+
+    &[data-highlighted] { background: var(--color-hover); outline: none; }
+    &[data-state='checked'] { font-weight: var(--weight-medium); }
+  }
+  &__check { color: var(--color-primary); }
+}
+</style>