@michaelthielemann/kestrel 1.2.1

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

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// `$attrs` (id / aria-* from UiField, autocomplete, …) is bound to the inner <input>, not the wrapper,
+// so the field-label association + error wiring keep working with the reveal button in place.
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'text' | 'password' | 'email' | 'url' | 'search' | 'tel'
+    placeholder?: string
+    disabled?: boolean
+    /** Force the show/hide reveal affordance on a non-password input. Password inputs get it automatically. */
+    reveal?: boolean
+    /** Tighter padding for dense chrome (toolbars). Still meets the AA minimum target size. */
+    slim?: boolean
+  }>(),
+  { type: 'text', disabled: false, reveal: false, slim: false },
+)
+
+const model = defineModel<string | null>()
+const { t } = useT()
+
+// Reveal is automatic for password inputs (the only consumer today), opt-in elsewhere via `reveal`.
+const revealable = computed(() => props.type === 'password' || props.reveal)
+const revealed = ref(false)
+// While revealed, a password input becomes a text input so the typed value is legible; other types
+// are unaffected. The control is a switch — the rendered type tracks `revealed` exactly.
+const inputType = computed(() => (revealable.value && revealed.value ? 'text' : props.type))
+</script>
+
+<template>
+  <div class="ui-input-wrap">
+    <input
+      v-model="model"
+      :type="inputType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      class="ui-input"
+      :class="{ 'ui-input--revealable': revealable, 'ui-input--slim': slim }"
+      v-bind="$attrs"
+    >
+    <button
+      v-if="revealable"
+      type="button"
+      class="ui-input__reveal"
+      :disabled="disabled"
+      :aria-label="revealed ? t('input.hidePassword') : t('input.showPassword')"
+      @click="revealed = !revealed"
+    >
+      <UiIcon :name="revealed ? 'eye-off' : 'eye'" size="1.125rem" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-input-wrap {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.ui-input {
+  @include input-base;
+  width: 100%;
+
+  &::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  &--slim {
+    @include input-slim;
+  }
+
+  // Leave room for the inset reveal button so the value never sits under it. Declared after `--slim` so a
+  // slim revealable input keeps the reveal gutter (equal specificity → source order wins).
+  &--revealable {
+    padding-inline-end: 2.5rem;
+  }
+}
+
+.ui-input__reveal {
+  @include focus-ring;
+  position: absolute;
+  inset-block: 1px;
+  inset-inline-end: 1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  // ≥24×24 target (WCAG 2.5.8): full input height, comfortable hit width.
+  min-inline-size: 2.25rem;
+  padding-inline: var(--space-2);
+  border: 0;
+  border-start-end-radius: var(--radius-md);
+  border-end-end-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    color: var(--color-text);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+</style>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    rows?: number
+    placeholder?: string
+    disabled?: boolean
+  }>(),
+  { rows: 4, disabled: false },
+)
+
+const model = defineModel<string | null>()
+</script>
+
+<template>
+  <textarea
+    v-model="model"
+    :rows="rows"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="ui-textarea"
+  />
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-textarea {
+  @include input-base;
+  width: 100%;
+  font-family: inherit;
+  line-height: var(--leading-normal);
+  resize: vertical;
+
+  &::placeholder {
+    color: var(--color-text-muted);
+  }
+}
+</style>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ disabled?: boolean }>(), { disabled: false })
+
+const model = defineModel<string | null>()
+</script>
+
+<template>
+  <input v-model="model" type="time" :disabled="disabled" class="ui-time">
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-time {
+  @include input-base;
+}
+</style>

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+// App-wide transient notifications. Teleported to <body> so it floats above any layout/dialog;
+// the queue lives in `useToast` (unit-tested), this is the thin render of it.
+const toasts = useToast()
+const { t } = useT()
+</script>
+
+<template>
+  <Teleport to="body">
+    <!-- Two PERSISTENT live regions that exist before any toast: a screen reader only announces changes to
+         a live region already in the DOM, so a role placed on the freshly-inserted toast node is missed.
+         The visual cards below carry no live role; these mirror their text (errors → assertive). -->
+    <div class="ui-toasts__live" aria-live="polite" role="status">
+      <template v-for="toast in toasts.items" :key="`p-${toast.id}`">
+        <div v-if="toast.type !== 'error'">{{ toast.message }}</div>
+      </template>
+    </div>
+    <div class="ui-toasts__live" aria-live="assertive" role="alert">
+      <template v-for="toast in toasts.items" :key="`a-${toast.id}`">
+        <div v-if="toast.type === 'error'">{{ toast.message }}</div>
+      </template>
+    </div>
+    <div class="ui-toasts" role="region" :aria-label="t('toast.region')">
+      <TransitionGroup name="ui-toast">
+        <div
+          v-for="toast in toasts.items"
+          :key="toast.id"
+          class="ui-toast"
+          :class="`ui-toast--${toast.type}`"
+        >
+          <span class="ui-toast__msg">{{ toast.message }}</span>
+          <button type="button" class="ui-toast__close" :aria-label="t('toast.dismiss')" @click="toasts.dismiss(toast.id)">
+            <UiIcon name="x" size="0.875rem" />
+          </button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style lang="scss">
+@use '../../assets/scss/mixins' as *;
+
+.ui-toasts__live { @include sr-only; }
+
+.ui-toasts {
+  position: fixed;
+  inset-block-end: var(--space-5);
+  inset-inline-end: var(--space-5);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: min(22rem, calc(100vw - var(--space-8)));
+  pointer-events: none;
+}
+
+.ui-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-inline-start: 4px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-size: var(--text-sm);
+
+  &--success { border-inline-start-color: var(--color-success); }
+  &--error { border-inline-start-color: var(--color-danger); }
+  &--info { border-inline-start-color: var(--color-primary); }
+
+  &__msg { flex: 1 1 auto; min-width: 0; }
+
+  &__close {
+    @include focus-ring;
+    flex-shrink: 0;
+    display: inline-flex;
+    padding: var(--space-1);
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+
+    &:hover { background: var(--color-hover); color: var(--color-text); }
+  }
+}
+
+.ui-toast-enter-active,
+.ui-toast-leave-active {
+  transition:
+    opacity var(--motion-base) var(--ease-standard),
+    transform var(--motion-base) var(--ease-standard);
+}
+.ui-toast-enter-from,
+.ui-toast-leave-to {
+  opacity: 0;
+  transform: translateY(var(--space-3));
+}
+</style>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent } from 'reka-ui'
+
+// A hover/focus tooltip primitive (auto-imported as `UiTooltip`). The default slot is the trigger
+// (`as-child`, so it must be a single element); the `content` slot is the floating panel. Self-contained
+// `TooltipProvider` so it works anywhere without an app-root provider. PORTALED (escapes the action-bar's
+// `overflow`/stacking context), so its styles are global — see below.
+withDefaults(defineProps<{ side?: 'top' | 'right' | 'bottom' | 'left'; delay?: number }>(), {
+  side: 'top',
+  delay: 150,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delay">
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent class="ui-tooltip" :side="side" :side-offset="6" :collision-padding="8">
+          <slot name="content" />
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
+
+<style lang="scss">
+// Not scoped: Reka teleports the content to <body>, where a scoped data-v selector no longer matches
+// (the same reason UiMenu and the other portaled overlays keep global styles — see the
+// `reka-portal-scoped-styles` note). `--z-toast` keeps it above dropdowns/dialogs it may overlap.
+.ui-tooltip {
+  max-width: 22rem;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  z-index: var(--z-toast);
+}
+</style>

package/layers/ui/app/composables/useAdminLang.ts

@@ -0,0 +1,8 @@
+/**
+ * The admin-UI language preference (chrome strings), cookie-backed so it persists and is SSR-safe.
+ * Deliberately distinct from the content locale (`useContentLocales` / the editor LocaleBar): one is
+ * the language of the dashboard, the other is the language of the content being edited.
+ */
+export function useAdminLang() {
+  return useCookie<string>('kestrel-admin-lang', { default: () => 'en' })
+}

package/layers/ui/app/composables/useDragReorder.ts

@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+
+/**
+ * The shared HTML drag-and-drop REORDER interaction (chip lists, media tiles, …): owns the `dragIndex` /
+ * `overIndex` state and the five dnd handlers, so a widget only supplies `disabled` and a `commit(from,
+ * to)` that actually reorders its model (and announces the move). The index passed to the handlers is
+ * whatever the widget renders by (a model index for the combobox, a resolved/subsequence index for the
+ * media field) — `commit` maps it.
+ */
+export function useDragReorder(opts: { disabled: () => boolean; commit: (from: number, to: number) => void }) {
+  const dragIndex = ref<number | null>(null)
+  const overIndex = ref<number | null>(null)
+
+  function onDragStart(index: number, event: DragEvent) {
+    if (opts.disabled()) return
+    dragIndex.value = index
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', String(index)) // Firefox needs data set to start the drag
+    }
+  }
+  function onDragEnter(index: number) {
+    if (dragIndex.value !== null) overIndex.value = index
+  }
+  // Clear the drop highlight only when the cursor leaves the list entirely (not on item-to-item moves).
+  function onDragLeave(event: DragEvent) {
+    if (!(event.currentTarget as Element).contains(event.relatedTarget as Node | null)) overIndex.value = null
+  }
+  function onDrop(index: number) {
+    if (opts.disabled() || dragIndex.value === null) return
+    if (dragIndex.value !== index) opts.commit(dragIndex.value, index)
+    dragIndex.value = null
+    overIndex.value = null
+  }
+  function onDragEnd() {
+    dragIndex.value = null
+    overIndex.value = null
+  }
+
+  return { dragIndex, overIndex, onDragStart, onDragEnter, onDragLeave, onDrop, onDragEnd }
+}

package/layers/ui/app/composables/useEchoGuard.ts

@@ -0,0 +1,28 @@
+import { watch } from 'vue'
+import type { Ref } from 'vue'
+
+/**
+ * The shared "mirror a v-model into local reactive state, skip the echo of our own emit, reseed on a
+ * genuine external change" guard — used by the block tree, the repeater and the link field.
+ *
+ * It compares the incoming model against the CURRENT local snapshot, NOT a one-shot "last emitted" token.
+ * A captured token goes stale: an external undo→redo (or copy-from-locale) can land back on a
+ * previously-emitted value and be wrongly skipped, stranding local state at the pre-undo content. The
+ * own-emit echo still short-circuits (the model we just wrote equals our snapshot), while any genuine
+ * difference reseeds.
+ *
+ * @param current  the local serializable snapshot (what we emit / compare against)
+ * @param reseed   apply an external model value into local state
+ * @param empty    the normalized form of a null/undefined model for the comparison (e.g. `[]` for a list)
+ */
+export function useEchoGuard<T>(model: Ref<T>, current: () => unknown, reseed: (v: T) => void, empty: unknown = null): void {
+  watch(model, (v) => {
+    // Own-emit fast path: writing `model.value` to our own reactive snapshot (e.g. `model.value =
+    // blocks.value`) resolves both sides to the SAME proxy, so a reference check catches it for free —
+    // skipping a full JSON.stringify of a potentially large tree on every keystroke. Excluded from
+    // null/undefined so the `empty` normalization below still runs for that case.
+    if (v !== null && v !== undefined && v === current()) return
+    if (JSON.stringify(v ?? empty) === JSON.stringify(current())) return
+    reseed(v)
+  })
+}

package/layers/ui/app/composables/useLinkField.ts

@@ -0,0 +1,70 @@
+import { ref, computed, watch } from 'vue'
+import type { Ref } from 'vue'
+import { useEchoGuard } from './useEchoGuard'
+import type { LinkValue, LinkType } from '../../../core/server/utils/defineCollection'
+
+export function useLinkField(
+  model: Ref<LinkValue | null | undefined>,
+  allowed: Ref<LinkType[]>,
+) {
+  const initial = model.value
+
+  const currentType = ref<LinkType>(
+    initial?.type ?? allowed.value[0] ?? 'external',
+  )
+  const label = ref(initial?.label ?? '')
+  const url = ref(initial?.type === 'external' ? initial.url : '')
+  const email = ref(initial?.type === 'email' ? initial.email : '')
+  const tel = ref(initial?.type === 'tel' ? initial.tel : '')
+  const collection = ref<string | null>(initial?.type === 'internal' ? initial.collection : null)
+  const recordId = ref<number | null>(initial?.type === 'internal' ? initial.id : null)
+  const hash = ref(initial?.type === 'internal' ? (initial.hash ?? '') : '')
+
+  function build(): LinkValue | null {
+    const lbl = label.value.trim() || undefined
+    const type = currentType.value
+    if (type === 'external') {
+      const u = url.value.trim()
+      return u ? { type: 'external', url: u, ...(lbl ? { label: lbl } : {}) } : null
+    }
+    if (type === 'email') {
+      const e = email.value.trim()
+      return e ? { type: 'email', email: e, ...(lbl ? { label: lbl } : {}) } : null
+    }
+    if (type === 'tel') {
+      const t = tel.value.trim()
+      return t ? { type: 'tel', tel: t, ...(lbl ? { label: lbl } : {}) } : null
+    }
+    if (collection.value && recordId.value != null) {
+      const h = hash.value.trim().replace(/^#+/, '')
+      return { type: 'internal', collection: collection.value, id: recordId.value, ...(h ? { hash: h } : {}), ...(lbl ? { label: lbl } : {}) }
+    }
+    return null
+  }
+
+  function reseed(m: LinkValue | null | undefined) {
+    const v = m ?? null
+    if (v) currentType.value = v.type
+    label.value = v?.label ?? ''
+    url.value = v?.type === 'external' ? v.url : ''
+    email.value = v?.type === 'email' ? v.email : ''
+    tel.value = v?.type === 'tel' ? v.tel : ''
+    collection.value = v?.type === 'internal' ? v.collection : null
+    recordId.value = v?.type === 'internal' ? v.id : null
+    hash.value = v?.type === 'internal' ? (v.hash ?? '') : ''
+  }
+
+  // Non-immediate so setup never reassigns an equivalent model (no spurious mount emit).
+  watch([currentType, label, url, email, tel, collection, recordId, hash], () => { model.value = build() })
+
+  // Echo-guarded reseed via the shared primitive: drafts follow an external model change, but the
+  // build() write above is recognised as self-originated (build() === model) so it never loops.
+  useEchoGuard(model, () => build(), reseed)
+
+  const typeModel = computed<LinkType>({
+    get: () => currentType.value,
+    set: (v) => { if (v) currentType.value = v as LinkType },
+  })
+
+  return { currentType, label, url, email, tel, collection, recordId, hash, typeModel }
+}

package/layers/ui/app/composables/useRecordOptions.ts

@@ -0,0 +1,84 @@
+import { ref, computed, watch, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+import type { FieldOption } from '../utils/field-component'
+
+export function useRecordOptions(
+  collection: Ref<string>,
+  ids: Ref<number[]>,
+  locale: Ref<string>,
+  labelField?: Ref<string | undefined>,
+) {
+  const cache = ref<Map<number, string>>(new Map())
+  const options = ref<FieldOption[]>([])
+  const loading = ref(false)
+
+  const selected = computed<FieldOption[]>(() =>
+    ids.value.map((value) => ({ value, label: cache.value.get(value) ?? `#${value}` })),
+  )
+
+  function cacheOptions(opts: FieldOption[]) {
+    const next = new Map(cache.value)
+    for (const o of opts) next.set(o.value, o.label)
+    cache.value = next
+  }
+
+  // The endpoint returns { id, label }; map it to the combobox's { value, label }.
+  async function fetchOptions(query: Record<string, unknown>): Promise<FieldOption[]> {
+    const res = await $fetch<{ data: { id: number; label: string }[] }>(`/api/${collection.value}/options`, {
+      query: { label: labelField?.value, locale: locale.value, ...query },
+    })
+    return res.data.map((r) => ({ value: r.id, label: r.label }))
+  }
+
+  // Labels are per-collection; drop stale options/cache on switch (runs before the resolve below).
+  watch(collection, () => {
+    cache.value = new Map()
+    options.value = []
+  })
+
+  // Resolve labels for any current ids we don't yet have cached. Depends on collection too, so it
+  // (re)resolves once the collection becomes available (a v-model prop can arrive after setup) and
+  // after a switch — not only when ids change.
+  watch([ids, collection], async () => {
+    const missing = ids.value.filter((value) => !cache.value.has(value))
+    const forCollection = collection.value
+    if (!missing.length || !forCollection) return
+    try {
+      const data = await fetchOptions({ ids: missing.join(',') })
+      if (collection.value === forCollection) cacheOptions(data) // discard if the collection switched mid-fetch
+    } catch {
+      // leave the unresolved ids as `#id` placeholders rather than throwing
+    }
+  }, { immediate: true })
+
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let searchSeq = 0
+
+  function onSearch(term: string) {
+    if (timer) clearTimeout(timer)
+    // No collection → nothing to list. Bump the token so any in-flight fetch can't repopulate.
+    if (!collection.value) { ++searchSeq; options.value = []; loading.value = false; return }
+    timer = setTimeout(async () => {
+      const seq = ++searchSeq
+      const forCollection = collection.value
+      loading.value = true
+      try {
+        // An empty term lists the first page (records appear on focus, no typing needed).
+        const data = await fetchOptions(term.trim() ? { search: term } : {})
+        // ignore if a newer search superseded this one, or the collection switched mid-fetch
+        if (seq === searchSeq && collection.value === forCollection) {
+          options.value = data
+          cacheOptions(data)
+        }
+      } catch {
+        if (seq === searchSeq) options.value = [] // failed search clears rather than showing stale matches
+      } finally {
+        if (seq === searchSeq) loading.value = false
+      }
+    }, 250)
+  }
+
+  onUnmounted(() => { if (timer) clearTimeout(timer) })
+
+  return { options, selected, loading, onSearch }
+}

package/layers/ui/app/composables/useRepeater.ts

@@ -0,0 +1,99 @@
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { FieldDef } from '../../../core/server/utils/defineCollection'
+import { reorder } from '../utils/reorder'
+import { useEchoGuard } from './useEchoGuard'
+
+export interface UseRepeater {
+  rows: Ref<Record<string, unknown>[]>
+  keys: Ref<number[]>
+  addRow: () => void
+  removeRow: (i: number) => void
+  move: (from: number, to: number) => void
+  setCell: (i: number, key: string, val: unknown) => void
+  insertRow: (at: number) => void
+  duplicateRow: (i: number) => void
+}
+
+export function useRepeater(
+  model: Ref<Record<string, unknown>[] | null | undefined>,
+  subFields: Ref<Record<string, FieldDef>>,
+): UseRepeater {
+  let seq = 0
+
+  function cloneRows(v: unknown): Record<string, unknown>[] {
+    if (!Array.isArray(v)) return []
+    return (v as Record<string, unknown>[]).map(r => ({ ...r }))
+  }
+
+  const rows = ref<Record<string, unknown>[]>(cloneRows(model.value))
+  const keys = ref<number[]>(rows.value.map(() => seq++))
+
+  function emit(): void {
+    model.value = rows.value.map(r => ({ ...r }))
+  }
+
+  function reseed(v: Record<string, unknown>[] | null | undefined): void {
+    rows.value = cloneRows(v)
+    keys.value = rows.value.map(() => seq++)
+  }
+
+  // Echo-guard via the shared primitive: skip our own emit, reseed on a genuine external change. Compares
+  // against the CURRENT rows (not a one-shot token) so an undo→redo back to a prior value still reseeds.
+  useEchoGuard(model, () => rows.value, reseed, [])
+
+  function blankRow(): Record<string, unknown> {
+    return Object.fromEntries(
+      Object.keys(subFields.value).map(k => [k, subFields.value[k]!.default ?? null]),
+    )
+  }
+
+  function addRow(): void {
+    rows.value = [...rows.value, blankRow()]
+    keys.value = [...keys.value, seq++]
+    emit()
+  }
+
+  function insertRow(at: number): void {
+    const clamped = Math.max(0, Math.min(at, rows.value.length))
+    const newRows = [...rows.value]
+    const newKeys = [...keys.value]
+    newRows.splice(clamped, 0, blankRow())
+    newKeys.splice(clamped, 0, seq++)
+    rows.value = newRows
+    keys.value = newKeys
+    emit()
+  }
+
+  function duplicateRow(i: number): void {
+    if (i < 0 || i >= rows.value.length) return
+    const clone = JSON.parse(JSON.stringify(rows.value[i])) as Record<string, unknown>
+    const newRows = [...rows.value]
+    const newKeys = [...keys.value]
+    newRows.splice(i + 1, 0, clone)
+    newKeys.splice(i + 1, 0, seq++)
+    rows.value = newRows
+    keys.value = newKeys
+    emit()
+  }
+
+  function removeRow(i: number): void {
+    rows.value = rows.value.filter((_, idx) => idx !== i)
+    keys.value = keys.value.filter((_, idx) => idx !== i)
+    emit()
+  }
+
+  function move(from: number, to: number): void {
+    if (from === to || from < 0 || to < 0 || from >= rows.value.length || to >= rows.value.length) return
+    rows.value = reorder(rows.value, from, to)
+    keys.value = reorder(keys.value, from, to)
+    emit()
+  }
+
+  function setCell(i: number, key: string, val: unknown): void {
+    rows.value = rows.value.map((r, idx) => idx === i ? { ...r, [key]: val } : r)
+    emit()
+  }
+
+  return { rows, keys, addRow, removeRow, move, setCell, insertRow, duplicateRow }
+}

package/layers/ui/app/composables/useT.ts

@@ -0,0 +1,32 @@
+import { en } from '../i18n/en'
+import { de } from '../i18n/de'
+
+export type Catalog = Record<string, string>
+
+/** Admin-UI languages that ship a catalog. The first is the source + fallback language. */
+export const ADMIN_LANGS = ['en', 'de'] as const
+export type AdminLang = (typeof ADMIN_LANGS)[number]
+
+const catalogs: Record<string, Catalog> = { en, de }
+
+/** Replace `{name}` placeholders from `params`; an absent param leaves its placeholder untouched. */
+export function interpolate(template: string, params?: Record<string, unknown>): string {
+  if (!params) return template
+  return template.replace(/\{(\w+)\}/g, (m, k) => (params[k] != null ? String(params[k]) : m))
+}
+
+/** Resolve `key` in the active catalog, then the fallback (en), then the key itself; interpolate. Pure. */
+export function translate(catalog: Catalog, fallback: Catalog, key: string, params?: Record<string, unknown>): string {
+  return interpolate(catalog[key] ?? fallback[key] ?? key, params)
+}
+
+/**
+ * Admin-UI translation. `t(key, params?)` reads the active admin language (a cookie-backed preference,
+ * separate from the content locale the editor edits) and is reactive — switching the language re-renders.
+ * Missing keys fall back to English, then to the key, so a partial `de` catalog degrades gracefully.
+ */
+export function useT() {
+  const lang = useAdminLang()
+  const t = (key: string, params?: Record<string, unknown>) => translate(catalogs[lang.value] ?? en, en, key, params)
+  return { t, lang }
+}