@michaelthielemann/kestrel 2.0.0 → 3.0.0

package/layers/admin/app/components/CollectionListBulkBar.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// Chrome (flex: 0 0 auto) that appears when ≥1 row is selected, shrinking the one scroll region rather
+// than overlaying it. Publish/Unpublish are schema-driven (only when the collection has a status).
+// NOT a live region: the selection count is announced through the list's permanent .list__sr-status
+// region; a v-if-toggled role="status" here would double up and stay silent on first show.
+defineProps<{ count: number; hasStatus: boolean; busy: boolean }>()
+const emit = defineEmits<{ setStatus: [status: 'published' | 'draft']; delete: []; clear: [] }>()
+
+const { t } = useT()
+</script>
+
+<template>
+  <div class="list__bulkbar">
+    <span class="list__bulk-count">{{ t('list.selected', { n: count }) }}</span>
+    <div class="list__bulk-actions">
+      <template v-if="hasStatus">
+        <KestrelUiButton type="button" size="sm" variant="secondary" :disabled="busy" @click="emit('setStatus', 'published')">{{ t('list.bulkPublish') }}</KestrelUiButton>
+        <KestrelUiButton type="button" size="sm" variant="secondary" :disabled="busy" @click="emit('setStatus', 'draft')">{{ t('list.bulkUnpublish') }}</KestrelUiButton>
+      </template>
+      <KestrelUiButton type="button" size="sm" variant="danger" :disabled="busy" @click="emit('delete')">{{ t('list.bulkDelete') }}</KestrelUiButton>
+      <KestrelUiButton type="button" size="sm" variant="ghost" @click="emit('clear')">{{ t('list.clearSelection') }}</KestrelUiButton>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.list {
+  &__bulkbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+  }
+  &__bulk-count {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+  }
+  &__bulk-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-inline-start: auto;
+  }
+}
+</style>

package/layers/admin/app/components/CollectionListColumnsPanel.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { columnLabel } from '../utils/list-cell'
+import type { ListColumn } from '../utils/list-columns'
+
+defineProps<{ columns: ListColumn[]; visibleKeys: string[]; isDefault: boolean }>()
+const emit = defineEmits<{ toggle: [key: string]; reset: [] }>()
+
+const { t } = useT()
+const colLabel = (col: ListColumn) => columnLabel(col, t)
+</script>
+
+<template>
+  <div id="list-columns-panel" class="list__panel">
+    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -- native wrapping label around a custom UiCheckbox; no `for`/`id` pair needed, invisible to static analysis -->
+    <label v-for="c in columns" :key="c.key" class="list__col-row">
+      <KestrelUiCheckbox
+        class="list__col-check"
+        :data-col="c.key"
+        :model-value="visibleKeys.includes(c.key)"
+        :disabled="visibleKeys.length === 1 && visibleKeys.includes(c.key)"
+        @update:model-value="() => emit('toggle', c.key)"
+      />
+      <span>{{ colLabel(c) }}</span>
+    </label>
+    <button v-if="!isDefault" type="button" class="list__panel-action" @click="emit('reset')">{{ t('list.columnsReset') }}</button>
+  </div>
+</template>
+
+<style lang="scss">
+.list__col-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+</style>

package/layers/admin/app/components/CollectionListFilterPanel.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { FilterOp } from '../../../core/app/utils/filter-ops'
+import type { ListFilterDraft } from '../composables/useListFilterDraft'
+import { columnLabel } from '../utils/list-cell'
+import type { ListColumn } from '../utils/list-columns'
+
+// The whole draft controller arrives as ONE prop: its ten members are a single cohesive thing, and the
+// panel must share the parent's draft state (the chip row renders off the same clauses).
+const props = defineProps<{ columns: ListColumn[]; filter: ListFilterDraft; hasActive: boolean }>()
+
+const { t } = useT()
+const colLabel = (col: ListColumn) => columnLabel(col, t)
+const draft = computed(() => props.filter.draft)
+</script>
+
+<template>
+  <div id="list-filter-panel" class="list__panel list__panel--filter">
+    <p v-if="!columns.length" class="list__panel-empty">{{ t('list.noFilters') }}</p>
+    <div v-for="c in columns" :key="c.key" class="list__filter-row">
+      <span class="list__filter-label">{{ colLabel(c) }}</span>
+      <div class="list__filter-controls">
+        <select
+          v-if="filter.opsFor(c).length > 1"
+          class="list__filter-op"
+          :data-filter-op="c.key"
+          :aria-label="`${t('filter.operator')} — ${colLabel(c)}`"
+          :value="draft[c.key]?.op"
+          @change="filter.setOp(c.key, ($event.target as HTMLSelectElement).value as FilterOp)"
+        >
+          <option v-for="op in filter.opsFor(c)" :key="op" :value="op">{{ filter.opLabel(c.filterKind ?? 'text', op) }}</option>
+        </select>
+
+        <input
+          v-if="c.filterKind === 'datetime'"
+          type="date"
+          class="list__filter"
+          :data-filter="c.key"
+          :aria-label="colLabel(c)"
+          :value="draft[c.key]?.value ?? ''"
+          @input="filter.setValue(c.key, ($event.target as HTMLInputElement).value)"
+        >
+        <input
+          v-else-if="c.filterKind === 'number' || c.filterKind === 'ref' || c.filterKind === 'idSet'"
+          type="number"
+          class="list__filter"
+          :data-filter="c.key"
+          :aria-label="colLabel(c)"
+          :value="draft[c.key]?.value ?? ''"
+          @input="filter.setValue(c.key, ($event.target as HTMLInputElement).value)"
+        >
+        <select
+          v-else-if="c.filterKind === 'boolean'"
+          class="list__filter"
+          :data-filter="c.key"
+          :aria-label="colLabel(c)"
+          :value="draft[c.key]?.value ?? ''"
+          @change="filter.setValue(c.key, ($event.target as HTMLSelectElement).value)"
+        >
+          <option value="">—</option>
+          <option value="true">{{ t('filter.bool.true') }}</option>
+          <option value="false">{{ t('filter.bool.false') }}</option>
+        </select>
+        <!-- Single choice (`enum`) and multi choice (`stringSet`) both pick a stored VALUE from the
+             field's choices; a free-text box would let the user type the visible LABEL and match nothing. -->
+        <select
+          v-else-if="c.filterKind === 'enum' || c.filterKind === 'stringSet'"
+          class="list__filter"
+          :data-filter="c.key"
+          :aria-label="colLabel(c)"
+          :value="draft[c.key]?.value ?? ''"
+          @change="filter.setValue(c.key, ($event.target as HTMLSelectElement).value)"
+        >
+          <option value="">—</option>
+          <option v-for="o in filter.enumOptions(c)" :key="o.value" :value="o.value">{{ o.label }}</option>
+        </select>
+        <input
+          v-else
+          type="text"
+          class="list__filter"
+          :data-filter="c.key"
+          :aria-label="colLabel(c)"
+          :value="draft[c.key]?.value ?? ''"
+          :placeholder="t('list.filterPlaceholder', { name: colLabel(c) })"
+          @input="filter.setValue(c.key, ($event.target as HTMLInputElement).value)"
+        >
+      </div>
+    </div>
+    <button v-if="hasActive" type="button" class="list__panel-action" @click="filter.clearAll">{{ t('list.filterClearAll') }}</button>
+  </div>
+</template>
+
+<style lang="scss">
+.list {
+  // The inline filter rows need room for name + operator + value; the columns panel stays compact.
+  &__panel--filter {
+    min-width: 30rem;
+  }
+  // Name, operator and value on ONE line: a stacked label doubled the panel's height for no information.
+  &__filter-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+  }
+  // Fixed basis so the names form an aligned column and the controls all start at the same x.
+  &__filter-label {
+    flex: 0 0 6.5rem;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-text-muted);
+  }
+  // Operator select + value control; the value control takes the remaining width.
+  &__filter-controls {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    gap: var(--space-1);
+    align-items: center;
+  }
+  &__filter-op {
+    flex: 0 0 auto;
+    max-width: 45%;
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: var(--text-sm);
+  }
+  &__filter {
+    width: 100%;
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font: inherit;
+  }
+  &__filter-controls .list__filter {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+</style>

package/layers/admin/app/components/CollectionListPager.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { PER_PAGE_OPTIONS } from '../../../core/app/utils/list-limits'
+
+const props = defineProps<{ page: number; totalPages: number; total: number; perPage: number }>()
+const emit = defineEmits<{ 'update:page': [page: number]; 'update:perPage': [perPage: number] }>()
+
+const { t } = useT()
+// The per-page `<select>` is hand-rolled here (no UiField wrapper), so the label↔control association needs
+// an explicit id pair for static a11y analysis to see it.
+const perPageId = useId()
+
+function prev() {
+  if (props.page > 1) emit('update:page', props.page - 1)
+}
+function next() {
+  if (props.page < props.totalPages) emit('update:page', props.page + 1)
+}
+</script>
+
+<template>
+  <div class="list__pager">
+    <KestrelUiButton type="button" size="sm" :disabled="page <= 1" @click="prev">{{ t('list.prev') }}</KestrelUiButton>
+    <span class="list__page">{{ t('list.page', { page, totalPages, total }) }}</span>
+    <KestrelUiButton type="button" size="sm" :disabled="page >= totalPages" @click="next">{{ t('list.next') }}</KestrelUiButton>
+    <label class="list__perpage" :for="perPageId">
+      <span class="list__perpage-label">{{ t('list.perPage') }}</span>
+      <select
+        :id="perPageId"
+        class="list__perpage-select"
+        :value="perPage"
+        :aria-label="t('list.perPage')"
+        @change="emit('update:perPage', Number(($event.target as HTMLSelectElement).value))"
+      >
+        <option v-for="n in PER_PAGE_OPTIONS" :key="n" :value="n">{{ n }}</option>
+      </select>
+    </label>
+  </div>
+</template>
+
+<style lang="scss">
+.list {
+  &__pager {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  &__page {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+  // Per-page size selector sits at the far end of the pager.
+  &__perpage {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-inline-start: auto;
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+  &__perpage-select {
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font: inherit;
+    font-size: var(--text-sm);
+  }
+}
+</style>

package/layers/admin/app/components/CollectionListTable.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { sortDirection } from '../utils/list-query'
+import { cellDisplay, columnLabel, rowLabel as labelForRow } from '../utils/list-cell'
+import type { ListColumn } from '../utils/list-columns'
+
+const props = defineProps<{
+  rows: Record<string, unknown>[]
+  columns: ListColumn[]
+  collection: string
+  localeQuery: string
+  sort: string
+  busy: boolean
+  selected: Set<number>
+  allSelected: boolean
+  headerIndeterminate: boolean
+}>()
+const emit = defineEmits<{
+  sort: [key: string]
+  toggleRow: [id: number, on: boolean]
+  toggleAll: [on: boolean]
+  duplicate: [id: number]
+  delete: [ids: number[]]
+}>()
+
+const { t } = useT()
+const { locales } = useContentLocales()
+
+const colLabel = (col: ListColumn) => columnLabel(col, t)
+const rowLabel = (row: Record<string, unknown>) => labelForRow(props.columns, row)
+
+function arrow(field: string) {
+  const dir = sortDirection(props.sort, field)
+  return dir === 'asc' ? ' ▲' : dir === 'desc' ? ' ▼' : ''
+}
+// Programmatic sort state for AT (the visual arrow is aria-hidden) — WCAG 1.3.1 / 4.1.2.
+function ariaSort(field: string): 'ascending' | 'descending' | 'none' {
+  const dir = sortDirection(props.sort, field)
+  return dir === 'asc' ? 'ascending' : dir === 'desc' ? 'descending' : 'none'
+}
+
+// Per-row translation status (the list query attaches `$translations`: locale → sibling id, or null).
+// Present locales link to their sibling; missing ones offer create-and-link, carrying the translation group.
+function rowTranslations(row: Record<string, unknown>) {
+  const map = (row.$translations ?? {}) as Record<string, number | null>
+  const group = row.translationGroup as string | undefined
+  return locales.map((loc) => {
+    const id = map[loc]
+    return id != null
+      ? { loc, present: true, to: `/admin/${props.collection}/${id}?locale=${loc}` }
+      : { loc, present: false, to: `/admin/${props.collection}/new?locale=${loc}${group ? `&group=${group}` : ''}` }
+  })
+}
+</script>
+
+<template>
+  <table class="list__table">
+    <thead>
+      <tr>
+        <th class="list__select-th" scope="col">
+          <KestrelUiCheckbox
+            :model-value="allSelected"
+            :indeterminate="headerIndeterminate"
+            :aria-label="t('list.selectAll')"
+            @update:model-value="(v) => emit('toggleAll', v)"
+          />
+        </th>
+        <!-- Row actions: an always-visible, left-frozen chrome column placed right after Select. Its
+             accessible name is real visually-hidden text, not aria-label on a static <th> (which several
+             screen-reader / browser pairs ignore on non-interactive table cells). -->
+        <th class="list__actions-th" scope="col">
+          <span class="list__vh">{{ t('a11y.rowActions') }}</span>
+        </th>
+        <th
+          v-for="c in columns"
+          :key="c.key"
+          scope="col"
+          :aria-sort="c.sortable ? ariaSort(c.key) : undefined"
+          :class="{ 'list__th-narrow': c.type === 'translations' || c.type === 'deadRefs' }"
+        >
+          <button v-if="c.sortable" type="button" class="list__sort" @click="emit('sort', c.key)">{{ colLabel(c) }}<span aria-hidden="true">{{ arrow(c.key) }}</span></button>
+          <span v-else>{{ colLabel(c) }}</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="row in rows" :key="String(row.id)" class="list__row">
+        <td class="list__select-cell">
+          <KestrelUiCheckbox
+            :model-value="selected.has(Number(row.id))"
+            :aria-label="t('list.selectRow', { name: rowLabel(row) })"
+            @update:model-value="(v) => emit('toggleRow', Number(row.id), v)"
+          />
+        </td>
+        <td class="list__actions-cell">
+          <div class="list__row-actions">
+            <NuxtLink :to="`/admin/${collection}/${row.id}${localeQuery}`" class="list__action-btn" :aria-label="t('list.rowEdit', { name: rowLabel(row) })">
+              <KestrelUiIcon name="pencil" :size="15" />
+            </NuxtLink>
+            <button type="button" class="list__action-btn" :disabled="busy" :aria-label="t('list.rowDuplicate', { name: rowLabel(row) })" @click="emit('duplicate', Number(row.id))">
+              <KestrelUiIcon name="copy" :size="15" />
+            </button>
+            <button type="button" class="list__action-btn list__action-btn--danger" :disabled="busy" :aria-label="t('list.rowDelete', { name: rowLabel(row) })" @click="emit('delete', [Number(row.id)])">
+              <KestrelUiIcon name="trash" :size="15" />
+            </button>
+          </div>
+        </td>
+        <td v-for="c in columns" :key="c.key" :class="{ 'list__narrow-cell': c.type === 'translations' || c.type === 'deadRefs' }">
+          <span v-if="c.type === 'deadRefs'" class="list__deadrefs">
+            <KestrelUiIcon
+              v-if="row.$hasDeadRefs"
+              name="triangle-alert"
+              :size="15"
+              class="list__deadref-icon"
+              role="img"
+              :aria-label="t('deadRefs.listWarning')"
+              :title="t('deadRefs.listWarning')"
+            />
+          </span>
+          <span v-else-if="c.type === 'translations'" class="list__transl">
+            <NuxtLink
+              v-for="tr in rowTranslations(row)"
+              :key="tr.loc"
+              :to="tr.to"
+              :data-loc="tr.loc"
+              class="list__badge"
+              :class="tr.present ? 'list__badge--present' : 'list__badge--missing'"
+              :title="tr.present ? t('list.editLocale', { loc: tr.loc.toUpperCase() }) : t('list.createLocale', { loc: tr.loc.toUpperCase() })"
+              :aria-label="tr.present ? t('list.editLocale', { loc: tr.loc.toUpperCase() }) : t('list.createLocale', { loc: tr.loc.toUpperCase() })"
+            >{{ tr.loc.toUpperCase() }}</NuxtLink>
+          </span>
+          <template v-else>{{ cellDisplay(c, row) }}</template>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss">
+// Visually-hidden text for a static cell that must be announced but not shown (the Actions column header).
+// Chosen over aria-label, which is unreliably announced on non-interactive table cells.
+.list__vh {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.list {
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-sm);
+
+    th,
+    td {
+      text-align: start;
+      padding: var(--space-2) var(--space-3);
+      border-bottom: 1px solid var(--color-border);
+      vertical-align: top;
+    }
+    // Keep the column headers visible while the rows scroll inside .list__scroll. A solid background is
+    // required so scrolling rows don't show through. Part of the frozen-column z-index stack (see the
+    // &__select-* / &__actions-* rules): scrolling body td 0 < frozen body td 1 < scrolling header th 2 <
+    // frozen corner th 3, so nothing bleeds through on either scroll axis.
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 2; // scrolling header: above scrolling body cells (0) and the frozen body columns (1)
+      background: var(--color-bg);
+    }
+    // Frozen corner: the select + actions headers are sticky on BOTH axes, so they must sit above every
+    // scrolling header AND every frozen body column where the two frozen edges cross.
+    thead th.list__select-th,
+    thead th.list__actions-th {
+      z-index: 3;
+    }
+  }
+  &__sort {
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    font-weight: var(--weight-medium);
+    cursor: pointer;
+    color: var(--color-text);
+  }
+  // Compact, de-emphasised info columns (translations · dead-reference warning).
+  &__th-narrow,
+  &__narrow-cell {
+    width: 1%;
+    white-space: nowrap;
+  }
+
+  // Dead-reference warning: an amber triangle, shown only on rows holding a stale reference.
+  &__deadrefs {
+    display: inline-flex;
+  }
+  &__deadref-icon {
+    color: var(--color-warning);
+  }
+  &__transl {
+    display: inline-flex;
+    gap: 2px;
+    flex-wrap: wrap;
+  }
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.4rem;
+    padding: 0 3px;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    font-size: 0.625rem;
+    font-weight: var(--weight-medium);
+    line-height: 1.5;
+    letter-spacing: 0.02em;
+    text-decoration: none;
+
+    &--present {
+      background: var(--color-primary-soft);
+      color: var(--color-primary);
+    }
+    &--missing {
+      color: var(--color-text-muted);
+      border-color: var(--color-border);
+      border-style: dashed;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--color-focus);
+      outline-offset: -2px;
+    }
+  }
+
+  // Selection column — the first frozen chrome column, pinned to the left with `position: sticky` inside
+  // the existing .list__scroll (no new scroll container). Opaque `var(--color-bg)` so horizontally-scrolled
+  // data can't bleed through; z-index 1 lifts the frozen body cell above the scrolling body cells.
+  &__select-th,
+  &__select-cell {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    width: var(--list-col-select);
+    white-space: nowrap;
+    vertical-align: middle;
+    background: var(--color-bg);
+  }
+  // Row-actions column — the second frozen column, sitting immediately after Select (its `left` offset is
+  // exactly the select column's width). Always visible; snug `width: 1%` so the three icon buttons never
+  // steal width from the Title column.
+  &__actions-th,
+  &__actions-cell {
+    position: sticky;
+    left: var(--list-col-select);
+    z-index: 1;
+    width: 1%;
+    white-space: nowrap;
+    vertical-align: middle;
+    background: var(--color-bg);
+  }
+  // A plain, always-visible inline row of icon buttons (Edit → Duplicate → Delete; destructive last, never
+  // default focus). BlockTree.vue deliberately keeps its own absolute overlay: a tree row is a single flex
+  // row with no column grid — there is no cell to place actions in.
+  &__row-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 1px;
+  }
+  &__action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-muted); /* meaningful icon control at rest → ≥3:1 (SC 1.4.11) */
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--motion-fast) var(--ease-standard),
+      color var(--motion-fast) var(--ease-standard);
+
+    &:hover {
+      background: var(--color-hover);
+      color: var(--color-text);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--color-focus);
+      outline-offset: -2px;
+    }
+    &--danger:hover {
+      color: var(--color-danger);
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+}
+</style>

package/layers/admin/app/components/EditorStatus.vue

@@ -92,7 +92,7 @@ const live = computed<{ tone: 'green' | 'red' | 'amber' | 'blue' | 'neutral'; wo
          Visually hidden; not a tooltip. -->
     <span class="editor-status-sr" role="status" aria-live="polite">{{ save.detail }}</span>
 
-    <UiTooltip side="bottom">
+    <KestrelUiTooltip side="bottom">
       <!-- A focusable status indicator, NOT a <button>: it has no action, and a button whose accessible
            name contains "Saved"/"Unsaved" would collide with `getByRole('button', {name:'Save'})`. aria-label
            leads with the visible word so it stays part of the accessible name, then adds the detail for AT. -->
@@ -105,9 +105,9 @@ const live = computed<{ tone: 'green' | 'red' | 'amber' | 'blue' | 'neutral'; wo
           <strong class="editor-status-tip__detail">{{ save.detail }}</strong>
         </span>
       </template>
-    </UiTooltip>
+    </KestrelUiTooltip>
 
-    <UiTooltip v-if="live" side="bottom">
+    <KestrelUiTooltip v-if="live" side="bottom">
       <span class="editor-status-live" tabindex="0" :data-tone="live.tone" :aria-label="`${live.word} — ${live.detail}`">
         <span class="editor-status-live__dot" aria-hidden="true" />
         <span class="editor-status-live__word">{{ live.word }}</span>
@@ -119,7 +119,7 @@ const live = computed<{ tone: 'green' | 'red' | 'amber' | 'blue' | 'neutral'; wo
           <span v-if="live.tone === 'red' && live.error" class="editor-status-tip__err">{{ live.error }}</span>
         </span>
       </template>
-    </UiTooltip>
+    </KestrelUiTooltip>
   </span>
 </template>
 

package/layers/admin/app/components/FieldsBody.vue

@@ -6,7 +6,7 @@ const ctx = useEditorFormContext()
 
 <template>
   <div class="editor__flat">
-    <PageFieldsPane v-bind="ctx.pageFieldsBindings.value" v-on="ctx.pageFieldsHandlers" />
+    <KestrelPageFieldsPane v-bind="ctx.pageFieldsBindings.value" v-on="ctx.pageFieldsHandlers" />
   </div>
 </template>
 

package/layers/admin/app/components/LocaleBar.vue

@@ -38,11 +38,11 @@ const { t } = useT()
         class="locale-bar__item locale-bar__btn"
         :to="`/admin/${collection}?locale=${loc}`"
         :aria-label="t('localeBar.editLocale', { loc: up(loc) })"
-      >{{ up(loc) }}<UiIcon name="pencil" :size="14" /></NuxtLink>
+      >{{ up(loc) }}<KestrelUiIcon name="pencil" :size="14" /></NuxtLink>
 
       <span v-else-if="existingId(loc) !== null" class="locale-bar__item">
-        <NuxtLink class="locale-bar__btn" :to="`/admin/${collection}/${existingId(loc)}?locale=${loc}`" :aria-label="t('localeBar.editLocale', { loc: up(loc) })">{{ up(loc) }}<UiIcon name="pencil" :size="14" /></NuxtLink>
-        <button type="button" class="locale-bar__btn locale-bar__btn--copy" :aria-label="t('localeBar.copyInto', { loc: up(loc), current: up(current) })" @click="emit('copyFrom', loc)"><UiIcon name="copy" :size="14" /></button>
+        <NuxtLink class="locale-bar__btn" :to="`/admin/${collection}/${existingId(loc)}?locale=${loc}`" :aria-label="t('localeBar.editLocale', { loc: up(loc) })">{{ up(loc) }}<KestrelUiIcon name="pencil" :size="14" /></NuxtLink>
+        <button type="button" class="locale-bar__btn locale-bar__btn--copy" :aria-label="t('localeBar.copyInto', { loc: up(loc), current: up(current) })" @click="emit('copyFrom', loc)"><KestrelUiIcon name="copy" :size="14" /></button>
       </span>
 
       <NuxtLink
@@ -50,7 +50,7 @@ const { t } = useT()
         class="locale-bar__item locale-bar__btn locale-bar__btn--add"
         :to="createLink(loc)"
         :aria-label="t('localeBar.createTranslation', { loc: up(loc) })"
-      >{{ up(loc) }}<UiIcon name="plus" :size="14" /></NuxtLink>
+      >{{ up(loc) }}<KestrelUiIcon name="plus" :size="14" /></NuxtLink>
     </template>
   </div>
 </template>