@michaelthielemann/kestrel 4.1.3 → 5.0.0

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

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { PER_PAGE_OPTIONS } from '@michaelthielemann/kestrel-core/client'
-
-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

@@ -1,347 +0,0 @@
-<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'
-import { resolveLocalized } from '../../../ui/app/utils/localized'
-import type { SerializedAction } from '@michaelthielemann/kestrel-core'
-
-const props = defineProps<{
-  rows: Record<string, unknown>[]
-  columns: ListColumn[]
-  collection: string
-  localeQuery: string
-  sort: string
-  busy: boolean
-  selected: Set<number>
-  allSelected: boolean
-  headerIndeterminate: boolean
-  /** Schema-driven row actions beyond the built-in edit/duplicate/delete. */
-  actions?: SerializedAction[]
-}>()
-const emit = defineEmits<{
-  sort: [key: string]
-  toggleRow: [id: number, on: boolean]
-  toggleAll: [on: boolean]
-  duplicate: [id: number]
-  delete: [ids: number[]]
-  runAction: [action: SerializedAction, id: number]
-}>()
-
-const { t, lang } = useT()
-const { locales } = useContentLocales()
-
-const colLabel = (col: ListColumn) => columnLabel(col, t)
-const rowLabel = (row: Record<string, unknown>) => labelForRow(props.columns, row)
-const actionLabel = (action: SerializedAction) => resolveLocalized(action.label, lang.value) ?? action.name
-
-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
-              v-for="action in actions"
-              :key="action.name"
-              type="button"
-              class="list__action-btn"
-              :disabled="busy"
-              :data-action="action.name"
-              :aria-label="`${actionLabel(action)}: ${rowLabel(row)}`"
-              @click="emit('runAction', action, Number(row.id))"
-            >
-              <KestrelUiIcon :name="action.icon ?? 'zap'" :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>
-        <!-- A quarantined row carries none of its normal fields — a single spanning cell replaces
-             the per-column cells rather than rendering blanks for data that doesn't exist. -->
-        <td v-if="row.$quarantined === true" :colspan="columns.length">
-          <span class="list__quarantine-badge">
-            <KestrelUiIcon name="triangle-alert" :size="14" role="img" :aria-label="t('list.quarantined')" />
-            {{ t('list.quarantined') }}
-          </span>
-        </td>
-        <td v-else 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;
-  }
-
-  // Quarantine badge — icon + text (not color alone, WCAG 1.4.1), replacing a row's normal data cells.
-  &__quarantine-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    padding: 2px var(--space-2);
-    border: 1px solid var(--color-danger);
-    border-radius: var(--radius-sm);
-    color: var(--color-danger);
-    font-size: var(--text-xs);
-    font-weight: var(--weight-medium);
-  }
-
-  // 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

@@ -1,211 +0,0 @@
-<script setup lang="ts">
-// The editor "Ampel": TWO lamps side by side in the action bar, each a dot + ONE word + a details tooltip.
-//   LEFT  — the SAVE / draft lifecycle of THIS record (its local vs. stored state):
-//             amber  — work in flight: saving, or unsaved local changes not yet in the DB
-//             blue   — saved but a Draft, so it is intentionally NOT on the live/static site
-//             green  — saved and (for status collections) published, or just saved (no status field)
-//   RIGHT — the GENERATED state of this record's static page (pageLike collections only), read from
-//           `publish_status` via `/api/publishStatus`:
-//             green   — the route's last publish succeeded (the file is live; the tooltip names local vs S3)
-//             amber   — published but no success row yet — a republish is in flight ("Generating…")
-//             neutral — this environment never produces the file (dev / static output off) → "Not built"
-//             red     — the last publish for the route errored (render / write / S3) — details in the tooltip
-//             blue    — a Draft: intentionally not generated, so there is no live file
-import type { PublishStatusData } from '../composables/usePublishStatus'
-
-const props = defineProps<{
-  dirty: boolean
-  saving?: boolean
-  hasStatus?: boolean
-  /** The LIVE (possibly unsaved) form status — drives the left lamp's word. */
-  status?: string
-  /** The last SAVED publish status — drives the RIGHT lamp's draft/published decision, so an unsaved
-   *  dropdown switch never flips the generated-state indicator. Falls back to `status` when absent. */
-  savedStatus?: string
-  /** Only pageLike collections produce a static page → only they get the right (live) lamp. */
-  pageLike?: boolean
-  /** The record's last publish outcome (from `/api/publishStatus`); null/absent while unknown. */
-  live?: PublishStatusData | null
-}>()
-const { t, lang } = useT()
-
-// LEFT lamp — save + publish state. `word` is the single label shown; `detail` is the tooltip sentence.
-const save = computed<{ tone: 'amber' | 'green' | 'blue'; word: string; detail: string }>(() => {
-  if (props.saving) return { tone: 'amber', word: t('editorStatus.word.saving'), detail: t('editorStatus.detail.saving') }
-  if (props.dirty) return { tone: 'amber', word: t('editorStatus.word.unsaved'), detail: t('editorStatus.detail.unsaved') }
-  if (props.hasStatus && props.status === 'draft') return { tone: 'blue', word: t('editorStatus.word.draft'), detail: t('editorStatus.detail.draft') }
-  if (props.hasStatus) return { tone: 'green', word: t('editorStatus.word.published'), detail: t('editorStatus.detail.published') }
-  return { tone: 'green', word: t('editorStatus.word.saved'), detail: t('editorStatus.detail.saved') }
-})
-
-const updatedAtLabel = computed(() => {
-  const at = props.live?.updatedAt
-  if (!at) return ''
-  const d = new Date(at)
-  if (Number.isNaN(d.getTime())) return ''
-  return t('editorStatus.live.updatedAt', { time: d.toLocaleString(lang.value) })
-})
-
-// RIGHT lamp — the live / generated state of this record's static page. Only a SAVED pageLike record with a
-// resolved route has one (a non-pageLike collection produces no static page; an unsaved `new` record leaves
-// `live.route` null → no right lamp until the record actually has a page).
-const live = computed<{ tone: 'green' | 'red' | 'amber' | 'blue' | 'neutral'; word: string; detail: string; when?: string; error?: string } | null>(() => {
-  if (props.pageLike !== true || !props.live?.route) return null
-  // Key the draft/published decision off the SAVED status, not the live form value: an unsaved dropdown
-  // switch must not move the generated-state indicator. Switching a live page → Draft keeps it "Live" (the
-  // file stays on the server until the save prunes it); switching a saved Draft → Published keeps it "Not
-  // live" (nothing is generated until the publish is actually saved). A DISTINCT word from the left lamp's
-  // "Draft" so the two lamps read as two signals (save-state vs generated-state), not a repeat.
-  const saved = props.savedStatus ?? props.status
-  if (props.hasStatus && saved === 'draft')
-    return { tone: 'blue', word: t('editorStatus.word.notLive'), detail: t('editorStatus.live.draft') }
-  const s = props.live?.status ?? null
-  if (s === 'error')
-    return { tone: 'red', word: t('editorStatus.word.error'), detail: t('editorStatus.live.error'), when: updatedAtLabel.value, error: props.live?.error ?? '' }
-  // An environment that never generates (dev / static output off) cannot resolve any pending state, so an
-  // alarming "Outdated" would point at a problem no action here can fix — calm neutral, even when an old
-  // success row (e.g. a prod run against the same DB) exists.
-  if (props.live?.generates === false)
-    return { tone: 'neutral', word: t('editorStatus.word.notBuilt'), detail: t('editorStatus.live.notBuilt') }
-  if (s === 'success') {
-    // Saved after the last publish: the file IS live, but it is an older version of this record. Saving no
-    // longer republishes (ADR-0008), so this is the normal state of a page being worked on — amber, not red.
-    if (props.live?.pending) {
-      return { tone: 'amber', word: t('editorStatus.word.outdated'), detail: t('editorStatus.live.outdated'), when: updatedAtLabel.value }
-    }
-    // Where the file actually landed — surface local vs S3 in the tooltip ("stored on S3").
-    const onS3 = (props.live?.target ?? props.live?.driver) === 's3'
-    return { tone: 'green', word: t('editorStatus.word.live'), detail: t(onS3 ? 'editorStatus.live.liveS3' : 'editorStatus.live.liveLocal'), when: updatedAtLabel.value }
-  }
-  // Never published, and a save does not enqueue anything (ADR-0008) — so nothing is in flight and
-  // nothing will be until someone presses Publish. Reporting progress here would point the user at a
-  // spinner instead of at the one action that changes it. With `publishOnSave` a save DOES republish, so
-  // there the in-flight reading is the right one.
-  if (props.live?.neverPublished && !props.live?.publishOnSave)
-    return { tone: 'blue', word: t('editorStatus.word.notPublished'), detail: t('editorStatus.live.notPublished') }
-  return { tone: 'amber', word: t('editorStatus.word.generating'), detail: t('editorStatus.live.pending') }
-})
-</script>
-
-<template>
-  <span class="editor-status-group">
-    <!-- Polite live region: announces save-state transitions (Saved → Unsaved → Saving…) to screen readers.
-         Visually hidden; not a tooltip. -->
-    <span class="editor-status-sr" role="status" aria-live="polite">{{ save.detail }}</span>
-
-    <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. -->
-      <span class="editor-status" tabindex="0" :data-tone="save.tone" :aria-label="`${save.word} — ${save.detail}`">
-        <span class="editor-status__dot" aria-hidden="true" />
-        <span class="editor-status__word">{{ save.word }}</span>
-      </span>
-      <template #content>
-        <span class="editor-status-tip">
-          <strong class="editor-status-tip__detail">{{ save.detail }}</strong>
-        </span>
-      </template>
-    </KestrelUiTooltip>
-
-    <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>
-      </span>
-      <template #content>
-        <span class="editor-status-tip">
-          <strong class="editor-status-tip__detail">{{ live.detail }}</strong>
-          <span v-if="live.when" class="editor-status-tip__when">{{ live.when }}</span>
-          <span v-if="live.tone === 'red' && live.error" class="editor-status-tip__err">{{ live.error }}</span>
-        </span>
-      </template>
-    </KestrelUiTooltip>
-  </span>
-</template>
-
-<style scoped lang="scss">
-.editor-status-group {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-// Visually-hidden polite status region (mirrors the ui sr-only mixin; admin can't @use a ui-layer scss).
-.editor-status-sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-// Both lamps are focusable status indicators (tabindex spans, not buttons) so the tooltip opens on hover
-// AND keyboard focus, without adding a "Save"-named button that would clash with Save-button selectors.
-.editor-status,
-.editor-status-live {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  cursor: help;
-
-  &__dot {
-    width: 0.6rem;
-    height: 0.6rem;
-    border-radius: var(--radius-full);
-    background: var(--_tone, var(--color-text-subtle));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_tone, transparent) 22%, transparent);
-    flex: none;
-  }
-  &__word {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-    white-space: nowrap;
-  }
-
-  &[data-tone='amber'] {
-    --_tone: var(--color-warning);
-  }
-  &[data-tone='green'] {
-    --_tone: var(--color-success);
-  }
-  &[data-tone='blue'] {
-    --_tone: var(--color-primary);
-  }
-  &[data-tone='red'] {
-    --_tone: var(--color-danger);
-  }
-  &[data-tone='neutral'] {
-    --_tone: var(--color-text-subtle);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-  }
-}
-</style>
-
-<!-- Not scoped: the tooltip content is teleported to <body> by Reka, where a scoped data-v selector no
-     longer matches (same reason UiTooltip itself keeps global styles). -->
-<style lang="scss">
-.editor-status-tip {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-
-  &__when {
-    color: var(--color-text-muted);
-    font-size: var(--text-xs);
-  }
-  &__err {
-    color: var(--color-danger);
-    font-size: var(--text-xs);
-    word-break: break-word;
-  }
-}
-</style>

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

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-// Fallback body when a collection's `editor` type has no registered body (an extension misconfig or a
-// missing plugin). Fails visibly instead of rendering blank.
-defineProps<{ editor: string }>()
-const { t } = useT()
-</script>
-
-<template>
-  <div class="editor-unsupported">
-    <p class="editor-unsupported__note">{{ t('editor.unsupported', { type: editor }) }}</p>
-  </div>
-</template>
-
-<style lang="scss">
-.editor-unsupported {
-  flex: 1 1 auto;
-  min-height: 0;
-
-  &__note {
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-    padding: var(--space-3) var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    background: var(--color-surface-2);
-  }
-}
-</style>

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

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-// The schema-driven default editor body: a plain field list. All state comes from the editor form
-// context provided by CollectionEditor; this body only lays it out.
-const ctx = useEditorFormContext()
-</script>
-
-<template>
-  <div class="editor__flat">
-    <KestrelPageFieldsPane v-bind="ctx.pageFieldsBindings.value" v-on="ctx.pageFieldsHandlers" />
-  </div>
-</template>
-
-<style lang="scss">
-// Flat-collection field list: its own scroll region, so the shell's actions row stays pinned below it.
-.editor__flat {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-</style>