@michaelthielemann/kestrel 1.2.1

package/layers/access/server/utils/grant-registry.ts

@@ -0,0 +1,36 @@
+import type { Grant, Role } from './policy'
+
+// A process-singleton registry of EXTRA authorization grants, contributed by layers/extensions at boot
+// (server plugin) on top of the hardcoded `POLICY`. This is the seam that lets an opt-in layer deliberately
+// open a narrow hole in the default-deny guard — e.g. the proofing extension granting `anonymous → write →
+// proofing` for its public back-channel. Inert until something registers: with an empty registry the guard
+// behaves exactly as the hardcoded policy. The map is INJECTED into the (pure) guard, not read from inside
+// it (symmetric with `publicResources`), so the policy stays deterministically node-testable. Foundation
+// for a future configurable Users & Roles system.
+const registered: Partial<Record<Role, Grant[]>> = {}
+
+/** Add an extra grant for a role. Deliberate + explicit — it widens what that role may do. */
+export function registerAccessGrant(role: Role, grant: Grant): void {
+  // Defense-in-depth: the public (anonymous) must never be handed a wildcard or draft-read through this
+  // seam — a legitimate public back-channel always names ONE specific resource and reads published-only.
+  // CRUCIAL: the evaluator (`resolveAccess`) defaults an OMITTED read scope to 'all' via `(scope ?? 'all')`,
+  // so an unscoped anonymous read would silently resolve to draft-read. The validator must use the SAME
+  // default, or a "safe"-looking `{action:'read', resource:'x'}` grant leaks drafts to anonymous visitors.
+  // (Write grants carry no read scope — `resolveAccess` only upgrades readScope for read grants — so an
+  // omitted scope on a write is fine, e.g. the proofing back-channel's anonymous write.)
+  const anonymousDraftRead = role === 'anonymous' && grant.action === 'read' && (grant.scope ?? 'all') === 'all'
+  if (role === 'anonymous' && (grant.resource === '*' || anonymousDraftRead)) {
+    throw new Error(`refusing an over-broad anonymous grant (${grant.action} ${grant.resource}${grant.scope ? ` scope=${grant.scope}` : ''}): name a specific resource and grant read with an explicit scope: 'published' (never draft-read)`)
+  }
+  (registered[role] ??= []).push(grant)
+}
+
+/** The full role → extra-grants map, for the guard to consult alongside `POLICY`. */
+export function registeredGrants(): Readonly<Partial<Record<Role, Grant[]>>> {
+  return registered
+}
+
+/** Test helper: drop all registered grants (the registry is a module singleton). */
+export function clearAccessGrants(): void {
+  for (const role of Object.keys(registered) as Role[]) delete registered[role]
+}

package/layers/access/server/utils/guard.ts

@@ -0,0 +1,44 @@
+import { isCrossSiteWrite, type CsrfHeaders } from './csrf'
+import { verifySession } from '../../../auth/server/utils/session'
+import { resolveAccess, actionForMethod, resourceForPath, isBootstrapPath, isPublicRenderPath, type Principal, type Grant, type Role } from './policy'
+
+export interface AccessInput {
+  method: string
+  path: string
+  csrf: CsrfHeaders
+  cookie: string | undefined
+  secret: string
+  nowMs: number
+  isPrerender: boolean
+}
+
+export type AccessDecision =
+  | { allow: true; principal: Principal; readScope: 'published' | 'all' }
+  | { allow: false; status: number; message: string }
+
+export function derivePrincipal(input: AccessInput): Principal {
+  if (input.isPrerender) return { userId: 'renderer', role: 'renderer' }
+  if (verifySession(input.secret, input.cookie, input.nowMs).valid) return { userId: 'admin', role: 'admin' }
+  return { userId: null, role: 'anonymous' }
+}
+
+export function evaluateAccess(input: AccessInput, publicResources: readonly string[] = [], registeredGrants: Readonly<Partial<Record<Role, Grant[]>>> = {}): AccessDecision {
+  // CSRF first: every unsafe method (incl. login) must be same-site.
+  if (actionForMethod(input.method) === 'write' && isCrossSiteWrite(input.csrf)) {
+    return { allow: false, status: 403, message: 'Cross-origin write rejected' }
+  }
+  const principal = derivePrincipal(input)
+  // Auth bootstrap (login/session) is always permitted so the SPA can authenticate. Scope still follows
+  // the principal (mirrors isPublicRenderPath below) — an anonymous caller never gets draft-read scope.
+  if (isBootstrapPath(input.method, input.path)) {
+    return { allow: true, principal, readScope: principal.role === 'anonymous' ? 'published' : 'all' }
+  }
+  // The public render entry is readable by everyone; the scope follows the principal so an admin can
+  // preview drafts while anonymous (and the static render) stay published-only.
+  if (isPublicRenderPath(input.method, input.path)) {
+    return { allow: true, principal, readScope: principal.role === 'anonymous' ? 'published' : 'all' }
+  }
+  const { allowed, readScope } = resolveAccess(principal, actionForMethod(input.method), resourceForPath(input.path), publicResources, registeredGrants[principal.role] ?? [])
+  if (!allowed) return { allow: false, status: 401, message: 'Authentication required' }
+  return { allow: true, principal, readScope }
+}

package/layers/access/server/utils/ip-allowlist.ts

@@ -0,0 +1,76 @@
+export type AllowlistMode = 'enforce' | 'log' | 'off'
+
+/** A parsed IPv4 CIDR as `network base & mask`, both uint32. */
+export interface Cidr {
+  base: number
+  mask: number
+}
+
+/**
+ * Resolve the gate mode from `KESTREL_IP_ALLOWLIST_MODE` given the raw list.
+ *
+ * An empty list means there is nothing to enforce → `off`. When a list IS present, an unset/unknown mode
+ * defaults to `enforce`: a configured allow-list that silently let everyone through is the exact legacy
+ * footgun we are replacing. `log` is the opt-in calibration mode (observe, never block) used to confirm the
+ * resolved client IP + `KESTREL_TRUST_PROXY` depth before enforcing.
+ */
+export function allowlistMode(modeRaw: string | undefined, listRaw: string | undefined): AllowlistMode {
+  if (!listRaw || !listRaw.trim()) return 'off'
+  const m = (modeRaw ?? '').trim().toLowerCase()
+  if (m === 'off' || m === 'disabled' || m === 'false') return 'off'
+  if (m === 'log' || m === 'log-only' || m === 'dry-run') return 'log'
+  return 'enforce'
+}
+
+/** `1.2.3.4` / `::ffff:1.2.3.4` → uint32; `null` for out-of-range, real IPv6, or non-IPv4 input. */
+export function ipv4ToInt(ip: string): number | null {
+  let s = ip.trim()
+  const mapped = /^::ffff:(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/i.exec(s)
+  if (mapped) s = mapped[1]!
+  const m = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(s)
+  if (!m) return null
+  let n = 0
+  for (let i = 1; i <= 4; i++) {
+    const octet = Number(m[i])
+    if (octet > 255) return null
+    n = n * 256 + octet
+  }
+  return n >>> 0
+}
+
+function parseCidr(token: string): Cidr | null {
+  const slash = token.indexOf('/')
+  const base = ipv4ToInt(slash === -1 ? token : token.slice(0, slash))
+  if (base === null) return null
+  const bits = slash === -1 ? 32 : Number(token.slice(slash + 1))
+  if (!Number.isInteger(bits) || bits < 0 || bits > 32) return null
+  const mask = bits === 0 ? 0 : (0xffffffff << (32 - bits)) >>> 0
+  return { base: (base & mask) >>> 0, mask }
+}
+
+/**
+ * Parse the allow-list env into CIDRs, tolerant of the legacy nginx block so it can be pasted verbatim:
+ * newline/comma/semicolon separated, `# comments` and a leading `allow`/`set_real_ip_from` keyword stripped.
+ * Invalid tokens are dropped, not thrown — one bad line must not disable the whole gate. `onReject`, when
+ * given, is called with each dropped token (this parser is IPv4-only, so an IPv6 CIDR pasted into an
+ * otherwise-valid list is silently a no-op unless the caller surfaces it).
+ */
+export function parseAllowlist(raw: string | undefined, onReject?: (token: string) => void): Cidr[] {
+  if (!raw) return []
+  const out: Cidr[] = []
+  for (const part of raw.split(/[\n,;]+/)) {
+    const token = part.replace(/#.*$/, '').trim().replace(/^(?:allow|set_real_ip_from)\s+/i, '').trim()
+    if (!token) continue
+    const cidr = parseCidr(token)
+    if (cidr) out.push(cidr)
+    else onReject?.(token)
+  }
+  return out
+}
+
+/** True when `ip` falls in any CIDR. Fails closed: a non-IPv4 address or empty list never matches. */
+export function ipAllowed(ip: string, cidrs: Cidr[]): boolean {
+  const n = ipv4ToInt(ip)
+  if (n === null) return false
+  return cidrs.some((c) => ((n & c.mask) >>> 0) === c.base)
+}

package/layers/access/server/utils/policy.ts

@@ -0,0 +1,98 @@
+export type Role = 'admin' | 'renderer' | 'anonymous'
+export type Action = 'read' | 'write'
+export interface Principal { userId: string | null; role: Role }
+export interface Grant { action: Action; resource: string; scope?: 'published' | 'all' }
+export interface AccessResult { allowed: boolean; readScope: 'published' | 'all' }
+
+/** Hardcoded authorization policy. Role -> grants. `resource: '*'` matches any. */
+export const POLICY: Record<Role, Grant[]> = {
+  admin: [{ action: 'write', resource: '*' }, { action: 'read', resource: '*' }],
+  // The renderer is ONLY ever the build-time prerender or the runtime publisher; both produce the
+  // public static site, which is published-only by definition. Scope its read to 'published' so the
+  // generic /api/<collection> reads never leak drafts into the generated HTML (admin live preview is
+  // unaffected — it renders under the admin principal, scope 'all').
+  renderer: [{ action: 'read', resource: '*', scope: 'published' }],
+  // Anonymous published-read is data-driven from the registry (every page-like collection), not a
+  // literal allow-list — see the `publicResources` branch in `resolveAccess`.
+  anonymous: [],
+}
+
+export function resolveAccess(principal: Principal, action: Action, resource: string, publicResources: readonly string[] = [], extraGrants: readonly Grant[] = []): AccessResult {
+  let allowed = false
+  // readScope reflects the principal's READ permission for this resource, INDEPENDENT of the requested
+  // action, and is fail-closed to 'published': a granted WRITE must never silently confer draft-read
+  // ('all'). Only an explicit read grant with scope 'all' (i.e. admin) upgrades it.
+  let readScope: 'published' | 'all' = 'published'
+  // Hardcoded policy first, then any registry-contributed grants for this role (the opt-in seam). Extra
+  // grants only ever ADD permissions for the role they were registered under — they can't revoke.
+  for (const g of [...(POLICY[principal.role] ?? []), ...extraGrants]) {
+    if (g.resource !== '*' && g.resource !== resource) continue
+    if (g.action === action) allowed = true
+    if (g.action === 'read' && (g.scope ?? 'all') === 'all') readScope = 'all' // a draft-read grant wins
+  }
+  // An anonymous visitor gets published read on every page-like collection (the registry-driven public
+  // set), so a consumer's own pageLike collection is reachable without editing a literal allow-list.
+  // Published-only and gated to the public set — never widens to drafts or non-pageLike collections.
+  if (!allowed && principal.role === 'anonymous' && action === 'read' && publicResources.includes(resource)) {
+    allowed = true
+    readScope = 'published'
+  }
+  return { allowed, readScope }
+}
+
+/**
+ * Whether an anonymous visitor may read a collection — i.e. whether its pages are publicly reachable.
+ * The single source of truth for "what belongs in a public sitemap": a sitemap must list only URLs an
+ * unauthenticated crawler can actually fetch, so the sitemap filters pageLike collections through this.
+ */
+export function isPubliclyReadable(resource: string, publicResources: readonly string[] = []): boolean {
+  return resolveAccess({ userId: null, role: 'anonymous' }, 'read', resource, publicResources).allowed
+}
+
+/**
+ * Whether a read at this `readScope` must be limited to published rows. Fail-CLOSED: only the explicit
+ * `'all'` scope (admin / live preview) sees drafts; anything else — `'published'`, an unexpected value,
+ * or a missing scope (a guard regression) — stays published-only. Mirrors the public render path so the
+ * two read entry points can't drift to opposite defaults.
+ */
+export function publishedOnlyForScope(readScope: string | undefined): boolean {
+  return readScope !== 'all'
+}
+
+const SAFE_METHODS = new Set(['GET', 'HEAD', 'OPTIONS'])
+export function actionForMethod(method: string): Action {
+  return SAFE_METHODS.has(method.toUpperCase()) ? 'read' : 'write'
+}
+
+/**
+ * Resource for an /api path: the collection segment, except the tooling sub-routes
+ * (`/options`, `/translations`, `/:id/translations`, `/:id/dead-refs`) map to a distinct
+ * `<collection>/<tool>` resource so the public content grant (read on the bare collection) never covers
+ * admin-only tooling — a pageLike collection's `translations` / `dead-refs` maps must NOT be readable by
+ * anonymous visitors. The group-keyed and per-record translations routes share one resource: they expose
+ * the same sibling ids (drafts included), so they must be gated identically.
+ */
+export function resourceForPath(path: string): string {
+  const segs = (path.split('?')[0] ?? '').split('/').filter(Boolean)
+  if (segs[0] !== 'api' || !segs[1]) return ''
+  if (segs[2] === 'options' || segs[2] === 'translations') return `${segs[1]}/${segs[2]}`
+  if (segs[3] === 'translations' || segs[3] === 'dead-refs') return `${segs[1]}/${segs[3]}`
+  return segs[1]
+}
+
+/** Auth bootstrap endpoints, always permitted so the SPA can authenticate under default-deny. */
+export function isBootstrapPath(method: string, path: string): boolean {
+  const clean = path.split('?')[0]
+  const m = method.toUpperCase()
+  return (m === 'POST' && clean === '/api/auth/login') || (m === 'GET' && clean === '/api/auth/session')
+}
+
+/**
+ * The public render entry (`GET /api/route`) the live page resolver calls. Readable by everyone — it is
+ * the runtime equivalent of serving a static page — but the read SCOPE follows the principal: anonymous
+ * gets published-only, an authenticated admin gets 'all' so the handler can surface a draft preview.
+ * The handler itself re-forces published-only for any static-generation render (prerender / publisher).
+ */
+export function isPublicRenderPath(method: string, path: string): boolean {
+  return method.toUpperCase() === 'GET' && path.split('?')[0] === '/api/route'
+}

package/layers/access/server/utils/public-resources.ts

@@ -0,0 +1,11 @@
+import { allCollections } from '../../../core/server/utils/registry'
+
+/**
+ * Collections an anonymous visitor may read (published only): every page-like collection. The single,
+ * registry-driven source for public reachability — consumed by the access guard (runtime serving) and
+ * the sitemap (which URLs to advertise), so a consumer's own pageLike collection is public without
+ * editing a literal allow-list. Page-like ⟺ has a `path`, i.e. it is routable to a static URL.
+ */
+export function publicReadableResources(): string[] {
+  return allCollections().filter((c) => c.def.pageLike).map((c) => c.def.name)
+}

package/layers/access/server/utils/render-context.ts

@@ -0,0 +1,41 @@
+import { AsyncLocalStorage } from 'node:async_hooks'
+
+/**
+ * Marks an in-process request chain as the runtime publisher's render, so the access guard grants it the
+ * same `renderer` principal that build-time prerender gets. The publisher's render does a nested
+ * `$fetch('/api/route')`, which is NOT a public endpoint; without this it would 401 at runtime. Set via
+ * AsyncLocalStorage — never a header — so an external HTTP request can't forge renderer access (and
+ * resolvePage still enforces published-only, so drafts never reach the output regardless).
+ */
+const ctx = new AsyncLocalStorage<true>()
+
+/** Run a publish render (and its nested API fetches) as the renderer principal. */
+export function runAsRenderer<T>(fn: () => T): T {
+  return ctx.run(true, fn)
+}
+
+/** True when executing inside a publisher render, so the access guard grants the renderer principal. */
+export function isRendererContext(): boolean {
+  return ctx.getStore() === true
+}
+
+const stageGate = new AsyncLocalStorage<true>()
+
+/**
+ * Marks the current request's async context as classified by the stage IP gate, so the in-process
+ * sub-requests it spawns (the SSR page's own `$fetch`, the editor preview) are not gated again — they
+ * reach the middleware stack on a mocked socket with no peer address and could never match a CIDR.
+ *
+ * `enterWith` rather than `run` because a middleware has no handle on the rest of its own request; the
+ * mark is therefore reachable only from work descending from a request the gate already admitted, which
+ * is what makes it unforgeable — unlike "this request has no socket peer", a property whole listeners
+ * (unix domain sockets) have for every external client.
+ */
+export function markStageGatePassed(): void {
+  stageGate.enterWith(true)
+}
+
+/** True inside a request whose originating request was already classified by the stage IP gate. */
+export function isStageGatePassedContext(): boolean {
+  return stageGate.getStore() === true
+}

package/layers/access/server/utils/require-admin.ts

@@ -0,0 +1,15 @@
+import { createError, type H3Event } from 'h3'
+
+/**
+ * Per-handler write-authorization backstop. The access-guard middleware is the PRIMARY enforcement, but
+ * it is gated on an `/api/` path-prefix string and is the only check — a future mutating route mounted
+ * outside `/api/` (a `server/routes/*` action, a webhook), or any guard-vs-router path divergence, would
+ * otherwise run unauthenticated. Every mutating handler calls this so authorization never depends solely
+ * on that prefix heuristic. Throws 401 unless the resolved principal is the admin (the only role with
+ * write grants — `renderer` is read-only, `anonymous` has no grants).
+ */
+export function requireAdmin(event: H3Event): void {
+  if (event.context.principal?.role !== 'admin') {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+}

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

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent,
+  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuRadioGroup, DropdownMenuRadioItem,
+  DropdownMenuItemIndicator, DropdownMenuItem,
+} from 'reka-ui'
+
+// The rail's pseudo-account area: an avatar that opens an account menu (UI-language + sign out).
+const { t, lang } = useT()
+const { logout } = useAuth()
+
+// Single-user admin for now — static initials. A natural seam for a real display name later.
+const initials = 'AD'
+
+// reka's DropdownMenuRadioGroup emits the broad `AcceptableValue`; accept `unknown` and coerce to our lang.
+function selectLang(value: unknown) { lang.value = value as string }
+function signOut() { logout() }
+
+// Exposed for the component test: the menu itself is teleported (not rendered by happy-dom), so the
+// load-bearing handlers are asserted directly.
+defineExpose({ lang, selectLang, signOut })
+</script>
+
+<template>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger as-child>
+      <button type="button" class="rail-account__trigger" :aria-label="t('account.label')" :title="t('account.label')">
+        <span class="rail-account__avatar" aria-hidden="true">{{ initials }}</span>
+        <span class="rail-account__name rail__label">{{ t('account.name') }}</span>
+        <UiIcon name="chevron-down" class="rail-account__caret rail__label" size="1rem" />
+      </button>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        class="rail-account__menu"
+        side="top"
+        align="start"
+        :side-offset="6"
+        :collision-padding="8"
+      >
+        <DropdownMenuLabel class="rail-account__head">
+          <span class="rail-account__avatar rail-account__avatar--sm" aria-hidden="true">{{ initials }}</span>
+          <span class="rail-account__head-name">{{ t('account.name') }}</span>
+        </DropdownMenuLabel>
+
+        <DropdownMenuSeparator class="rail-account__sep" />
+
+        <DropdownMenuLabel class="rail-account__group-label">{{ t('lang.label') }}</DropdownMenuLabel>
+        <DropdownMenuRadioGroup :model-value="lang" @update:model-value="selectLang">
+          <DropdownMenuRadioItem
+            v-for="l in ADMIN_LANGS"
+            :key="l"
+            :value="l"
+            class="rail-account__item"
+          >
+            <span class="rail-account__check">
+              <DropdownMenuItemIndicator>
+                <UiIcon name="check" size="1rem" />
+              </DropdownMenuItemIndicator>
+            </span>
+            <span>{{ l.toUpperCase() }}</span>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+
+        <DropdownMenuSeparator class="rail-account__sep" />
+
+        <DropdownMenuItem class="rail-account__item rail-account__item--danger" @select="signOut">
+          <UiIcon name="log-out" size="1rem" class="rail-account__item-icon" />
+          <span>{{ t('nav.signOut') }}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
+
+<style lang="scss">
+// Not scoped: Reka teleports DropdownMenuContent to <body>, where a scoped data-v selector no longer
+// matches (same reason UiMenu's styles are global). The trigger lives in the rail; keeping the whole
+// component's styles global is simplest and consistent with the other portaled overlays.
+.rail-account__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  margin-bottom: var(--space-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--text-sm);
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: -2px;
+  }
+  &[data-state='open'] {
+    background: var(--color-active, var(--color-surface-2));
+  }
+}
+
+.rail-account__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border-strong, var(--color-border));
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.02em;
+
+  &--sm {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+.rail-account__name {
+  font-weight: var(--weight-medium);
+}
+.rail-account__caret {
+  margin-left: auto; // push the chevron to the right edge of the full-width trigger
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+// Menu surface — mirrors .ui-menu so the account dropdown reads like the rest of the admin chrome.
+.rail-account__menu {
+  min-width: 13rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-1);
+  z-index: var(--z-dropdown);
+}
+
+.rail-account__head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2);
+}
+.rail-account__head-name {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+
+.rail-account__group-label {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: var(--weight-medium);
+  color: var(--color-text-muted);
+}
+
+.rail-account__sep {
+  height: 1px;
+  margin: var(--space-1) calc(var(--space-1) * -1);
+  background: var(--color-border);
+}
+
+.rail-account__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+
+  &[data-highlighted] {
+    background: var(--color-hover);
+    outline: none;
+  }
+  &--danger {
+    color: var(--color-danger);
+  }
+}
+
+.rail-account__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  flex-shrink: 0;
+  color: var(--color-primary);
+}
+.rail-account__item-icon {
+  flex-shrink: 0;
+}
+
+// Collapsed rail: drop the label + caret and centre the avatar (mirrors .rail__item's collapsed rule).
+.admin--rail-collapsed .rail-account__trigger {
+  justify-content: center;
+  gap: 0;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { resolveLocalized } from '../../../ui/app/utils/localized'
+
+const { t, lang } = useT()
+const { collections, load } = useCollections()
+const { collapsed } = useRailCollapsed()
+const route = useRoute()
+try {
+  await load()
+} catch {
+  // Nav is non-critical chrome; a failed fetch leaves it empty rather than breaking the layout.
+}
+</script>
+
+<template>
+  <nav class="admin-nav" :aria-label="t('nav.collections')">
+    <NuxtLink
+      v-for="c in (collections ?? []).filter((c) => c.nav !== false)"
+      :key="c.name"
+      :to="`/admin/${c.name}`"
+      class="admin-nav__link rail__item"
+      :class="{ 'router-link-active': isNavItemActive(route.path, `/admin/${c.name}`) }"
+      :title="collapsed ? (resolveLocalized(c.label?.plural, lang) ?? c.name) : undefined"
+    >
+      <UiIcon :name="c.icon ?? 'file-text'" class="rail__icon" size="1.25rem" />
+      <span class="rail__label">{{ resolveLocalized(c.label?.plural, lang) ?? c.name }}</span>
+    </NuxtLink>
+  </nav>
+</template>
+
+<style lang="scss">
+.admin-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+
+  // Layout, colour and active state come from the shared .rail__item (admin layout).
+  // Only the cosmetic capitalisation is nav-specific — kept CSS-only so the rendered
+  // text node stays the raw collection name (e.g. "settings").
+  &__link {
+    text-transform: capitalize;
+  }
+}
+</style>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { SerializedBlock } from '../../../core/server/utils/serialize-collection'
+import type { LayoutNode } from '../../../core/server/utils/field-layout'
+import type { BlockRow } from '../utils/block-tree'
+import { resolveLocalized } from '../../../ui/app/utils/localized'
+
+// The fields pane for the currently selected block: delegates to the shared <FieldLayout> renderer,
+// driven by the selected block's props. `def` is the selected block's resolved definition (the parent
+// already has it). Errors are the id-keyed BlockErrorMap entry for this block (depth-independent); edits
+// emit (key, value) for an id-addressed setProp on the shared tree.
+const props = defineProps<{
+  block: BlockRow
+  def?: SerializedBlock
+  locale: string
+  errors?: Record<string, string>
+  /** Field keys in this block that hold a stale reference — shown as a non-blocking warning note. */
+  deadFields?: Set<string>
+  disabled?: boolean
+}>()
+const emit = defineEmits<{ update: [key: string, value: unknown] }>()
+
+const { t, lang } = useT()
+const subFields = computed(() =>
+  Object.fromEntries(Object.entries(props.def?.fields ?? {}).map(([k, v]) => [k, asFieldDef(v)])),
+)
+// Block-level `fieldLayout` authoring is deferred (v1 ships collections + repeaters); the render path is
+// already layout-ready via this cast, so a future serializeBlock that carries a layout flows through with
+// no further change. One documented cast, same category as `asFieldDef`.
+const blockLayout = computed(() => (props.def as { fieldLayout?: LayoutNode[] } | undefined)?.fieldLayout)
+</script>
+
+<template>
+  <div class="block-fields">
+    <p class="block-fields__title">{{ resolveLocalized(def?.label, lang) ?? block.type }}</p>
+    <FieldLayout
+      :layout="blockLayout"
+      :fields="subFields"
+      :values="block.props"
+      :errors="errors"
+      :dead-fields="deadFields"
+      :locale="locale"
+      :disabled="disabled"
+      @update="(key, value) => emit('update', key, value)"
+    />
+    <p v-if="!Object.keys(subFields).length" class="block-fields__empty">{{ t('blocks.noFields') }}</p>
+  </div>
+</template>
+
+<style lang="scss">
+.block-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  &__title {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--color-text-muted);
+    text-transform: capitalize;
+  }
+  &__empty {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+}
+</style>