@commonpub/layer 0.82.0 → 0.83.0

package/composables/useEditorAutosave.ts

@@ -0,0 +1,131 @@
+/**
+ * useEditorAutosave — debounced save engine for block-editor pages.
+ *
+ * Extracted from docs/[siteSlug]/edit.vue (session 205), which had grown
+ * its own inline autosave: a debounce timer, a status state machine, the
+ * Cmd+S shortcut, and a beforeunload guard all hand-wired in setup(). This
+ * pulls that engine into one tested unit so the page only has to supply a
+ * `persist()` callback and call `markDirty()` from its watchers.
+ *
+ * Why not reuse useLayoutAutoSave? That composable is a *leading*-debounce
+ * watcher (it fires `debounceMs` after the dirty flag first flips true and
+ * does NOT re-arm on continued edits) and deliberately owns nothing else —
+ * the layout editor keeps its status/shortcuts elsewhere. The docs editor
+ * needs a *trailing* debounce (save once the user pauses), plus the status
+ * machine + Cmd+S + unsaved-changes guard. Different semantics, different
+ * surface; consolidating the three autosave call-sites is its own follow-up.
+ *
+ * Router-coupled navigation guards (onBeforeRouteLeave) stay in the page —
+ * this composable is intentionally router-free so it unit-tests without a
+ * router instance.
+ */
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
+
+export type AutosaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+
+export interface UseEditorAutosaveOptions {
+  /** Performs the actual persistence (the PUT + any refresh). Must throw on failure. */
+  persist: () => Promise<void>;
+  /** Gate — autosave and manual save only run when this returns true (e.g. a page is selected). Default: always. */
+  canSave?: () => boolean;
+  /** Trailing-debounce window in ms. Default 5000 (docs editor saves once the user pauses for 5s). */
+  debounceMs?: number;
+  /** Called with the thrown error when a save fails — the page wires this to a toast. */
+  onError?: (err: unknown) => void;
+}
+
+export interface UseEditorAutosave {
+  /** True when there are unsaved changes. */
+  isDirty: Ref<boolean>;
+  /** When true, markDirty() is a no-op — set during content load so programmatic edits do not mark dirty. */
+  isLoading: Ref<boolean>;
+  /** Save-lifecycle status for the UI (status dot + label). */
+  status: Ref<AutosaveStatus>;
+  /** True while a save is in flight. */
+  saving: Ref<boolean>;
+  /** Mark dirty and (re)arm the trailing-debounce timer. No-op while isLoading. */
+  markDirty: () => void;
+  /** Cancel any pending timer and persist immediately. Used by Cmd+S, the Save button, and save-before-switch. */
+  saveNow: () => Promise<void>;
+  /** Clear dirty + reset status to idle — call after loading a freshly-selected page. */
+  reset: () => void;
+  /** Cancel a pending autosave without saving. */
+  cancel: () => void;
+}
+
+export function useEditorAutosave(opts: UseEditorAutosaveOptions): UseEditorAutosave {
+  const debounceMs = opts.debounceMs ?? 5000;
+  const canSave = opts.canSave ?? ((): boolean => true);
+
+  const isDirty = ref(false);
+  const isLoading = ref(false);
+  const status = ref<AutosaveStatus>('idle');
+  const saving = ref(false);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function cancel(): void {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+
+  async function saveNow(): Promise<void> {
+    if (!canSave()) return;
+    if (saving.value) return; // re-entrancy guard — never fire two PUTs for one change
+    cancel();
+    saving.value = true;
+    status.value = 'saving';
+    try {
+      await opts.persist();
+      isDirty.value = false;
+      status.value = 'saved';
+    } catch (err: unknown) {
+      // Leave isDirty true — the change is still unsaved and should retry/save again.
+      status.value = 'error';
+      opts.onError?.(err);
+    } finally {
+      saving.value = false;
+    }
+  }
+
+  function markDirty(): void {
+    if (isLoading.value) return;
+    isDirty.value = true;
+    cancel();
+    timer = setTimeout(() => {
+      timer = null;
+      if (isDirty.value && canSave()) void saveNow();
+    }, debounceMs);
+  }
+
+  function reset(): void {
+    cancel();
+    isDirty.value = false;
+    status.value = 'idle';
+  }
+
+  function onKeydown(e: KeyboardEvent): void {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      void saveNow();
+    }
+  }
+
+  function onBeforeUnload(e: BeforeUnloadEvent): void {
+    if (isDirty.value) e.preventDefault();
+  }
+
+  onMounted(() => {
+    if (typeof document !== 'undefined') document.addEventListener('keydown', onKeydown);
+    if (typeof window !== 'undefined') window.addEventListener('beforeunload', onBeforeUnload);
+  });
+
+  onBeforeUnmount(() => {
+    cancel();
+    if (typeof document !== 'undefined') document.removeEventListener('keydown', onKeydown);
+    if (typeof window !== 'undefined') window.removeEventListener('beforeunload', onBeforeUnload);
+  });
+
+  return { isDirty, isLoading, status, saving, markDirty, saveNow, reset, cancel };
+}

package/composables/useEngagement.ts

@@ -150,16 +150,23 @@ export function useEngagement(opts: EngagementOptions) {
 
   async function share(): Promise<void> {
     if (!contentId.value) return;
+    const url = window.location.href;
     if (navigator.share) {
       try {
-        await navigator.share({
-          url: window.location.href,
-        });
+        await navigator.share({ url });
       } catch {
-        // User cancelled or not supported
+        // User cancelled or share unavailable — nothing to report.
       }
-    } else {
-      await navigator.clipboard.writeText(window.location.href);
+      return;
+    }
+    // No Web Share API (desktop / non-secure context): copy + confirm so the
+    // button isn't a silent no-op.
+    const toast = useToast();
+    try {
+      await navigator.clipboard.writeText(url);
+      toast.success('Link copied to clipboard');
+    } catch {
+      toast.error('Could not copy the link');
     }
   }
 

package/composables/useFeatures.ts

@@ -20,6 +20,11 @@ export interface FeatureFlags {
   /** Per-stage submission artifacts for multi-round contests. Default ON;
    *  inert until a stage defines a submissionTemplate. */
   contestStageSubmissions: boolean;
+  /** Form-first proposal submissions + draft placeholder project (Phase 4). Default OFF. */
+  contestProposals: boolean;
+  /** Offer PII field types in the submission-form builder (Phase 4). Default OFF.
+   *  PII access is always gated server-side by `contest.pii.read`. */
+  contestPii: boolean;
   events: boolean;
   learning: boolean;
   explainers: boolean;
@@ -68,7 +73,8 @@ let hydrated = false;
 // `flags.value.X` access would crash at runtime.
 export const DEFAULT_FLAGS: FeatureFlags = {
   content: true, social: true, hubs: true, docs: true, video: true,
-  contests: false, contestStageSubmissions: true, events: false, learning: true, explainers: true,
+  contests: false, contestStageSubmissions: true, contestProposals: false, contestPii: false,
+  events: false, learning: true, explainers: true,
   editorial: true, federation: false, admin: false, themeStudio: true, emailNotifications: false,
   publicApi: false, contentImport: true,
   layoutEngine: false,
@@ -169,6 +175,8 @@ export function useFeatures() {
     video: computed(() => flags.value.video),
     contests: computed(() => flags.value.contests),
     contestStageSubmissions: computed(() => flags.value.contestStageSubmissions),
+    contestProposals: computed(() => flags.value.contestProposals),
+    contestPii: computed(() => flags.value.contestPii),
     events: computed(() => flags.value.events),
     learning: computed(() => flags.value.learning),
     explainers: computed(() => flags.value.explainers),

package/composables/useFileUpload.ts

@@ -0,0 +1,60 @@
+/**
+ * useFileUpload — single source of truth for the `/api/files/upload` POST.
+ *
+ * Eight call sites used to copy-paste the same `FormData` + `$fetch` dance
+ * (build FormData, append `file`, optionally append `purpose`, POST as
+ * multipart). They diverged only in the response shape they read back
+ * (`{ url }`, plus optional `originalName`/`size`/`sizeBytes`/`mimeType`/
+ * `width`/`height`) and in how they handle errors. This composable owns the
+ * request; callers keep their own success/error handling and pick the response
+ * shape via the `T` type parameter.
+ *
+ * Behaviour is identical to the previous inline code: same endpoint, same
+ * field names (`file`, optional `purpose`), same multipart body, errors
+ * propagate to the caller (no swallowing here).
+ */
+
+/** Every upload response includes at least the stored URL. */
+export interface FileUploadResult {
+  url: string;
+}
+
+export interface UseFileUpload {
+  /**
+   * POST a file to `/api/files/upload` as multipart FormData.
+   *
+   * @param file    the File/Blob to upload (appended as the `file` field).
+   * @param purpose optional upload purpose (e.g. 'avatar', 'banner', 'cover',
+   *                'content'); appended as the `purpose` field when provided.
+   *                Omit it to match the legacy hub-post upload, which sent none.
+   * @returns the parsed JSON response, typed by the caller via `T`.
+   */
+  uploadFile: <T extends FileUploadResult = FileUploadResult>(
+    file: Blob,
+    purpose?: string,
+  ) => Promise<T>;
+}
+
+export function useFileUpload(): UseFileUpload {
+  async function uploadFile<T extends FileUploadResult = FileUploadResult>(
+    file: Blob,
+    purpose?: string,
+  ): Promise<T> {
+    const formData = new FormData();
+    formData.append('file', file);
+    if (purpose !== undefined) {
+      formData.append('purpose', purpose);
+    }
+    // Keep the `<T>` generic (it bounds the request type so Nuxt's route-scoring
+    // typegen doesn't recurse over the whole route union) but cast the result: the
+    // typed overload otherwise mis-resolves to the GET response shape in some apps'
+    // route typegen (a Nuxt fragility any new GET route can perturb). The upload
+    // endpoint returns a FileUploadResult, so the cast is sound.
+    return (await $fetch<T>('/api/files/upload', {
+      method: 'POST',
+      body: formData,
+    })) as unknown as T;
+  }
+
+  return { uploadFile };
+}

package/composables/useProfileContent.ts

@@ -0,0 +1,84 @@
+import type { Serialized, ContentListItem } from '@commonpub/server';
+
+/**
+ * Per-tab keyset content loader for a user profile.
+ *
+ * The profile page used to fetch one page of all the user's published content
+ * and split it into tabs client-side, so a tab with many items was silently
+ * truncated and an owner never saw their drafts. This loads the active tab's
+ * slice from `GET /api/users/[username]/content` with keyset pagination (the
+ * server endpoint orders by publishedAt DESC NULLS LAST, id DESC) and pages by
+ * the opaque `nextCursor` — the same dup-safe strategy as useContentFeed, but
+ * pointed at the per-user endpoint (kept separate so the homepage feed loader
+ * stays untouched).
+ *
+ * The caller passes a reactive query ({ type?, drafts?, limit }). When the query
+ * identity changes (tab switch) the feed re-fetches from the first page and the
+ * accumulator resets. Draft visibility is enforced server-side from the
+ * authenticated viewer; `drafts: 'true'` is only a request.
+ */
+export type ProfileFeedItem = Serialized<ContentListItem>;
+
+type ProfileQuery = Record<string, unknown> & { limit?: number };
+
+// Shallow wire type. Items are Array<Record<string, unknown>> (not the deep
+// Serialized<…> mapped type) to avoid TS2589 "excessively deep" through
+// useFetch's own generic machinery under the consumer apps' stricter typecheck;
+// we cast once to ProfileFeedItem[] at the `items` boundary callers read.
+interface ProfileFeedResponse { items: Array<Record<string, unknown>>; nextCursor?: string | null }
+
+export function useProfileContent(username: string, query: Ref<ProfileQuery> | ComputedRef<ProfileQuery>) {
+  const toast = useToast();
+
+  const endpoint = `/api/users/${username}/content`;
+  // @ts-ignore TS2589: parameterising useFetch with the deep Serialized type blows
+  // the instantiation depth under the consumer apps' stricter typecheck. Runtime is
+  // unaffected; `data` is read through the typed `page` computed below.
+  const { data, pending } = useFetch(endpoint, { query, watch: [query] });
+  const page = computed<ProfileFeedResponse | null>(() => (data.value as ProfileFeedResponse | null) ?? null);
+
+  // Accumulator for load-more pages, kept separate from the useFetch payload so a
+  // tab switch cleanly replaces the list.
+  const extra = ref<Array<Record<string, unknown>>>([]);
+  const cursor = ref<string | null>(null);
+  const loadingMore = ref(false);
+  const exhausted = ref(false);
+
+  const items = computed<ProfileFeedItem[]>(
+    () => [...(page.value?.items ?? []), ...extra.value] as ProfileFeedItem[],
+  );
+
+  // Reset pagination whenever the tab/filter changes.
+  watch(query, () => {
+    extra.value = [];
+    cursor.value = null;
+    exhausted.value = false;
+  }, { deep: true });
+
+  const canLoadMore = computed(() => {
+    if (exhausted.value) return false;
+    // The next cursor is whatever the last load-more returned, else the first page's.
+    return (cursor.value ?? page.value?.nextCursor ?? null) != null;
+  });
+
+  async function loadMore(): Promise<void> {
+    if (loadingMore.value || !canLoadMore.value) return;
+    const next = cursor.value ?? page.value?.nextCursor ?? null;
+    if (!next) return;
+    loadingMore.value = true;
+    try {
+      const res = await $fetch<ProfileFeedResponse>(endpoint, {
+        query: { ...query.value, cursor: next },
+      });
+      extra.value.push(...res.items);
+      cursor.value = res.nextCursor ?? null;
+      if (!res.nextCursor) exhausted.value = true;
+    } catch {
+      toast.error('Failed to load more');
+    } finally {
+      loadingMore.value = false;
+    }
+  }
+
+  return { items, pending, loadMore, canLoadMore, loadingMore };
+}

package/composables/useSanitize.ts

@@ -174,15 +174,49 @@ const RICH_URL_ATTRS = new Set(['href', 'src', 'xlink:href']);
 // CSS constructs that can fetch, exfiltrate, or execute — stripped per-declaration.
 const STYLE_DECL_BLOCKLIST = /expression\s*\(|javascript:|vbscript:|behavior\s*:|-moz-binding|@import|url\s*\(/i;
 
-function sanitizeStyleAttr(value: string): string {
+// Color neutralization (opt-in, for dark-mode-safe author HTML). A declaration of
+// one of these properties whose value is a HARDCODED color literal (hex / rgb()/
+// hsl() / common named) is dropped so the themed `.cpub-md-html` baseline shows
+// through — but theme-adaptive values (var(), currentColor, inherit, transparent)
+// are KEPT, so an author who writes `color: var(--text)` is respected.
+const COLOR_PROPS = new Set(['color', 'background', 'background-color', 'border-color', 'outline-color']);
+const LITERAL_COLOR = /#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?)\s*\(|\b(?:white|black|red|green|blue|yellow|orange|purple|pink|gray|grey|silver|gold|maroon|navy|teal|olive|lime|aqua|cyan|magenta|brown|beige|ivory|crimson|coral|salmon|khaki|indigo|violet)\b/i;
+const ADAPTIVE_COLOR = /var\(|currentcolor|inherit|transparent|initial|unset/i;
+
+function isClashingColorDecl(decl: string): boolean {
+  const ci = decl.indexOf(':');
+  if (ci <= 0) return false;
+  const prop = decl.slice(0, ci).trim().toLowerCase();
+  if (!COLOR_PROPS.has(prop)) return false;
+  const val = decl.slice(ci + 1);
+  if (ADAPTIVE_COLOR.test(val)) return false;
+  return LITERAL_COLOR.test(val);
+}
+
+function sanitizeStyleAttr(value: string, neutralizeColors = false): string {
   return value
     .split(';')
-    .filter((decl) => decl.trim() && !STYLE_DECL_BLOCKLIST.test(decl))
+    .filter((decl) => {
+      if (!decl.trim() || STYLE_DECL_BLOCKLIST.test(decl)) return false;
+      if (neutralizeColors && isClashingColorDecl(decl)) return false;
+      return true;
+    })
     .join(';');
 }
 
+export interface SanitizeRichOptions {
+  /**
+   * Drop inline hardcoded color/background literals so the themed render baseline
+   * (dark-safe) shows through. Theme-adaptive values (var(), currentColor) are
+   * kept. Off by default (general-purpose rendering preserves author colors);
+   * on for the contest "Full HTML" fields so a pasted light-mode document stays
+   * readable in dark mode.
+   */
+  neutralizeColors?: boolean;
+}
+
 /** Sanitize author HTML for "full HTML" rendering — permissive but script-free. */
-export function sanitizeRichHtml(html: string): string {
+export function sanitizeRichHtml(html: string, opts: SanitizeRichOptions = {}): string {
   if (!html || typeof html !== 'string') return '';
 
   let result = html.replace(/<!--[\s\S]*?-->/g, '');
@@ -219,7 +253,7 @@ export function sanitizeRichHtml(html: string): string {
         if (RICH_URL_ATTRS.has(name) && !isSafeUrl(value)) continue;
 
         if (name === 'style') {
-          const cleaned = sanitizeStyleAttr(value);
+          const cleaned = sanitizeStyleAttr(value, opts.neutralizeColors);
           if (cleaned) safeAttrs.push(`style="${escapeAttrValue(cleaned)}"`);
           continue;
         }

package/composables/useScrollSpy.ts

@@ -0,0 +1,87 @@
+/**
+ * useScrollSpy — TOC scroll-spy (active-heading highlight) + smooth scroll.
+ *
+ * Consolidates two divergent, each-buggy copies of the same IntersectionObserver
+ * pattern: ProjectView.vue (which never re-observed, so the highlight went stale
+ * when content changed) and the docs viewer (which re-observed but leaked an
+ * observer every time because its instance was function-local and never
+ * disconnected). This single source:
+ *   - re-observes whenever `source` changes (fixes the stale highlight), and
+ *   - disconnects the previous observer before each re-observe and on unmount
+ *     (fixes the leak).
+ *
+ * Element discovery and `rootMargin` stay per-surface (one finds elements by TOC
+ * id, the other by CSS selector; the active band differs), so callers pass those
+ * in. `scrollTo` honours prefers-reduced-motion (the docs viewer uses native
+ * anchor links instead and simply ignores it).
+ */
+import { onMounted, onUnmounted, ref, watch, nextTick, type Ref, type WatchSource } from 'vue';
+
+export interface UseScrollSpyOptions {
+  /** Resolve the heading elements to observe. Called on mount + on each `source` change. */
+  getHeadingElements: () => HTMLElement[];
+  /** Reactive trigger; when it changes, the observer is rebuilt (e.g. the TOC array or rendered page). */
+  source: WatchSource;
+  /** IntersectionObserver rootMargin — the active band, tuned per surface. */
+  rootMargin?: string;
+}
+
+export interface UseScrollSpy {
+  /** Id of the heading currently in the active band (or set by scrollTo). */
+  activeId: Ref<string>;
+  /** Smooth-scroll to a heading by id and mark it active (honours reduced-motion). */
+  scrollTo: (id: string) => void;
+}
+
+const DEFAULT_ROOT_MARGIN = '-80px 0px -70% 0px';
+
+export function useScrollSpy(options: UseScrollSpyOptions): UseScrollSpy {
+  const activeId = ref('');
+  let observer: IntersectionObserver | null = null;
+
+  function observe(): void {
+    if (typeof IntersectionObserver === 'undefined') return; // SSR / unsupported
+    observer?.disconnect(); // never leak the previous observer
+    const els = options.getHeadingElements();
+    if (!els.length) {
+      observer = null;
+      return;
+    }
+    observer = new IntersectionObserver(
+      (entries) => {
+        // Topmost heading in the band wins (entries arrive in document order).
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            activeId.value = entry.target.id;
+            break;
+          }
+        }
+      },
+      { rootMargin: options.rootMargin ?? DEFAULT_ROOT_MARGIN, threshold: 0 },
+    );
+    for (const el of els) observer.observe(el);
+  }
+
+  function scrollTo(id: string): void {
+    const el = document.getElementById(id);
+    if (!el) return;
+    // CSS scroll-behavior is reduced-motion-gated, but the JS `smooth` option
+    // ignores that, so honour the preference explicitly.
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    el.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' });
+    activeId.value = id;
+  }
+
+  let stopWatch: (() => void) | null = null;
+  onMounted(() => {
+    // immediate → initial observe after first paint; subsequent → re-observe on change.
+    stopWatch = watch(options.source, () => nextTick(observe), { immediate: true });
+  });
+  onUnmounted(() => {
+    stopWatch?.();
+    observer?.disconnect();
+    observer = null;
+  });
+
+  return { activeId, scrollTo };
+}

package/layouts/admin.vue

@@ -1,9 +1,27 @@
 <script setup lang="ts">
 const { isAdmin } = useAuth();
-const { admin: adminEnabled, layoutEngine } = useFeatures();
+const { admin: adminEnabled, layoutEngine, publicApi } = useFeatures();
 const runtimeConfig = useRuntimeConfig();
 const siteName = computed(() => (runtimeConfig.public.siteName as string) || 'CommonPub');
 
+// Each nav link is gated on the permission key its target route enforces via
+// requirePermission (verified against the server routes). With the RBAC flag
+// OFF, useCan returns true for admins (admin floor) and false otherwise, so the
+// visible chrome is unchanged today; flipping the flag later drives the UI.
+const canDashboard = useCan('audit.read'); // /admin → /api/admin/stats
+const canUsers = useCan('users.read'); // /admin/users
+const canRoles = useCan('roles.manage'); // /admin/roles
+const canContent = useCan('content.moderate'); // /admin/content
+const canCategories = useCan('categories.manage'); // /admin/categories + video-categories
+const canReports = useCan('reports.review'); // /admin/reports
+const canAudit = useCan('audit.read'); // /admin/audit
+const canTheme = useCan('theme.manage'); // /admin/theme
+const canLayout = useCan('layout.manage'); // /admin/homepage + /admin/layouts
+const canNavigation = useCan('navigation.manage'); // /admin/navigation
+const canSettings = useCan('settings.manage'); // /admin/features + /admin/settings
+const canFederation = useCan('federation.manage'); // /admin/federation
+const canApiKeys = useCan('apikeys.manage'); // /admin/api-keys
+
 // 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.
@@ -57,52 +75,56 @@ const { desktopCollapsed, mobileOpen, toggleDesktop, toggleMobile, closeMobile }
             "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">
+          <NuxtLink v-if="canDashboard" 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">
+          <NuxtLink v-if="canUsers" 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/roles" class="admin-nav-link" :title="desktopCollapsed ? 'Roles' : undefined" @click="closeMobile">
+          <NuxtLink v-if="canRoles" to="/admin/roles" class="admin-nav-link" :title="desktopCollapsed ? 'Roles' : undefined" @click="closeMobile">
             <i class="fa-solid fa-user-shield"></i><span class="admin-nav-label">Roles</span>
           </NuxtLink>
-          <NuxtLink to="/admin/content" class="admin-nav-link" :title="desktopCollapsed ? 'Content' : undefined" @click="closeMobile">
+          <NuxtLink v-if="canContent" 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">
+          <NuxtLink v-if="canCategories" 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">
+          <NuxtLink v-if="canCategories" to="/admin/video-categories" class="admin-nav-link" :title="desktopCollapsed ? 'Video Categories' : undefined" @click="closeMobile">
+            <i class="fa-solid fa-film"></i><span class="admin-nav-label">Video Categories</span>
+          </NuxtLink>
+          <NuxtLink v-if="canReports" 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">
+          <NuxtLink v-if="canAudit" 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">
+          <NuxtLink v-if="canTheme" 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">
+          <NuxtLink v-if="canLayout" 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">
+          <!-- Layouts editor — gated on layoutEngine feature flag (CLAUDE.md rule #2)
+               AND layout.manage. 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 && canLayout" 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">
+          <NuxtLink v-if="canNavigation" 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">
+          <NuxtLink v-if="canSettings" 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">
+          <NuxtLink v-if="canFederation" 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">
+          <NuxtLink v-if="publicApi && canApiKeys" 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">
+          <NuxtLink v-if="canSettings" 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>