@michaelthielemann/kestrel 1.2.1

package/layers/admin/app/pages/admin/index.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { resolveLocalized } from '../../../../ui/app/utils/localized'
+
+definePageMeta({ layout: 'admin', middleware: 'admin-auth' })
+
+const { t, lang } = useT()
+const { load } = useCollections()
+const collections = ref<Awaited<ReturnType<typeof load>>>([])
+try {
+  // Match AdminNav: hide nav:false system collections (e.g. media_settings, the machine-managed variant
+  // registry) — they are config stores, not content, and must not appear as clickable dashboard cards.
+  collections.value = (await load()).filter((c) => c.nav !== false)
+} catch {
+  // a transient /api/collections failure degrades to an empty dashboard, not an error page
+}
+
+// Broken-reference count for the alert banner — fire-and-forget so it never delays the dashboard, and a
+// failure (or a not-yet-built index) simply shows no banner.
+const brokenCount = ref(0)
+$fetch<unknown[]>('/api/references/broken')
+  .then((r) => { brokenCount.value = r.length })
+  .catch(() => { brokenCount.value = 0 })
+</script>
+
+<template>
+  <section class="dash">
+    <h1 class="dash__title">{{ t('dash.title') }}</h1>
+    <p class="dash__lede">{{ t('dash.lede') }}</p>
+    <NuxtLink v-if="brokenCount" to="/admin/references" class="dash__alert">
+      <UiIcon name="triangle-alert" :size="18" />
+      <span>{{ t('refs.dashAlert', { n: brokenCount }) }}</span>
+    </NuxtLink>
+    <UiEmptyState
+      v-if="!collections.length"
+      icon="file-text"
+      :title="t('dash.empty.title')"
+      :description="t('dash.empty.desc')"
+    />
+    <ul v-else class="dash__grid">
+      <li v-for="c in collections" :key="c.name">
+        <NuxtLink :to="`/admin/${c.name}`" class="dash__card">
+          <UiIcon :name="c.icon ?? 'file-text'" class="dash__icon" size="1.5rem" />
+          <span class="dash__name">{{ resolveLocalized(c.label?.plural, lang) ?? c.name }}</span>
+          <span class="dash__mode">{{ c.mode === 'single' ? t('dash.mode.singleton') : t('dash.mode.collection') }}</span>
+        </NuxtLink>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style lang="scss">
+.dash {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  overflow-y: auto;
+
+  &__title {
+    font-size: var(--text-xl);
+    font-weight: var(--weight-bold);
+  }
+  &__lede {
+    color: var(--color-text-muted);
+  }
+  // Stale-reference alert: a warning banner linking to the broken-references report (only when non-zero).
+  &__alert {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    align-self: flex-start;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--color-warning);
+    border-radius: var(--radius-md);
+    color: var(--color-warning-text); /* banner TEXT → 4.5:1 (the border keeps the 3:1 amber accent) */
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    text-decoration: none;
+  }
+  &__grid {
+    list-style: none;
+    margin: var(--space-3) 0 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: var(--space-4);
+  }
+  &__card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    text-decoration: none;
+    color: var(--color-text);
+    transition: border-color var(--motion-fast) var(--ease-standard);
+
+    &:hover {
+      border-color: var(--color-border-strong);
+    }
+    &:focus-visible {
+      border-color: var(--color-primary);
+    }
+  }
+  &__icon {
+    color: var(--color-primary);
+  }
+  &__name {
+    font-weight: var(--weight-medium);
+    text-transform: capitalize;
+  }
+  &__mode {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+}
+</style>

package/layers/admin/app/pages/admin/login.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin' })
+
+const { t } = useT()
+const route = useRoute()
+const password = ref('')
+const error = ref<string | null>(null)
+const loading = ref(false)
+
+async function submit() {
+  loading.value = true
+  error.value = null
+  try {
+    await useAuth().login(password.value)
+    await navigateTo(safeRedirect(route.query.redirect) ?? '/admin')
+  } catch (e: unknown) {
+    const status = (e as { statusCode?: number })?.statusCode
+    error.value = status === 401 ? t('login.invalid') : t('login.error')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <form class="login" @submit.prevent="submit">
+    <div class="login__brand">
+      <UiBrand />
+      <span class="login__brand-word">kestrel</span>
+    </div>
+    <h1 class="login__title">{{ t('login.signIn') }}</h1>
+    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+    <UiField :label="t('login.password')">
+      <template #default="f">
+        <UiTextInput
+          v-model="password"
+          type="password"
+          autocomplete="current-password"
+          v-bind="f"
+        />
+      </template>
+    </UiField>
+    <UiButton type="submit" variant="primary" :loading="loading">{{ t('login.signIn') }}</UiButton>
+  </form>
+</template>
+
+<style lang="scss">
+.login {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  max-width: 22rem;
+  margin-inline: auto;
+  overflow-y: auto;
+
+  &__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-bold);
+  }
+  &__title {
+    font-size: var(--text-xl);
+    font-weight: var(--weight-bold);
+  }
+}
+</style>

package/layers/admin/app/pages/admin/media.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'admin-auth' })
+const { t } = useT()
+</script>
+
+<template>
+  <section class="media-page">
+    <h1 class="media-page__title">{{ t('media.title') }}</h1>
+    <MediaLibrary />
+  </section>
+</template>
+
+<style lang="scss">
+// Non-scrolling page section: the title stays fixed and MediaLibrary's grid owns the scroll.
+.media-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-height: 0;
+  overflow: hidden;
+
+  &__title {
+    flex: 0 0 auto;
+    font-size: var(--text-xl);
+    font-weight: var(--weight-bold);
+  }
+}
+</style>

package/layers/admin/app/pages/admin/references.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'admin-auth' })
+
+// The global broken-references report: every record that links to a deleted or unpublished target. The
+// referrer keeps its last published output (the stale link stays live) until it is re-edited — this is
+// the editor's queue for fixing those. Derived on read, so an entry clears once the link is fixed or the
+// target restored. Admin-only (the `references` API resource is outside the public set).
+interface BrokenRow {
+  source: { collection: string; id: number }
+  target: { collection: string; id: number }
+  reason: 'missing' | 'unpublished'
+}
+
+const { t } = useT()
+const broken = ref<BrokenRow[]>([])
+// Distinguish "the check ran and found nothing" from "the check failed": a failed fetch must NOT render
+// the green all-clear (that would imply a verified-clean site when nothing was actually verified).
+const loadError = ref(false)
+try {
+  broken.value = await $fetch<BrokenRow[]>('/api/references/broken')
+} catch {
+  loadError.value = true
+}
+</script>
+
+<template>
+  <section class="refs">
+    <NuxtLink to="/admin" class="refs__back">
+      <UiIcon name="arrow-left" :size="16" />
+      <span>{{ t('nav.dashboard') }}</span>
+    </NuxtLink>
+    <h1 class="refs__title">{{ t('refs.title') }}</h1>
+    <p class="refs__lede">{{ t('refs.lede') }}</p>
+
+    <UiAlert v-if="loadError" variant="error" class="refs__error">{{ t('refs.loadError') }}</UiAlert>
+    <UiEmptyState
+      v-else-if="!broken.length"
+      icon="check"
+      :title="t('refs.empty.title')"
+      :description="t('refs.empty.desc')"
+    />
+    <!-- The report table is the one scroll region; the back link, title and lede stay fixed above it. -->
+    <div v-else class="refs__scroll">
+      <table class="refs__table">
+        <thead>
+          <tr>
+            <th>{{ t('refs.colReferrer') }}</th>
+            <th>{{ t('refs.colTarget') }}</th>
+            <th>{{ t('refs.colReason') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(b, i) in broken" :key="i">
+            <td>
+              <NuxtLink :to="`/admin/${b.source.collection}/${b.source.id}`" class="refs__link">{{ b.source.collection }} #{{ b.source.id }}</NuxtLink>
+            </td>
+            <td class="refs__target">{{ b.target.collection }} #{{ b.target.id }}</td>
+            <td>
+              <span class="refs__reason" :class="`refs__reason--${b.reason}`">{{ t(`refs.reason.${b.reason}`) }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style lang="scss">
+// Non-scrolling section: the back link, title and lede stay fixed; the report table scrolls in .refs__scroll.
+.refs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 0;
+  overflow: hidden;
+
+  &__back,
+  &__title,
+  &__lede {
+    flex: 0 0 auto;
+  }
+
+  &__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    align-self: flex-start;
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-text);
+    }
+  }
+  &__title {
+    font-size: var(--text-xl);
+    font-weight: var(--weight-bold);
+  }
+  &__lede {
+    color: var(--color-text-muted);
+  }
+  &__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);
+    }
+  }
+  &__link {
+    color: var(--color-primary);
+    text-decoration: none;
+    text-transform: capitalize;
+  }
+  &__target {
+    color: var(--color-text-muted);
+    text-transform: capitalize;
+  }
+  &__reason {
+    display: inline-flex;
+    padding: 1px var(--space-2);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-medium);
+    background: transparent;
+    border: 1px solid var(--color-warning);
+    color: var(--color-warning-text); /* warning conveyed as TEXT → needs 4.5:1, not the 3:1 icon accent */
+
+    &--missing {
+      background: var(--color-danger-solid);
+      color: var(--color-on-danger);
+    }
+  }
+}
+</style>

package/layers/admin/app/plugins/admin-style-guard.client.ts

@@ -0,0 +1,76 @@
+import { isProtectedStyle } from '../utils/admin-style-guard'
+
+function isKestrelOwned(node: Element): boolean {
+  const el = node as HTMLElement
+  const devId = el.dataset?.viteDevId ?? '' // Vite stamps the source path here in dev
+  const href = node.getAttribute?.('href') ?? ''
+  return isProtectedStyle(devId, href, el.dataset?.kestrel !== undefined)
+}
+
+/**
+ * Dev-only admin style guard — keeps a consumer's public CSS out of /admin.
+ *
+ * In `pnpm dev` the whole app (the consumer's public site AND /admin) is ONE Vite SPA sharing one
+ * `<head>`. A consumer's public global CSS — typically a reset with bare `html { font-size: … }`, `*`,
+ * `#__nuxt > div`, `body` — is injected as a persistent `<style>` the moment a public route renders, and
+ * Vite/Nuxt never unload it on client-side navigation. Soft-navigating to /admin therefore leaves that
+ * sheet live, and because it is globally-selectored it restyles the admin shell (rescaled rems from a
+ * changed root font-size, a collapsed rail, wrong fonts). Layout-chunk code-splitting only governs WHEN a
+ * sheet is loaded, never WHICH elements it matches once it is present in a shared document — so it is not
+ * isolation. This puts the defense upstream so consumers never have to scope their own styles defensively.
+ *
+ * While the active route is under /admin, this guard disables every stylesheet that is NOT Kestrel's own
+ * by flipping its `media` to `not all` (remembering the previous value so it can be restored exactly on
+ * leave — reversible, so returning to a public route never leaves it unstyled), and it watches `<head>` so
+ * any sheet injected later (HMR, another layer) is disabled too. On leaving /admin it restores everything.
+ *
+ * Gated to development: in production the public site ships as a separate static `nuxt generate` build with
+ * no /admin routes, and the origin serves /admin as its own document — there is no shared `<head>` to guard.
+ * Client-only (the static renderer never runs client plugins). Note: Kestrel's admin also re-asserts the
+ * root font-size inline while its layout is mounted (see admin.vue), which defends the rem base even in a
+ * single-origin production deployment where this dev guard is inactive.
+ */
+export default defineNuxtPlugin(() => {
+  if (!import.meta.dev) return
+
+  // Foreign sheets we disabled → their previous `media` value (null = attribute was absent).
+  const disabled = new Map<Element, string | null>()
+  let observer: MutationObserver | undefined
+
+  const disableForeign = () => {
+    for (const node of document.querySelectorAll('style, link[rel~="stylesheet"]')) {
+      if (isKestrelOwned(node) || disabled.has(node)) continue
+      disabled.set(node, node.getAttribute('media'))
+      node.setAttribute('media', 'not all')
+    }
+  }
+
+  const restoreAll = () => {
+    for (const [node, media] of disabled) {
+      if (media === null) node.removeAttribute('media')
+      else node.setAttribute('media', media)
+    }
+    disabled.clear()
+  }
+
+  // Runs on the initial client navigation and every subsequent one. A named global middleware — the
+  // anonymous form cannot take `{ global: true }`.
+  addRouteMiddleware(
+    'kestrel-admin-style-guard',
+    (to) => {
+      const onAdmin = to.path === '/admin' || to.path.startsWith('/admin/')
+      if (!onAdmin) {
+        observer?.disconnect()
+        observer = undefined
+        restoreAll()
+        return
+      }
+      disableForeign()
+      if (!observer) {
+        observer = new MutationObserver(disableForeign)
+        observer.observe(document.head, { childList: true, subtree: true })
+      }
+    },
+    { global: true },
+  )
+})

package/layers/admin/app/plugins/reauth.client.ts

@@ -0,0 +1,20 @@
+import { makeReauthInterceptor } from '../utils/reauth'
+
+/**
+ * Global re-auth interceptor. When a guarded `/api` call 401s mid-session (the cookie expired or was
+ * rotated server-side), an ofetch `onResponseError` hook clears the stale local auth and bounces to the
+ * login screen with a redirect back to the current page. Client-only: the static renderer never runs
+ * client plugins, so the prerender principal is unaffected; non-admin/public locations are filtered out
+ * in `reauthTarget`.
+ */
+export default defineNuxtPlugin(() => {
+  const auth = useAuth()
+  const router = useRouter()
+  const onResponseError = makeReauthInterceptor({
+    currentPath: () => router.currentRoute.value.fullPath,
+    reset: () => auth.reset(),
+    navigate: (to) => { navigateTo(to) },
+  })
+  // Wrap the auto-imported `$fetch` so every call (incl. useFetch/useAsyncData) runs through the hook.
+  globalThis.$fetch = globalThis.$fetch.create({ onResponseError }) as typeof globalThis.$fetch
+})

package/layers/admin/app/utils/admin-style-guard.ts

@@ -0,0 +1,20 @@
+// Kestrel's own stylesheets live under `…/kestrel/layers/…`; its extensions ship as `kestrel-*` packages
+// (or a monorepo `extensions/` dir → still resolved through a `kestrel-*` name). A Vue `<style scoped>`
+// block is component-scoped (its rules carry a `data-v-<hash>` attribute), so it can NEVER be the global
+// public CSS this guard targets — keep it wherever it comes from, which is what extension AND consumer
+// admin widgets (custom field types, registered editor bodies) rely on.
+const KESTREL_OWNED = /[/\\]kestrel[/\\]layers[/\\]/
+const KESTREL_EXTENSION = /[/\\]kestrel-[^/\\]+[/\\]/
+const SCOPED = /[?&]scoped[=&]/
+
+/**
+ * Whether a stylesheet must be PROTECTED from the dev admin style-guard (i.e. NOT disabled on /admin). True
+ * for Kestrel core/extension sheets, any component-scoped Vue style, or a node explicitly tagged
+ * `data-kestrel`. Only genuinely foreign global CSS (a consumer's unscoped public reset) falls through to
+ * false and gets disabled. Pure → unit-tested without a DOM.
+ */
+export function isProtectedStyle(devId: string, href: string, hasDataKestrel: boolean): boolean {
+  if (hasDataKestrel) return true
+  if (SCOPED.test(devId)) return true
+  return KESTREL_OWNED.test(devId) || KESTREL_OWNED.test(href) || KESTREL_EXTENSION.test(devId) || KESTREL_EXTENSION.test(href)
+}