@commonpub/layer 0.23.3 → 0.25.0

package/layouts/admin.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 const { isAdmin } = useAuth();
-const { admin: adminEnabled } = useFeatures();
+const { admin: adminEnabled, layoutEngine } = useFeatures();
 const runtimeConfig = useRuntimeConfig();
 const siteName = computed(() => (runtimeConfig.public.siteName as string) || 'CommonPub');
-const sidebarOpen = ref(false);
+
+// Sidebar state (desktop collapse + mobile drawer) — see useAdminSidebar.ts.
+// Editor routes (/admin/layouts/[id], /admin/theme/edit/[id]) auto-collapse
+// so the editor canvas gets more horizontal room; user can override per visit.
+const { desktopCollapsed, mobileOpen, toggleDesktop, toggleMobile, closeMobile } = useAdminSidebar();
 </script>
 
 <template>
@@ -14,8 +18,24 @@ const sidebarOpen = ref(false);
   <div v-else class="admin-layout">
     <header class="admin-topbar">
       <div class="admin-topbar-inner">
-        <button class="admin-menu-btn" aria-label="Toggle sidebar" @click="sidebarOpen = !sidebarOpen">
-          <i :class="sidebarOpen ? 'fa-solid fa-xmark' : 'fa-solid fa-bars'"></i>
+        <button
+          class="admin-menu-btn"
+          :aria-label="mobileOpen ? 'Close menu' : 'Open menu'"
+          :aria-expanded="mobileOpen"
+          aria-controls="admin-sidebar-nav"
+          @click="toggleMobile"
+        >
+          <i :class="mobileOpen ? 'fa-solid fa-xmark' : 'fa-solid fa-bars'"></i>
+        </button>
+        <button
+          class="admin-collapse-btn"
+          :aria-label="desktopCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+          :aria-expanded="!desktopCollapsed"
+          aria-controls="admin-sidebar-nav"
+          :title="desktopCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+          @click="toggleDesktop"
+        >
+          <i :class="desktopCollapsed ? 'fa-solid fa-angles-right' : 'fa-solid fa-angles-left'"></i>
         </button>
         <NuxtLink to="/" class="admin-brand">{{ siteName }}</NuxtLink>
         <span class="admin-badge">Admin</span>
@@ -24,21 +44,64 @@ const sidebarOpen = ref(false);
     </header>
 
     <div class="admin-body">
-      <aside class="admin-sidebar" :class="{ open: sidebarOpen }" aria-label="Admin navigation">
+      <aside
+        id="admin-sidebar-nav"
+        class="admin-sidebar"
+        :class="{ 'admin-sidebar--collapsed': desktopCollapsed, 'admin-sidebar--mobile-open': mobileOpen }"
+        aria-label="Admin navigation"
+      >
         <nav class="admin-nav">
-          <NuxtLink to="/admin" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gauge"></i> Dashboard</NuxtLink>
-          <NuxtLink to="/admin/users" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-users"></i> Users</NuxtLink>
-          <NuxtLink to="/admin/content" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-newspaper"></i> Content</NuxtLink>
-          <NuxtLink to="/admin/categories" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-tags"></i> Categories</NuxtLink>
-          <NuxtLink to="/admin/reports" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-flag"></i> Reports</NuxtLink>
-          <NuxtLink to="/admin/audit" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-clipboard-list"></i> Audit Log</NuxtLink>
-          <NuxtLink to="/admin/theme" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-palette"></i> Theme</NuxtLink>
-          <NuxtLink to="/admin/homepage" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-house"></i> Homepage</NuxtLink>
-          <NuxtLink to="/admin/navigation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-bars"></i> Navigation</NuxtLink>
-          <NuxtLink to="/admin/features" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-toggle-on"></i> Features</NuxtLink>
-          <NuxtLink to="/admin/federation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-globe"></i> Federation</NuxtLink>
-          <NuxtLink to="/admin/api-keys" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-key"></i> API Keys</NuxtLink>
-          <NuxtLink to="/admin/settings" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>
+          <!--
+            Nav link pattern: icon + visible label. When collapsed, label text
+            stays in the DOM (clip-path) so screen readers still announce
+            "Dashboard, link" — the icon alone has no accessible name.
+            `title` attr only set when collapsed → visual tooltip on hover.
+          -->
+          <NuxtLink to="/admin" class="admin-nav-link" :title="desktopCollapsed ? 'Dashboard' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-gauge"></i><span class="admin-nav-label">Dashboard</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/users" class="admin-nav-link" :title="desktopCollapsed ? 'Users' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-users"></i><span class="admin-nav-label">Users</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/content" class="admin-nav-link" :title="desktopCollapsed ? 'Content' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-newspaper"></i><span class="admin-nav-label">Content</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/categories" class="admin-nav-link" :title="desktopCollapsed ? 'Categories' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-tags"></i><span class="admin-nav-label">Categories</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/reports" class="admin-nav-link" :title="desktopCollapsed ? 'Reports' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-flag"></i><span class="admin-nav-label">Reports</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/audit" class="admin-nav-link" :title="desktopCollapsed ? 'Audit Log' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-clipboard-list"></i><span class="admin-nav-label">Audit Log</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/theme" class="admin-nav-link" :title="desktopCollapsed ? 'Theme' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-palette"></i><span class="admin-nav-label">Theme</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/homepage" class="admin-nav-link" :title="desktopCollapsed ? 'Homepage' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-house"></i><span class="admin-nav-label">Homepage</span>
+          </NuxtLink>
+          <!-- Layouts editor — gated on layoutEngine feature flag (CLAUDE.md rule #2).
+               Stays invisible until the operator flips the flag, then appears between
+               the legacy /admin/homepage editor and Navigation. Phase 3a — session 160 audit. -->
+          <NuxtLink v-if="layoutEngine" to="/admin/layouts" class="admin-nav-link" :title="desktopCollapsed ? 'Layouts' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-table-cells-large"></i><span class="admin-nav-label">Layouts</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/navigation" class="admin-nav-link" :title="desktopCollapsed ? 'Navigation' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-bars"></i><span class="admin-nav-label">Navigation</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/features" class="admin-nav-link" :title="desktopCollapsed ? 'Features' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-toggle-on"></i><span class="admin-nav-label">Features</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/federation" class="admin-nav-link" :title="desktopCollapsed ? 'Federation' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-globe"></i><span class="admin-nav-label">Federation</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/api-keys" class="admin-nav-link" :title="desktopCollapsed ? 'API Keys' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-key"></i><span class="admin-nav-label">API Keys</span>
+          </NuxtLink>
+          <NuxtLink to="/admin/settings" class="admin-nav-link" :title="desktopCollapsed ? 'Settings' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-gear"></i><span class="admin-nav-label">Settings</span>
+          </NuxtLink>
         </nav>
       </aside>
 
@@ -84,19 +147,38 @@ const sidebarOpen = ref(false);
   gap: var(--space-3);
 }
 
-.admin-menu-btn {
-  display: none;
+.admin-menu-btn,
+.admin-collapse-btn {
   width: 36px;
   height: 36px;
   background: none;
   border: var(--border-width-default) solid var(--border);
   color: var(--text-dim);
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
   align-items: center;
   justify-content: center;
+  transition: color var(--transition-default), border-color var(--transition-default), background var(--transition-default);
+}
+
+.admin-menu-btn:hover,
+.admin-collapse-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-bg);
 }
 
+.admin-menu-btn:focus-visible,
+.admin-collapse-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Mobile drawer toggle — desktop hides it, mobile media query reveals. */
+.admin-menu-btn { display: none; }
+/* Desktop collapse toggle — desktop shows it, mobile media query hides. */
+.admin-collapse-btn { display: flex; }
+
 .admin-brand {
   font-weight: var(--font-weight-bold);
   font-size: var(--text-lg);
@@ -134,11 +216,17 @@ const sidebarOpen = ref(false);
 }
 
 .admin-sidebar {
-  width: 200px;
+  width: var(--sidebar-width);
   border-right: var(--border-width-default) solid var(--border);
   background: var(--surface);
   padding: var(--space-4) var(--space-2);
   flex-shrink: 0;
+  transition: width var(--transition-default);
+  overflow: hidden; /* clip the labels as the width transitions */
+}
+
+.admin-sidebar--collapsed {
+  width: var(--sidebar-width-collapsed);
 }
 
 .admin-nav {
@@ -155,6 +243,7 @@ const sidebarOpen = ref(false);
   display: flex;
   align-items: center;
   gap: 10px;
+  white-space: nowrap;
   transition: color 0.12s, background 0.12s;
 }
 
@@ -162,6 +251,21 @@ const sidebarOpen = ref(false);
   width: 16px;
   text-align: center;
   font-size: 12px;
+  flex-shrink: 0;
+}
+
+.admin-nav-label {
+  /* Label fades out + width collapses when sidebar is collapsed. Kept in DOM
+     (not display:none) so screen readers continue to announce the link name. */
+  transition: opacity var(--transition-default), max-width var(--transition-default);
+  max-width: 12rem;
+  opacity: 1;
+  overflow: hidden;
+}
+
+.admin-sidebar--collapsed .admin-nav-label {
+  opacity: 0;
+  max-width: 0;
 }
 
 .admin-nav-link:hover {
@@ -198,8 +302,13 @@ const sidebarOpen = ref(false);
 }
 
 @media (max-width: 768px) {
+  /* Mobile: hide the desktop collapse toggle, show the drawer hamburger. */
+  .admin-collapse-btn { display: none; }
   .admin-menu-btn { display: flex; }
+
   .admin-sidebar {
+    /* Reset desktop collapse semantics — mobile is a drawer, full width. */
+    width: 220px !important;
     position: fixed;
     top: var(--nav-height);
     left: 0;
@@ -208,9 +317,13 @@ const sidebarOpen = ref(false);
     transform: translateX(-100%);
     transition: transform 0.2s ease;
     box-shadow: none;
-    width: 220px;
   }
-  .admin-sidebar.open {
+  /* Mobile labels are always visible (drawer is either open or closed, not collapsed). */
+  .admin-sidebar .admin-nav-label {
+    opacity: 1 !important;
+    max-width: 12rem !important;
+  }
+  .admin-sidebar--mobile-open {
     transform: translateX(0);
     box-shadow: var(--shadow-lg);
   }

package/middleware/admin-layouts.ts

@@ -0,0 +1,29 @@
+/**
+ * Named middleware for /admin/layouts/* pages.
+ *
+ * The global `feature-gate.global.ts` middleware gates the entire
+ * `/admin` prefix on the `admin` feature flag. The layout editor
+ * is gated on an ADDITIONAL `layoutEngine` flag — when the engine
+ * is off (the v1 default), the editor pages 404 instead of erroring
+ * on a server endpoint the user can't reach anyway.
+ *
+ * Pair this with `middleware: 'auth'` on the page — the auth
+ * middleware redirects unauthenticated users to /auth/login;
+ * this middleware filters the feature flag AFTER auth.
+ *
+ * See CLAUDE.md rule #2 (no feature without a flag) +
+ * docs/plans/phase-3-editor.md hard rule "Editor admin-only —
+ * gate /admin/layouts/* on requireFeature('admin') +
+ * requireFeature('layoutEngine')".
+ */
+import { getInitialFlags, type FeatureFlags } from '../composables/useFeatures';
+
+export default defineNuxtRouteMiddleware(() => {
+  // Same useState key as useFeatures() — the global middleware also
+  // primes it. Re-using getInitialFlags here avoids the null-poison
+  // bug from session 126 (see feature-gate.global.ts comment).
+  const flags = useState<FeatureFlags>('feature-flags', getInitialFlags);
+  if (!flags.value.layoutEngine) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+  }
+});

package/nuxt.config.ts

@@ -82,6 +82,14 @@ export default defineNuxtConfig({
       domain: 'localhost:3000',
       siteName: 'CommonPub',
       siteDescription: 'A CommonPub instance',
+      // Nuxt only propagates env-var overrides (NUXT_PUBLIC_FEATURES_X) for
+      // keys DECLARED here. Undeclared keys are ignored at runtime, so
+      // every flag in @commonpub/config's FeatureFlags type must appear
+      // below — even if its default is false — or operators can't flip
+      // it via env var on a per-instance basis. Drift caused
+      // commonpub.io's first canary attempt to silently keep
+      // layoutEngine:false at SSR despite NUXT_PUBLIC_FEATURES_LAYOUT_ENGINE=true
+      // being set on the container.
       features: {
         content: true,
         social: true,
@@ -89,12 +97,18 @@ export default defineNuxtConfig({
         docs: true,
         video: true,
         contests: false,
+        events: false,
         learning: true,
         explainers: true,
+        editorial: true,
         federation: false,
         federateHubs: false,
+        seamlessFederation: false,
         admin: false,
         emailNotifications: false,
+        publicApi: false,
+        contentImport: true,
+        layoutEngine: false,
       },
       contentTypes: 'project,blog,explainer',
       contestCreation: 'admin',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.23.3",
+  "version": "0.25.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -43,7 +43,9 @@
     "@tiptap/extension-placeholder": "^2.11.0",
     "@tiptap/extension-strike": "^2.11.0",
     "@tiptap/extension-text": "^2.11.0",
+    "@vue-dnd-kit/core": "2.4.6",
     "drizzle-orm": "^0.45.1",
+    "grid-layout-plus": "1.1.1",
     "highlight.js": "^11.11.1",
     "pg": "^8.13.0",
     "sharp": "^0.34.5",
@@ -51,21 +53,22 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.15.0",
     "@commonpub/docs": "0.6.3",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/editor": "0.7.11",
     "@commonpub/protocol": "0.12.0",
     "@commonpub/schema": "0.17.0",
-    "@commonpub/server": "2.57.0",
+    "@commonpub/server": "2.58.0",
     "@commonpub/ui": "0.9.0",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/auth": "0.6.0",
-    "@commonpub/explainer": "0.7.15"
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/config": "0.15.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^5.2.4",
+    "axe-core": "^4.11.3",
     "jsdom": "^25.0.1",
     "vitest": "^3.2.4"
   },

package/pages/[...customPath].vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+/**
+ * Catch-all page for custom-page layouts.
+ *
+ * Spec: docs/plans/layout-and-pages.md §6.1, §6.4.
+ *
+ * Runs LAST in Nuxt's route precedence — every file-defined route in
+ * `pages/` wins automatically because they have a more specific match.
+ * For any path not matched by a file route:
+ *   1. Read `params.customPath` (array of segments) → join + normalise
+ *   2. Reject malformed paths with 404 (don't leak `instance_settings`
+ *      reads to obviously-bad inputs)
+ *   3. `useLayout(normalisedPath)` to fetch the published layout, if any
+ *   4. If found: useSeoMeta from page_meta, render 3 zones via
+ *      <LayoutSlot>
+ *   5. If null: throw 404 (handled by error.vue)
+ *
+ * Page meta: hidden from sitemap when not found, indexable by default
+ * when found unless `page_meta.noindex` is set.
+ *
+ * Access control: page_meta.access ∈ {'public', 'members', 'admin'}.
+ * Defaults to 'public'. 'members' redirects to /auth/login when not
+ * authenticated. 'admin' returns 404 to non-admins (don't leak
+ * existence — same posture as draft content).
+ *
+ * Zones (full-width / main / sidebar) are arranged by the shared
+ * <PageFrame> — the one canonical frame used by every page (consolidation
+ * pass). Phase 4 will let page_meta.frame parameterise PageFrame's tokens
+ * (narrow / wide / sidebar-left etc.) so custom pages pick a frame variant.
+ *
+ * `var(--*)` only.
+ */
+import { computed } from 'vue';
+import { pathNormalize } from '@commonpub/server/layout/path-normalize';
+import type { LayoutPayload } from '../composables/useLayout';
+
+definePageMeta({
+  // Run this catch-all AFTER all file-based routes (the default is
+  // alphabetical, which already puts `[...x]` last in Nuxt's compile,
+  // but pin it explicitly for clarity).
+  name: 'custom-page-catchall',
+});
+
+const route = useRoute();
+const { user: authUser } = useAuth();
+
+// Build raw path from params, then normalise via shared utility.
+const rawPath = computed<string>(() => {
+  const p = route.params.customPath;
+  const parts = Array.isArray(p) ? p : (p ? [p] : []);
+  return '/' + parts.join('/');
+});
+
+const normalised = computed(() => pathNormalize(rawPath.value));
+
+// Malformed paths 404 early — don't bother with a DB lookup.
+if (!normalised.value.ok) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+}
+
+const pathToLookup = computed(() => (normalised.value.ok ? normalised.value.path : '/'));
+
+// IMPORTANT: use `await useFetch` directly (NOT useLayout) because we need
+// the resolved data synchronously in setup() to throw 404 on missing.
+// useLayout returns refs without awaiting; the data settles AFTER setup
+// returns, so an early `customLayout.value === null` check fires for
+// EVERY request — even when a real layout exists. Pages are Suspense-
+// wrapped in Nuxt, so top-level await is safe here (same pattern
+// pages/index.vue uses for /api/content).
+//
+// Session 159 audit caught this — it shipped first as `useLayout(...) +
+// sync null-check` which had a load-bearing bug (404 always). Fixed by
+// switching to awaited useFetch.
+const { data: customLayout } = await useFetch<LayoutPayload | null>(
+  '/api/layouts/by-route',
+  {
+    query: computed(() => ({ path: pathToLookup.value })),
+    key: computed(() => `layout:${pathToLookup.value}`).value,
+    transform: (input: LayoutPayload | null | undefined) => input ?? null,
+    onResponseError({ response }) {
+      // 404 from API (feature off OR no layout for route) → treat as null;
+      // we'll throw a page-level 404 below if needed.
+      if (response.status === 404) return;
+    },
+    server: true,
+    lazy: false,
+  },
+);
+
+// Now safe to check — data is settled by Nuxt's Suspense before this line
+if (customLayout.value === null) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+}
+
+// Access control — uses page_meta.access. 'admin' returns 404 to non-
+// admins (don't leak existence). 'members' redirects to login.
+const access = computed(() => customLayout.value?.pageMeta?.access ?? 'public');
+const isAuthenticated = computed(() => !!authUser.value);
+
+if (customLayout.value && access.value === 'admin') {
+  // We don't have a user.role hint client-side reliably — gate via the
+  // existing /api/admin/probe pattern. For SSR-safe behavior, treat
+  // missing auth as 404. (Phase 3 inspector lets admins preview drafts
+  // — that path goes through a separate route.)
+  if (!isAuthenticated.value) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+  }
+  // For an authenticated non-admin, the server-side admin probe also
+  // returns 404 to avoid leaking; client-side a malicious user would
+  // see the layout but layout-engine sections honour visibility.roles
+  // on top of this gate.
+}
+
+if (customLayout.value && access.value === 'members' && !isAuthenticated.value) {
+  await navigateTo(`/auth/login?redirect=${encodeURIComponent(pathToLookup.value)}`);
+}
+
+// Set page meta from page_meta. Defaults are conservative.
+useSeoMeta({
+  title: () => customLayout.value?.pageMeta?.title ?? 'CommonPub',
+  description: () => customLayout.value?.pageMeta?.description,
+  ogTitle: () => customLayout.value?.pageMeta?.title,
+  ogDescription: () => customLayout.value?.pageMeta?.description,
+  ogImage: () => customLayout.value?.pageMeta?.ogImage,
+  ogType: () => customLayout.value?.pageMeta?.ogType ?? 'website',
+  robots: () => (customLayout.value?.pageMeta?.noindex ? 'noindex, nofollow' : 'index, follow'),
+});
+
+// Resolve which zones the layout actually has — render only those, in
+// the canonical order (full-width above the split, then main + sidebar
+// side by side, then sidebar collapses below main on narrow viewports).
+const zones = computed(() => customLayout.value?.zones?.map((z: { zone: string }) => z.zone) ?? []);
+const hasFullWidth = computed(() => zones.value.includes('full-width'));
+const hasMain = computed(() => zones.value.includes('main'));
+const hasSidebar = computed(() => zones.value.includes('sidebar'));
+</script>
+
+<template>
+  <!-- Consolidation: the page frame now comes from the shared <PageFrame>
+       (one canonical max-width + sidebar width + responsive collapse),
+       not a per-page `.cpub-custom-page-grid`. Slots are provided only for
+       the zones this layout actually has (preserves the prior hasX gating). -->
+  <PageFrame v-if="customLayout">
+    <template v-if="hasFullWidth" #full-width>
+      <LayoutSlot :route="pathToLookup" zone="full-width" />
+    </template>
+    <template v-if="hasMain" #main>
+      <LayoutSlot :route="pathToLookup" zone="main" />
+    </template>
+    <template v-if="hasSidebar" #sidebar>
+      <LayoutSlot :route="pathToLookup" zone="sidebar" />
+    </template>
+  </PageFrame>
+</template>

package/pages/admin/homepage.vue

@@ -102,10 +102,31 @@ function discard(): void {
 }
 
 const editingId = ref<string | null>(null);
+
+// R4 audit deprecation note: when layoutEngine is on, this page's edits
+// no longer overwrite a bespoke layout (the auto-sync at sections.put.ts
+// is now non-destructive). The legacy editor still works for the saved
+// JSON shape — but the live page renders via /admin/layouts. Surface this.
+const { layoutEngine } = useFeatures();
 </script>
 
 <template>
   <div class="cpub-admin-homepage">
+    <!-- R4 audit (session 160): deprecation banner when layoutEngine is on.
+         The new visual editor at /admin/layouts is the canonical surface;
+         this legacy page still saves its JSON but the live homepage now
+         renders via the layouts table. Auto-sync is non-destructive — it
+         only creates the layout if one doesn't yet exist. -->
+    <div v-if="layoutEngine" class="cpub-admin-homepage-deprecation" role="status">
+      <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+      <div>
+        <p><strong>This is the legacy homepage editor.</strong> The Layout Engine is active on this instance — use the new visual editor for live changes.</p>
+        <NuxtLink to="/admin/layouts" class="cpub-admin-homepage-deprecation-link">
+          Open Layouts editor <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+        </NuxtLink>
+      </div>
+    </div>
+
     <div class="cpub-admin-header">
       <div>
         <h1 class="cpub-admin-title">Homepage Layout</h1>
@@ -289,4 +310,29 @@ const editingId = ref<string | null>(null);
   .cpub-section-row { flex-direction: column; align-items: flex-start; }
   .cpub-section-actions { align-self: flex-end; }
 }
+
+/* R4 audit (session 160): deprecation banner for the legacy editor
+   when layoutEngine is on. Direct, friendly, non-blocking — links to
+   the new editor without removing access to this page (which still
+   saves the JSON for backward compat). */
+.cpub-admin-homepage-deprecation {
+  display: flex;
+  gap: var(--space-3);
+  align-items: flex-start;
+  padding: var(--space-3) var(--space-4);
+  background: var(--yellow-bg, var(--surface2));
+  border: 1px solid var(--yellow, var(--border));
+  margin-bottom: var(--space-4);
+}
+.cpub-admin-homepage-deprecation i { color: var(--yellow, var(--text-dim)); font-size: var(--text-lg); margin-top: 2px; }
+.cpub-admin-homepage-deprecation p { margin: 0 0 var(--space-1) 0; color: var(--text); }
+.cpub-admin-homepage-deprecation-link {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  text-decoration: underline;
+}
 </style>

package/pages/admin/index.vue

@@ -3,6 +3,11 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Admin Dashboard — ${useSiteName()}` });
 
 const { data: stats, pending } = await useFetch('/api/admin/stats');
+
+// R3 P2: surface /admin/layouts on the dashboard landing.
+// The sidebar already hides itself behind layoutEngine; mirror the
+// same gate so the dashboard tile only appears when the editor is on.
+const { layoutEngine: layoutEngineEnabled } = useFeatures();
 </script>
 
 <template>
@@ -45,6 +50,17 @@ const { data: stats, pending } = await useFetch('/api/admin/stats');
           <i class="fa-solid fa-gear cpub-admin-action-icon"></i>
           <span class="cpub-admin-action-label">Instance Settings</span>
         </NuxtLink>
+        <NuxtLink
+          v-if="layoutEngineEnabled"
+          to="/admin/layouts"
+          class="cpub-admin-action"
+        >
+          <i class="fa-solid fa-table-cells-large cpub-admin-action-icon"></i>
+          <!-- Label matches the sidebar nav verbatim ("Layouts"). "Edit
+               Layouts" implied a direct-to-editor jump but the route is
+               the list page. -->
+          <span class="cpub-admin-action-label">Layouts</span>
+        </NuxtLink>
       </div>
     </div>
     </template>