@michaelthielemann/kestrel 2.1.0 → 3.0.0

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

@@ -1,13 +1,6 @@
 <script setup lang="ts">
 import type { SerializedCollection } from '../../../core/server/utils/serialize-collection'
-import type { Localized } from '../../../core/server/utils/defineCollection'
-import { sortDirection, type FilterCell } from '../utils/list-query'
-import type { ListColumn } from '../utils/list-columns'
-import { PER_PAGE_OPTIONS } from '../../../core/app/utils/list-limits'
-import type { BatchDeleteReport } from '../utils/collection-ops'
-import { OPS_BY_KIND, DEFAULT_OP, type FilterKind, type FilterOp } from '../../../core/app/utils/filter-ops'
 import { resolveLocalized } from '../../../ui/app/utils/localized'
-import { humanizeFieldName } from '../../../ui/app/utils/humanize'
 
 // `locale` is set only for a translatable collection: it filters the list to that content locale and
 // shows a locale switcher. New records / row links carry it so they open in the same locale.
@@ -28,10 +21,6 @@ const { available, visibleColumns, visibleKeys, toggle: toggleColumn, reset: res
   useListColumns(toRef(props, 'schema'))
 const filterableColumns = computed(() => available.value.filter((c) => c.filterable))
 
-function colLabel(col: ListColumn): string {
-  return col.type === 'field' ? humanizeFieldName(col.name ?? col.key) : t(col.labelKey ?? col.key)
-}
-
 // The URL is the single source of truth for committed list state. `sort`/`page`/`perPage`/`filter` are
 // derived (read-only) computeds off `route.query`; `effectiveQuery` is the sanitized `$fetch` query; the
 // setters navigate (page → push so Back walks pages, the rest → replace). The composable also owns the
@@ -39,231 +28,34 @@ function colLabel(col: ListColumn): string {
 const { sort, page, perPage, filter, effectiveQuery, setSort, setPage, clampPage, setPerPage, setFilter } =
   useListUrlState(available)
 
-// `filter` (above, from the URL) = the committed clauses that drive the query. `draft` = the panel's pending
-// edits, kept local and seeded per filterable column below (keyed by column key → { op, value }).
-const draft = reactive<Record<string, FilterCell>>({})
-
-// Overwrite each draft cell FROM the committed `filter` so deep-link / Back-Forward / chip-removal reflect
-// back into the open panel; drop drafts for columns this collection no longer has. We key the watch on the
-// committed filter's CONTENT (its JSON), not its object identity: `filter` recomputes to a fresh-but-EQUAL
-// object on every `route.query` change (page/sort/perPage navigations too), and resyncing on those identity
-// flips would wipe an in-progress panel edit. Clobber-safe on a real filter commit: a commit sends ALL
-// drafts at once, so post-commit `filter` equals `draft` (a no-op overwrite) — the content only actually
-// changes on external navigation (deep-link/Back-Forward/chip-removal), which is when the panel should resync.
-watch([filterableColumns, () => JSON.stringify(filter.value)], () => {
-  const cols = filterableColumns.value
-  for (const c of cols) {
-    const cm = filter.value[c.key]
-    draft[c.key] = { op: cm?.op ?? DEFAULT_OP[c.filterKind ?? 'text'], value: cm?.value ?? '' }
-  }
-  for (const key of Object.keys(draft)) if (!cols.some((c) => c.key === key)) Reflect.deleteProperty(draft, key)
-}, { immediate: true })
-
-function opsFor(c: ListColumn): readonly FilterOp[] {
-  return OPS_BY_KIND[c.filterKind ?? 'text']
-}
-// Operator labels are kind-aware: a datetime comparison reads "before / on or before / …" instead of the
-// generic "less than / less or equal / …".
-function opLabel(kind: FilterKind, op: FilterOp): string {
-  if (kind === 'datetime' && (op === 'lt' || op === 'lte' || op === 'gt' || op === 'gte')) return t(`filter.opDate.${op}`)
-  return t(`filter.op.${op}`)
-}
-// Choices for an `enum` / `stringSet` value control: a fixed draft/published set for `status`, else the
-// choice field's own (single- and multi-choice fields both carry `options.choices`).
-function enumOptions(c: ListColumn): { label: string; value: string }[] {
-  if (c.key === 'status') return [
-    { value: 'draft', label: t('pageSettings.statusDraft') },
-    { value: 'published', label: t('pageSettings.statusPublished') },
-  ]
-  // A choice label is `Localized`, so resolve it here as the editor widget does — `{{ o.label }}` would
-  // stringify a `{ en, de }` map into the filter dropdown.
-  return ((c.field?.options?.choices ?? []) as { label: Localized; value: string }[])
-    .map((o) => ({ value: o.value, label: resolveLocalized(o.label, lang.value) ?? o.value }))
-}
-function displayValue(kind: FilterKind, value: string): string {
-  if (kind === 'boolean') return value === 'true' ? t('filter.bool.true') : value === 'false' ? t('filter.bool.false') : value
-  return value
-}
-
-const rows = ref<Record<string, unknown>[]>([])
-const total = ref(0)
-// Surfaced when a (re)fetch fails — an inline error + Retry, never a silent stale list or a thrown
-// error boundary. Distinct from the empty state (which only shows when the fetch SUCCEEDED with no rows).
-const error = ref<string | null>(null)
-
-const toast = useToast()
-
-// ── Page-scoped row selection ──────────────────────────────────────────────────────────────────────
-// A Set of selected row ids, valid only for the rows currently on screen (cleared on every fetch). The
-// header checkbox is select-all-on-this-page with a tri-state (some-but-not-all) indeterminate marker.
-// A reactive Set (Vue tracks add/delete/has/size), so a single-row toggle is O(1) — no full-Set copy or
-// whole-table re-diff on each click, which mattered at the 500-row page cap.
-const selected = reactive(new Set<number>())
-const pageIds = computed(() => rows.value.map((r) => Number(r.id)))
-const allSelected = computed(() => pageIds.value.length > 0 && pageIds.value.every((id) => selected.has(id)))
-const headerIndeterminate = computed(() => pageIds.value.some((id) => selected.has(id)) && !allSelected.value)
-function toggleRow(id: number, on: boolean) {
-  if (on) selected.add(id)
-  else selected.delete(id)
-}
-function toggleAll(on: boolean) {
-  selected.clear()
-  if (on) for (const id of pageIds.value) selected.add(id)
-}
-function clearSelection() {
-  selected.clear()
-}
-// A row's human label: the first visible non-sidecar cell that has a value, else the bare id — used for
-// the per-row checkbox / action aria-labels so each control names its row.
-function rowLabel(row: Record<string, unknown>): string {
-  for (const c of visibleColumns.value) {
-    if (c.type === 'translations' || c.type === 'deadRefs') continue
-    const d = cellDisplay(c, row)
-    if (d) return d
-  }
-  return `#${row.id}`
-}
-
-// ── Batch operations (row action = 1 id, bulk bar = N ids; the server does the batching) ─────────────
-const { busy: opsBusy, error: opsError, previewDelete, confirmDelete: runDelete, duplicate: runDuplicate, setStatus: runSetStatus } =
-  useCollectionOps(collection, () => fetchRows())
-
-const deleteOpen = ref(false)
-const deleteReport = ref<BatchDeleteReport | null>(null)
-const deleteIds = ref<number[]>([])
-
-// Destructive → confirm dialog. The referrer preview is best-effort: if it fails we still open the dialog
-// with a bare summary (never block a delete on the warning lookup).
-async function askDelete(ids: number[]) {
-  if (!ids.length) return
-  deleteIds.value = ids
-  deleteReport.value = null
-  deleteOpen.value = true
-  try {
-    deleteReport.value = await previewDelete(ids)
-  } catch {
-    // The referrer lookup FAILED — do not fabricate a "no inbound links" report (that would look exactly
-    // like a verified-safe delete). Flag `checked: false` so the dialog cautions the check couldn't run.
-    deleteReport.value = { count: ids.length, referencedCount: 0, referenced: [], checked: false }
-    opsError.value = null
-  }
-}
-async function confirmDelete() {
-  try {
-    await runDelete(deleteIds.value)
-    toast.success(t('toast.deleted'))
-    deleteOpen.value = false
-  } catch {
-    // error stays surfaced in the dialog via opsError
-  }
-}
-// Non-destructive / reversible → no dialog: run, toast, refetch (the composable's onChanged).
-async function onDuplicate(id: number) {
-  try {
-    await runDuplicate([id])
-    toast.success(t('toast.duplicated'))
-  } catch {
-    toast.error(opsError.value ?? t('list.opFailed'))
-  }
-}
-async function onBulkStatus(status: 'published' | 'draft') {
-  try {
-    await runSetStatus([...selected], status)
-    toast.success(status === 'published' ? t('toast.published') : t('toast.unpublished'))
-  } catch {
-    toast.error(opsError.value ?? t('list.opFailed'))
-  }
-}
+// `filter` (above, from the URL) = the committed clauses that drive the query; the panel's pending edits
+// live in `draft` inside the composable, which also owns the debounce and the chip model.
+const filterDraft = useListFilterDraft({ available, filterableColumns, filter, setFilter })
+const activeFilters = filterDraft.activeFilters
+
+const { rows, total, error, totalPages, fetchRows } = useListRows({
+  collection,
+  effectiveQuery,
+  locale: () => props.locale,
+  page,
+  perPage,
+  clampPage,
+  // Selection is PAGE-SCOPED: any (re)fetch — page, filter, sort, per-page — replaces the visible rows, so
+  // the previous selection no longer maps to what's on screen. (A locale switch remounts the whole
+  // component, so that case clears too.)
+  onLoaded: () => clearSelection(),
+})
 
-// Monotonic request id: a slow earlier response must not overwrite a newer one.
-let seq = 0
-async function fetchRows() {
-  const mine = ++seq
-  try {
-    const res = await $fetch<{ data: Record<string, unknown>[]; total: number; page: number; perPage: number }>(
-      `/api/${collection.value}`,
-      { query: { ...effectiveQuery.value, ...(props.locale ? { locale: props.locale } : {}) } },
-    )
-    if (mine !== seq) return
-    rows.value = res.data
-    total.value = res.total
-    error.value = null
-    // A page that emptied out from under us — e.g. bulk-deleting the last rows of the trailing page —
-    // would otherwise strand the user on an out-of-range page showing the "create your first" empty
-    // state. Clamp back to the last page that still has rows (REPLACE, so the dead page isn't left as a
-    // history entry that Back would bounce off; the query watch refetches).
-    if (res.data.length === 0 && res.total > 0 && page.value > 1) {
-      clampPage(Math.max(1, Math.ceil(res.total / perPage.value)))
-    }
-    // Selection is PAGE-SCOPED: any (re)fetch — page, filter, sort, per-page — replaces the visible rows,
-    // so the previous selection no longer maps to what's on screen. Clear it. (A locale switch remounts
-    // the whole component, so that case clears too.)
-    selected.clear()
-  } catch (e) {
-    if (mine !== seq) return
-    // Keep any previously-rendered rows, but surface that this fetch failed (and don't show the
-    // "create your first" empty state — that would imply the collection is empty when it isn't).
-    error.value = (e as { statusMessage?: string })?.statusMessage ?? t('list.loadError')
-  }
-}
+const { selected, allSelected, headerIndeterminate, toggleRow, toggleAll, clear: clearSelection } =
+  useListSelection(rows)
 
-const totalPages = computed(() => Math.max(1, Math.ceil(total.value / perPage.value)))
-// The per-page `<select>` is hand-rolled directly in this template (no UiField/UiCheckbox wrapper), so the
-// label↔control association needs an explicit pair for static a11y analysis to see it.
-const perPageId = useId()
+// Row action = 1 id, bulk bar = N ids; the server does the batching.
+const { busy: opsBusy, error: opsError, deleteOpen, deleteReport, askDelete, confirmDelete, duplicate: onDuplicate, setStatus } =
+  useListBatchActions(collection, fetchRows)
 
-// Filters: edited in the Filter panel (a value change debounces; an operator change commits at once), shown
-// as removable chips in the bar. `commitDrafts` builds a fresh clause map from the non-empty draft cells and
-// navigates via `setFilter` (which also resets page → 1).
-let filterTimer: ReturnType<typeof setTimeout> | undefined
-function commitDrafts() {
-  const next: Record<string, FilterCell> = {}
-  for (const [field, cell] of Object.entries(draft)) {
-    if (cell.value !== '' && cell.value != null) next[field] = { op: cell.op, value: cell.value }
-  }
-  setFilter(next)
-}
-function setValue(field: string, value: string) {
-  if (draft[field]) draft[field].value = value
-  clearTimeout(filterTimer)
-  filterTimer = setTimeout(commitDrafts, 250)
-}
-function setOp(field: string, op: FilterOp) {
-  if (draft[field]) draft[field].op = op
-  // An operator change is deliberate — re-query immediately (no debounce) if the field has a value.
-  clearTimeout(filterTimer)
-  commitDrafts()
-}
-function clearFilter(field: string) {
-  if (draft[field]) draft[field].value = ''
-  commitDrafts() // re-commits the drafts with this one now empty → the clause is dropped (and page → 1)
-}
-function clearAllFilters() {
-  for (const cell of Object.values(draft)) cell.value = ''
-  setFilter({}) // clear the committed clauses (and page → 1); the draft-resync watch clears the panel
-}
-const activeFilters = computed(() => Object.entries(filter.value).map(([key, cell]) => {
-  const col = available.value.find((c) => c.key === key)
-  const kind = col?.filterKind ?? 'text'
-  return { key, op: cell.op, opLabel: opLabel(kind, cell.op), label: col ? colLabel(col) : key, display: displayValue(kind, cell.value) }
-}))
-onBeforeUnmount(() => clearTimeout(filterTimer))
+// Toolbar popovers (filter / columns), including the outside-click and Escape-restores-focus behaviour.
+const { container: toolsRef, open: openPanel, toggle: togglePanel } = useToolbarPanel<'filter' | 'columns'>()
 
-function prev() {
-  if (page.value > 1) setPage(page.value - 1)
-}
-function next() {
-  if (page.value < totalPages.value) setPage(page.value + 1)
-}
-function arrow(field: string) {
-  const dir = sortDirection(sort.value, 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(sort.value, field)
-  return dir === 'asc' ? 'ascending' : dir === 'desc' ? 'descending' : 'none'
-}
 // Polite status announced after every (re)fetch so filter/sort/page changes report their result count
 // to screen readers — WCAG 4.1.3 Status Messages.
 const resultsLabel = computed(() => t(total.value === 1 ? 'list.result' : 'list.results', { total: total.value }))
@@ -273,74 +65,6 @@ const resultsLabel = computed(() => t(total.value === 1 ? 'list.result' : 'list.
 // which would silence the first selection. Selection takes precedence; with none, it reports the count.
 const srStatus = computed(() => (selected.size ? t('list.selected', { n: selected.size }) : resultsLabel.value))
 
-const dateFmt = new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: '2-digit' })
-// A date-only value ('YYYY-MM-DD', from a datetime field with precision 'date') parses as UTC midnight;
-// formatting it in the local zone would shift the calendar day, so pin it to UTC. Full ISO timestamps
-// (createdAt/updatedAt carry a 'Z') and local datetimes keep the local-zone formatter.
-const dateOnlyFmt = new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: '2-digit', timeZone: 'UTC' })
-function isDateColumn(col: ListColumn): boolean {
-  return col.key === 'createdAt' || col.key === 'updatedAt' || col.field?.type === 'datetime'
-}
-function cellDisplay(col: ListColumn, row: Record<string, unknown>): string {
-  const value = row[col.key]
-  if (isDateColumn(col) && value != null) {
-    const dateOnly = typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)
-    const d = new Date(value as string)
-    if (!Number.isNaN(d.getTime())) return (dateOnly ? dateOnlyFmt : dateFmt).format(d)
-  }
-  return cellText(value)
-}
-function cellText(value: unknown): string {
-  if (value == null) return ''
-  if (typeof value === 'string') return value.replace(/<[^>]*>/g, '').slice(0, 80)
-  if (typeof value === 'object') return JSON.stringify(value).slice(0, 80)
-  return String(value)
-}
-
-// Per-row translation status (A4 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/${collection.value}/${id}?locale=${loc}` }
-      : { loc, present: false, to: `/admin/${collection.value}/new?locale=${loc}${group ? `&group=${group}` : ''}` }
-  })
-}
-
-// Toolbar popovers (filter / columns). Plain inline panels (not teleported) so they stay testable and
-// keep their scoped styles; a document listener closes them on an outside click.
-const toolsRef = ref<HTMLElement | null>(null)
-const openPanel = ref<'filter' | 'columns' | null>(null)
-// The element that opened the current panel — Escape restores focus to it (otherwise closing the panel
-// from inside drops keyboard focus onto <body>, stranding the keyboard user at the top of the document).
-let panelTrigger: HTMLElement | null = null
-function togglePanel(which: 'filter' | 'columns', e: MouseEvent) {
-  if (openPanel.value === which) { openPanel.value = null; return }
-  panelTrigger = e.currentTarget as HTMLElement
-  openPanel.value = which
-}
-function onDocPointer(e: PointerEvent) {
-  // Outside click: close but do NOT steal focus — it belongs wherever the user just clicked.
-  if (toolsRef.value && !toolsRef.value.contains(e.target as Node)) openPanel.value = null
-}
-function onDocKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && openPanel.value) {
-    openPanel.value = null
-    panelTrigger?.focus() // return focus to the trigger, per the disclosure/APG pattern
-  }
-}
-onMounted(() => {
-  document.addEventListener('pointerdown', onDocPointer)
-  document.addEventListener('keydown', onDocKeydown)
-})
-onBeforeUnmount(() => {
-  document.removeEventListener('pointerdown', onDocPointer)
-  document.removeEventListener('keydown', onDocKeydown)
-})
-
 // Exactly ONE refetch per navigation: the effective (sanitized) query is stringified so an identical or
 // junk-only URL change never refetches, and a single change fires a single fetch. Every URL-driven refetch
 // clears the page-scoped selection inside `fetchRows`.
@@ -369,7 +93,7 @@ await fetchRows()
 
       <div ref="toolsRef" class="list__tools">
         <div class="list__tool">
-          <UiButton
+          <KestrelUiButton
             type="button"
             size="sm"
             icon="filter"
@@ -379,84 +103,17 @@ await fetchRows()
             @click="togglePanel('filter', $event)"
           >
             {{ t('list.filter') }}<span v-if="activeFilters.length" class="list__tool-count">{{ activeFilters.length }}</span>
-          </UiButton>
-          <div v-if="openPanel === 'filter'" id="list-filter-panel" class="list__panel list__panel--filter">
-            <p v-if="!filterableColumns.length" class="list__panel-empty">{{ t('list.noFilters') }}</p>
-            <div v-for="c in filterableColumns" :key="c.key" class="list__filter-row">
-              <span class="list__filter-label">{{ colLabel(c) }}</span>
-              <div class="list__filter-controls">
-                <select
-                  v-if="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="setOp(c.key, ($event.target as HTMLSelectElement).value as FilterOp)"
-                >
-                  <option v-for="op in opsFor(c)" :key="op" :value="op">{{ 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="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="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="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="setValue(c.key, ($event.target as HTMLSelectElement).value)"
-                >
-                  <option value="">—</option>
-                  <option v-for="o in 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="setValue(c.key, ($event.target as HTMLInputElement).value)"
-                >
-              </div>
-            </div>
-            <button v-if="activeFilters.length" type="button" class="list__panel-action" @click="clearAllFilters">{{ t('list.filterClearAll') }}</button>
-          </div>
+          </KestrelUiButton>
+          <KestrelCollectionListFilterPanel
+            v-if="openPanel === 'filter'"
+            :columns="filterableColumns"
+            :filter="filterDraft"
+            :has-active="activeFilters.length > 0"
+          />
         </div>
 
         <div class="list__tool">
-          <UiButton
+          <KestrelUiButton
             type="button"
             size="sm"
             icon="columns"
@@ -464,152 +121,76 @@ await fetchRows()
             :aria-expanded="openPanel === 'columns'"
             class="list__tool-btn"
             @click="togglePanel('columns', $event)"
-          >{{ t('list.columns') }}</UiButton>
-          <div v-if="openPanel === 'columns'" 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 available" :key="c.key" class="list__col-row">
-              <UiCheckbox
-                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="() => toggleColumn(c.key)"
-              />
-              <span>{{ colLabel(c) }}</span>
-            </label>
-            <button v-if="!columnsAreDefault" type="button" class="list__panel-action" @click="resetColumns">{{ t('list.columnsReset') }}</button>
-          </div>
+          >{{ t('list.columns') }}</KestrelUiButton>
+          <KestrelCollectionListColumnsPanel
+            v-if="openPanel === 'columns'"
+            :columns="available"
+            :visible-keys="visibleKeys"
+            :is-default="columnsAreDefault"
+            @toggle="toggleColumn"
+            @reset="resetColumns"
+          />
         </div>
       </div>
 
       <NuxtLink :to="`/admin/${collection}/new${localeQuery}`" class="list__new">{{ newLabel }}</NuxtLink>
     </div>
 
-    <!-- Bulk action bar: 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 status).
-         NOT a live region: the selection count is announced through the permanent .list__sr-status region
-         (see `srStatus`); a v-if-toggled role="status" here would double up and stay silent on first show. -->
-    <div v-if="selected.size" class="list__bulkbar">
-      <span class="list__bulk-count">{{ t('list.selected', { n: selected.size }) }}</span>
-      <div class="list__bulk-actions">
-        <template v-if="schema.status">
-          <UiButton type="button" size="sm" variant="secondary" :disabled="opsBusy" @click="onBulkStatus('published')">{{ t('list.bulkPublish') }}</UiButton>
-          <UiButton type="button" size="sm" variant="secondary" :disabled="opsBusy" @click="onBulkStatus('draft')">{{ t('list.bulkUnpublish') }}</UiButton>
-        </template>
-        <UiButton type="button" size="sm" variant="danger" :disabled="opsBusy" @click="askDelete([...selected])">{{ t('list.bulkDelete') }}</UiButton>
-        <UiButton type="button" size="sm" variant="ghost" @click="clearSelection">{{ t('list.clearSelection') }}</UiButton>
-      </div>
-    </div>
+    <KestrelCollectionListBulkBar
+      v-if="selected.size"
+      :count="selected.size"
+      :has-status="!!schema.status"
+      :busy="opsBusy"
+      @set-status="(status) => setStatus([...selected], status)"
+      @delete="askDelete([...selected])"
+      @clear="clearSelection"
+    />
 
     <div v-if="activeFilters.length" class="list__chips">
       <span v-for="f in activeFilters" :key="f.key" class="list__chip">
         <span class="list__chip-label">{{ f.label }} {{ f.opLabel }}:</span> {{ f.display }}
-        <button type="button" class="list__chip-x" :aria-label="t('list.removeFilter', { name: f.label })" @click="clearFilter(f.key)">
-          <UiIcon name="x" :size="12" />
+        <button type="button" class="list__chip-x" :aria-label="t('list.removeFilter', { name: f.label })" @click="filterDraft.clearFilter(f.key)">
+          <KestrelUiIcon name="x" :size="12" />
         </button>
       </span>
     </div>
 
-    <UiAlert v-if="error" variant="error" class="list__error">
+    <KestrelUiAlert v-if="error" variant="error" class="list__error">
       {{ error }}
-      <UiButton type="button" variant="secondary" size="sm" class="list__retry" @click="fetchRows">{{ t('common.retry') }}</UiButton>
-    </UiAlert>
+      <KestrelUiButton type="button" variant="secondary" size="sm" class="list__retry" @click="fetchRows">{{ t('common.retry') }}</KestrelUiButton>
+    </KestrelUiAlert>
 
     <!-- The one scroll region: the table + its alternate empty-states scroll here while the bar, chips,
          error and pager stay fixed (see the admin layout's scroll-ownership convention). -->
     <div class="list__scroll">
-      <table class="list__table">
-        <thead>
-          <tr>
-            <th class="list__select-th" scope="col">
-              <UiCheckbox
-                :model-value="allSelected"
-                :indeterminate="headerIndeterminate"
-                :aria-label="t('list.selectAll')"
-                @update:model-value="toggleAll"
-              />
-            </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 visibleColumns"
-              :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="setSort(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">
-              <UiCheckbox
-                :model-value="selected.has(Number(row.id))"
-                :aria-label="t('list.selectRow', { name: rowLabel(row) })"
-                @update:model-value="(v) => 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) })">
-                  <UiIcon name="pencil" :size="15" />
-                </NuxtLink>
-                <button type="button" class="list__action-btn" :disabled="opsBusy" :aria-label="t('list.rowDuplicate', { name: rowLabel(row) })" @click="onDuplicate(Number(row.id))">
-                  <UiIcon name="copy" :size="15" />
-                </button>
-                <button type="button" class="list__action-btn list__action-btn--danger" :disabled="opsBusy" :aria-label="t('list.rowDelete', { name: rowLabel(row) })" @click="askDelete([Number(row.id)])">
-                  <UiIcon name="trash" :size="15" />
-                </button>
-              </div>
-            </td>
-            <td v-for="c in visibleColumns" :key="c.key" :class="{ 'list__narrow-cell': c.type === 'translations' || c.type === 'deadRefs' }">
-              <span v-if="c.type === 'deadRefs'" class="list__deadrefs">
-                <UiIcon
-                  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>
-
-      <UiEmptyState
+      <KestrelCollectionListTable
+        :rows="rows"
+        :columns="visibleColumns"
+        :collection="collection"
+        :locale-query="localeQuery"
+        :sort="sort"
+        :busy="opsBusy"
+        :selected="selected"
+        :all-selected="allSelected"
+        :header-indeterminate="headerIndeterminate"
+        @sort="setSort"
+        @toggle-row="toggleRow"
+        @toggle-all="toggleAll"
+        @duplicate="onDuplicate"
+        @delete="askDelete"
+      />
+
+      <KestrelUiEmptyState
         v-if="!rows.length && !error && activeFilters.length"
         icon="filter"
         :title="t('list.noMatch.title')"
         :description="t('list.noMatch.desc', { name: label })"
       >
         <template #action>
-          <button type="button" class="list__new" @click="clearAllFilters">{{ t('list.filterClearAll') }}</button>
+          <button type="button" class="list__new" @click="filterDraft.clearAll">{{ t('list.filterClearAll') }}</button>
         </template>
-      </UiEmptyState>
-      <UiEmptyState
+      </KestrelUiEmptyState>
+      <KestrelUiEmptyState
         v-else-if="!rows.length && !error"
         icon="file-text"
         :title="t('list.empty.title')"
@@ -618,30 +199,21 @@ await fetchRows()
         <template #action>
           <NuxtLink :to="`/admin/${collection}/new${localeQuery}`" class="list__new">{{ newLabel }}</NuxtLink>
         </template>
-      </UiEmptyState>
+      </KestrelUiEmptyState>
     </div>
 
     <p class="list__sr-status" role="status" aria-live="polite">{{ srStatus }}</p>
 
-    <div class="list__pager">
-      <UiButton type="button" size="sm" :disabled="page <= 1" @click="prev">{{ t('list.prev') }}</UiButton>
-      <span class="list__page">{{ t('list.page', { page, totalPages, total }) }}</span>
-      <UiButton type="button" size="sm" :disabled="page >= totalPages" @click="next">{{ t('list.next') }}</UiButton>
-      <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="setPerPage(Number(($event.target as HTMLSelectElement).value))"
-        >
-          <option v-for="n in PER_PAGE_OPTIONS" :key="n" :value="n">{{ n }}</option>
-        </select>
-      </label>
-    </div>
+    <KestrelCollectionListPager
+      :page="page"
+      :total-pages="totalPages"
+      :total="total"
+      :per-page="perPage"
+      @update:page="setPage"
+      @update:per-page="setPerPage"
+    />
 
-    <CollectionDeleteDialog
+    <KestrelCollectionDeleteDialog
       :open="deleteOpen"
       :report="deleteReport"
       :busy="opsBusy"
@@ -670,26 +242,12 @@ await fetchRows()
   border: 0;
 }
 
-// Visually-hidden text for a static cell that must be announced but not shown (the Actions column header).
-// Same technique as .list__sr-status above; 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;
-}
-
 // Fills the height handed down and stays fixed itself; scroll is delegated to .list__scroll. Overflow is
 // left VISIBLE (not a scroll container) so the inline Filter/Columns popovers are never clipped.
 .list {
   // Frozen-column token: the actions column's sticky `left` must equal the select column's width
-  // (1.25rem checkbox + 2×var(--space-3) cell padding). Keep in sync if the checkbox size or padding change.
+  // (1.25rem checkbox + 2×var(--space-3) cell padding). Read by CollectionListTable's frozen columns —
+  // keep in sync if the checkbox size or padding change.
   --list-col-select: 2.75rem;
   display: flex;
   flex-direction: column;
@@ -737,7 +295,8 @@ await fetchRows()
     }
   }
 
-  // Filter / Columns toolbar
+  // Filter / Columns toolbar. The panels themselves live in CollectionListFilterPanel /
+  // CollectionListColumnsPanel; the shared popover chrome below styles both.
   &__tools {
     display: flex;
     align-items: center;
@@ -788,56 +347,6 @@ await fetchRows()
     font-size: var(--text-sm);
     cursor: pointer;
   }
-  // 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-controls .list__filter {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  &__col-row {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    font-size: var(--text-sm);
-    cursor: pointer;
-  }
 
   &__new {
     margin-left: auto;
@@ -885,215 +394,5 @@ await fetchRows()
       color: var(--color-text);
     }
   }
-
-  &__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);
-  }
-  &__filter {
-    width: 100%;
-    padding: var(--space-1) var(--space-2);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    font: inherit;
-  }
-  // 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;
-    }
-  }
-
-  // Bulk action bar — appears above the scroll region when ≥1 row is selected.
-  &__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;
-  }
-
-  &__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>