@commonpub/layer 0.80.0 → 0.82.0

package/components/ImageCropperModal.vue

@@ -256,10 +256,15 @@ function apply(): void {
   border: var(--border-width-default, 2px) dashed var(--accent);
 }
 
-/* Style vue-advanced-cropper internals to the design system. */
-.cpub-cropper :deep(.vue-advanced-cropper__background),
+/* Crop scrim: a theme-INDEPENDENT dark overlay so the crop bounds read clearly
+   on every theme. (`--color-surface-scrim` is near-white in light themes, which
+   washed the bounds out — a cropper surround must always darken.) The area
+   outside the crop frame is dimmed; the crop window stays bright. */
+.cpub-cropper :deep(.vue-advanced-cropper__background) {
+  background: #1a1a1a;
+}
 .cpub-cropper :deep(.vue-advanced-cropper__foreground) {
-  background: var(--color-surface-scrim, rgba(0, 0, 0, 0.55));
+  background: rgba(0, 0, 0, 0.6);
 }
 /* Belt-and-suspenders with handlers:{}/lines:{}: never show the resize chrome. */
 .cpub-cropper :deep(.vue-line-wrapper),

package/components/contest/ContestHero.vue

@@ -239,6 +239,10 @@ const dateRange = computed<string>(() => {
 /* ── BANNER BAND ── full-width, clean, like other content pages' hero banner. */
 .cpub-hero-banner {
   width: 100%;
+  /* Match the 4:1 upload crop so the banner shows exactly as framed (WYSIWYG)
+     instead of being re-cropped by a fixed height. */
+  aspect-ratio: 4 / 1;
+  max-height: 360px;
   background: var(--surface2);
   border-bottom: var(--border-width-default) solid var(--border);
   overflow: hidden;
@@ -246,9 +250,8 @@ const dateRange = computed<string>(() => {
 .cpub-hero-banner img {
   display: block;
   width: 100%;
-  max-height: 300px;
+  height: 100%;
   object-fit: cover;
-  margin: 0 auto;
 }
 
 /* ── HERO BODY ── the contest's dark, patterned section. */
@@ -318,7 +321,7 @@ const dateRange = computed<string>(() => {
 @media (max-width: 768px) {
   .cpub-hero-body { padding: 32px 0; }
   .cpub-hero-inner { padding: 0 16px; }
-  .cpub-hero-banner img { max-height: 200px; }
+  .cpub-hero-banner { max-height: 200px; }
   .cpub-hero-title { font-size: 24px; }
   .cpub-hero-meta { gap: 10px; }
 }

package/components/contest/ContestSidebar.vue

@@ -4,6 +4,8 @@ import type { Serialized, ContestDetail } from '@commonpub/server';
 const props = defineProps<{
   contest: Serialized<ContestDetail> | null;
   isOwner?: boolean;
+  /** Viewer can edit this contest (owner / editor / contest.manage). Shows Edit. */
+  canManage?: boolean;
   /** True when the viewer is an accepted, non-guest judge able to score. */
   canJudge?: boolean;
 }>();
@@ -89,7 +91,7 @@ function statusClass(status: string): string {
       </div>
     </div>
 
-    <NuxtLink v-if="isOwner" :to="`/contests/${contest?.slug}/edit`" class="cpub-btn cpub-sb-link">
+    <NuxtLink v-if="canManage || isOwner" :to="`/contests/${contest?.slug}/edit`" class="cpub-btn cpub-sb-link">
       <i class="fa-solid fa-pen-to-square"></i> Edit Contest
     </NuxtLink>
 

package/components/contest/ContestStakeholderManager.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ContestStakeholderItem } from '@commonpub/server';
+import type { StakeholderRole } from '@commonpub/schema';
 
 const props = defineProps<{ contestSlug: string }>();
 
@@ -12,8 +13,12 @@ const searchQuery = ref('');
 const searchResults = ref<Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>>([]);
 const searching = ref(false);
 const adding = ref(false);
+// Role applied to the next person added.
+const addRole = ref<StakeholderRole>('reviewer');
 let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
+const roleLabel = (r: StakeholderRole): string => (r === 'editor' ? 'Editor' : 'Reviewer');
+
 function handleSearch(): void {
   if (searchTimeout) clearTimeout(searchTimeout);
   if (!searchQuery.value || searchQuery.value.length < 2) { searchResults.value = []; return; }
@@ -31,36 +36,46 @@ function handleSearch(): void {
   }, 300);
 }
 
-async function addStakeholder(userId: string): Promise<void> {
+async function grant(userId: string, role: StakeholderRole): Promise<void> {
   adding.value = true;
   try {
-    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId } });
-    toast.success('Reviewer added');
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId, role } });
+    toast.success(`${roleLabel(role)} added`);
     searchQuery.value = '';
     searchResults.value = [];
     await refresh();
   } catch {
-    toast.error('Failed to add reviewer');
+    toast.error(`Failed to add ${roleLabel(role).toLowerCase()}`);
   } finally {
     adding.value = false;
   }
 }
 
+async function changeRole(userId: string, role: StakeholderRole): Promise<void> {
+  try {
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId, role } });
+    toast.success(`Role changed to ${roleLabel(role)}`);
+    await refresh();
+  } catch {
+    toast.error('Failed to change role');
+  }
+}
+
 async function removeStakeholder(userId: string): Promise<void> {
-  if (!confirm('Remove this reviewer’s access?')) return;
+  if (!confirm('Remove this person’s access to the contest?')) return;
   try {
     await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders/${userId}`, { method: 'DELETE' });
-    toast.success('Reviewer removed');
+    toast.success('Access removed');
     await refresh();
   } catch {
-    toast.error('Failed to remove reviewer');
+    toast.error('Failed to remove access');
   }
 }
 </script>
 
 <template>
   <div class="cpub-sh">
-    <p class="cpub-sh-hint">Reviewers can view this contest (even while private/unpublished) but can't edit it or judge.</p>
+    <p class="cpub-sh-hint">Reviewers can view this contest (even while private/unpublished) but can't edit or judge. Editors can fully edit this contest. Neither gets any access to the rest of the site.</p>
     <div v-if="stakeholders?.length" class="cpub-sh-list">
       <div v-for="s in stakeholders" :key="s.id" class="cpub-sh-row">
         <NuxtLink :to="`/u/${s.userUsername}`" class="cpub-sh-link">
@@ -70,23 +85,38 @@ async function removeStakeholder(userId: string): Promise<void> {
           </span>
           <span class="cpub-sh-name">{{ s.userName }}</span>
         </NuxtLink>
+        <select
+          class="cpub-sh-role"
+          :value="s.role"
+          :aria-label="`Role for ${s.userName}`"
+          @change="changeRole(s.userId, ($event.target as HTMLSelectElement).value as StakeholderRole)"
+        >
+          <option value="reviewer">Reviewer</option>
+          <option value="editor">Editor</option>
+        </select>
         <button class="cpub-sh-remove" :aria-label="`Remove ${s.userName}`" @click="removeStakeholder(s.userId)">
           <i class="fa-solid fa-xmark"></i>
         </button>
       </div>
     </div>
-    <p v-else class="cpub-sh-empty">No reviewers yet.</p>
+    <p v-else class="cpub-sh-empty">No collaborators yet.</p>
 
     <div class="cpub-sh-search">
-      <input
-        v-model="searchQuery"
-        class="cpub-sh-input"
-        placeholder="Search users by name or username..."
-        aria-label="Search users to add as reviewers"
-        @input="handleSearch"
-      />
+      <div class="cpub-sh-search-row">
+        <input
+          v-model="searchQuery"
+          class="cpub-sh-input"
+          placeholder="Search users by name or username..."
+          aria-label="Search users to add as a collaborator"
+          @input="handleSearch"
+        />
+        <select v-model="addRole" class="cpub-sh-role" aria-label="Role to grant">
+          <option value="reviewer">Reviewer</option>
+          <option value="editor">Editor</option>
+        </select>
+      </div>
       <div v-if="searchResults.length" class="cpub-sh-dropdown">
-        <button v-for="u in searchResults" :key="u.id" class="cpub-sh-option" :disabled="adding" @click="addStakeholder(u.id)">
+        <button v-for="u in searchResults" :key="u.id" class="cpub-sh-option" :disabled="adding" @click="grant(u.id, addRole)">
           <span class="cpub-sh-av cpub-sh-av-sm">
             <img v-if="u.avatarUrl" :src="u.avatarUrl" :alt="u.displayName || u.username" />
             <span v-else>{{ (u.displayName || u.username).charAt(0) }}</span>
@@ -110,11 +140,14 @@ async function removeStakeholder(userId: string): Promise<void> {
 .cpub-sh-av img { width: 100%; height: 100%; object-fit: cover; }
 .cpub-sh-av-sm { width: 20px; height: 20px; font-size: 8px; }
 .cpub-sh-name { font-size: 12px; font-weight: 600; }
+.cpub-sh-role { font-size: 11px; padding: 4px 6px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; flex-shrink: 0; }
+.cpub-sh-role:focus { border-color: var(--accent); }
 .cpub-sh-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 6px; min-height: 28px; }
 .cpub-sh-remove:hover { color: var(--red); }
 .cpub-sh-empty { font-size: 12px; color: var(--text-faint); font-style: italic; margin-bottom: 12px; }
 .cpub-sh-search { position: relative; }
-.cpub-sh-input { font-size: 12px; padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; width: 100%; }
+.cpub-sh-search-row { display: flex; gap: 8px; }
+.cpub-sh-input { font-size: 12px; padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; flex: 1; min-width: 0; }
 .cpub-sh-input:focus { border-color: var(--accent); }
 .cpub-sh-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); margin-top: 2px; max-height: 200px; overflow-y: auto; }
 .cpub-sh-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: none; border: none; width: 100%; text-align: left; cursor: pointer; }

package/components/hub/HubHero.vue

@@ -62,7 +62,9 @@ const isCompanyHub = computed(() => hubType.value === 'company');
 .cpub-hub-hero { position: relative; overflow: hidden; }
 
 .cpub-hub-banner {
-  height: 180px;
+  /* Match the 4:1 upload crop so the banner shows exactly as framed (WYSIWYG). */
+  aspect-ratio: 4 / 1;
+  max-height: 320px;
   background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 50%, var(--accent-border) 100%);
   position: relative;
   overflow: hidden;
@@ -177,7 +179,7 @@ const isCompanyHub = computed(() => hubType.value === 'company');
 }
 
 @media (max-width: 640px) {
-  .cpub-hub-banner { height: 120px; }
+  .cpub-hub-banner { max-height: 160px; }
   .cpub-hub-meta-inner { flex-direction: column; padding: 0 16px; }
   .cpub-hub-icon { margin-top: -24px; width: 56px; height: 56px; font-size: 22px; }
   .cpub-hub-name { font-size: 1.25rem; }

package/composables/useAuth.ts

@@ -23,6 +23,9 @@ export interface ClientAuthSession {
 interface AuthResponse {
   user: ClientAuthUser | null;
   session: ClientAuthSession | null;
+  /** Effective RBAC permission grants (advisory — server enforces). */
+  permissions?: string[];
+  roleKeys?: string[];
 }
 
 // `$fetch<T>(url, options)` instantiates Nuxt's NitroFetchRequest generic
@@ -49,6 +52,10 @@ async function authGet(url: string): Promise<AuthResponse | null> {
 export function useAuth() {
   const user = useState<ClientAuthUser | null>('auth-user', () => null);
   const session = useState<ClientAuthSession | null>('auth-session', () => null);
+  // Effective RBAC permission grants for the current user (advisory, UX-only —
+  // the server is always the enforcement boundary). Populated by refreshSession.
+  const permissions = useState<string[]>('auth-permissions', () => []);
+  const roleKeys = useState<string[]>('auth-role-keys', () => []);
 
   const isAuthenticated = computed(() => !!user.value);
   const isAdmin = computed(() => user.value?.role === 'admin');
@@ -69,6 +76,8 @@ export function useAuth() {
     await authPost('/api/auth/sign-out', {});
     user.value = null;
     session.value = null;
+    permissions.value = [];
+    roleKeys.value = [];
     await navigateTo('/');
   }
 
@@ -84,6 +93,8 @@ export function useAuth() {
       // (a logged-out user gets `{ user: null }`), so mirror it exactly.
       user.value = data?.user ?? null;
       session.value = data?.session ?? null;
+      permissions.value = data?.permissions ?? [];
+      roleKeys.value = data?.roleKeys ?? [];
     } catch {
       // A *thrown* error means we couldn't reach /api/me (network blip, 5xx, a
       // slow/overloaded server timing out). That is NOT evidence the session is
@@ -96,6 +107,8 @@ export function useAuth() {
   return {
     user: readonly(user),
     session: readonly(session),
+    permissions: readonly(permissions),
+    roleKeys: readonly(roleKeys),
     isAuthenticated,
     isAdmin,
     signIn,

package/composables/useCan.ts

@@ -0,0 +1,23 @@
+/**
+ * Client-side permission check (UX only — the server enforces via
+ * `requirePermission`). Mirrors `hasPermissionPure` (@commonpub/auth): admin
+ * floor → `*` → exact match → `<prefix>.*` segment wildcard.
+ *
+ *   const canModerate = useCan('content.moderate')
+ *   <button v-if="canModerate">…</button>
+ *
+ * Never gate real access on this alone — always have a server guard behind it.
+ */
+export function useCan(key: string): ComputedRef<boolean> {
+  const { isAdmin, permissions } = useAuth();
+  return computed(() => {
+    // Admin floor — admins pass everything (their resolved set is empty server-side).
+    if (isAdmin.value) return true;
+    const granted = permissions.value;
+    if (!granted.length) return false;
+    if (granted.includes('*')) return true;
+    if (granted.includes(key)) return true;
+    const prefix = key.includes('.') ? key.slice(0, key.indexOf('.')) : null;
+    return prefix ? granted.includes(`${prefix}.*`) : false;
+  });
+}

package/layouts/admin.vue

@@ -63,6 +63,9 @@ const { desktopCollapsed, mobileOpen, toggleDesktop, toggleMobile, closeMobile }
           <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/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">
             <i class="fa-solid fa-newspaper"></i><span class="admin-nav-label">Content</span>
           </NuxtLink>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.80.0",
+  "version": "0.82.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,16 +55,16 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.22.1",
-    "@commonpub/protocol": "0.13.0",
+    "@commonpub/editor": "0.7.12",
     "@commonpub/learning": "0.5.2",
+    "@commonpub/protocol": "0.13.0",
+    "@commonpub/server": "2.89.0",
     "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/schema": "0.44.0",
-    "@commonpub/server": "2.88.0",
+    "@commonpub/docs": "0.6.3",
     "@commonpub/ui": "0.13.1",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/editor": "0.7.12"
+    "@commonpub/schema": "0.45.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/roles.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import type { RoleWithPermissions } from '@commonpub/server';
+
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: () => `Roles, ${useSiteName()}` });
+
+const toast = useToast();
+const { extract: extractError } = useApiError();
+const { rbac: rbacEnabled, features } = useFeatures();
+
+const { data: roles, refresh } = await useFetch<RoleWithPermissions[]>('/api/admin/roles');
+const { data: catalog } = await useFetch<string[]>('/api/admin/permissions');
+
+// --- Master RBAC switch (configure-then-activate) ---
+// Roles can be staged while RBAC is off; flipping the flag activates them
+// instantly (and is a reversible kill-switch). Writes the DB feature override
+// via /api/admin/features (needs `settings.manage`).
+const togglingRbac = ref(false);
+
+async function setRbac(enabled: boolean): Promise<void> {
+  if (
+    enabled &&
+    !confirm(
+      'Enable RBAC now? Role permissions take effect immediately: any user with the staff role becomes a moderator and custom roles activate. Admins keep full access. You can disable it again at any time.',
+    )
+  ) {
+    return;
+  }
+  togglingRbac.value = true;
+  try {
+    await ($fetch as Function)('/api/admin/features', { method: 'PUT', body: { overrides: { rbac: enabled } } });
+    // Update the shared reactive flag state so the banner reflects it at once.
+    features.value = { ...features.value, rbac: enabled };
+    toast.success(enabled ? 'RBAC enabled, role permissions are now live' : 'RBAC disabled, back to admin-only');
+  } catch (err) {
+    toast.error(extractError(err));
+  } finally {
+    togglingRbac.value = false;
+  }
+}
+
+// Group the flat permission catalog by first segment for a tidy editor.
+const grouped = computed<Record<string, string[]>>(() => {
+  const out: Record<string, string[]> = {};
+  for (const key of catalog.value ?? []) {
+    const group = key === '*' ? 'global' : key.includes('.') ? key.slice(0, key.indexOf('.')) : key;
+    (out[group] ??= []).push(key);
+  }
+  return out;
+});
+
+// --- Edit existing role permissions ---
+const editingId = ref<string | null>(null);
+const editPerms = ref<Set<string>>(new Set());
+const editName = ref('');
+const savingEdit = ref(false);
+
+function startEdit(role: RoleWithPermissions): void {
+  editingId.value = role.id;
+  editName.value = role.name;
+  editPerms.value = new Set(role.permissions);
+}
+function cancelEdit(): void {
+  editingId.value = null;
+  editPerms.value = new Set();
+}
+function toggleEditPerm(key: string): void {
+  if (editPerms.value.has(key)) editPerms.value.delete(key);
+  else editPerms.value.add(key);
+  editPerms.value = new Set(editPerms.value);
+}
+async function saveEdit(role: RoleWithPermissions): Promise<void> {
+  savingEdit.value = true;
+  try {
+    await ($fetch as Function)(`/api/admin/roles/${role.id}`, {
+      method: 'PUT',
+      body: { name: editName.value, permissions: [...editPerms.value] },
+    });
+    toast.success('Role updated');
+    cancelEdit();
+    await refresh();
+  } catch (err) {
+    toast.error(extractError(err));
+  } finally {
+    savingEdit.value = false;
+  }
+}
+
+async function removeRole(role: RoleWithPermissions): Promise<void> {
+  if (!confirm(`Delete the "${role.name}" role? Users lose its permissions.`)) return;
+  try {
+    await ($fetch as Function)(`/api/admin/roles/${role.id}`, { method: 'DELETE' });
+    toast.success('Role deleted');
+    await refresh();
+  } catch (err) {
+    toast.error(extractError(err));
+  }
+}
+
+// --- Create a new custom role ---
+const showCreate = ref(false);
+const newKey = ref('');
+const newName = ref('');
+const newDesc = ref('');
+const newPerms = ref<Set<string>>(new Set());
+const creating = ref(false);
+
+function toggleNewPerm(key: string): void {
+  if (newPerms.value.has(key)) newPerms.value.delete(key);
+  else newPerms.value.add(key);
+  newPerms.value = new Set(newPerms.value);
+}
+async function createRole(): Promise<void> {
+  if (!newKey.value || !newName.value) { toast.error('Key and name are required'); return; }
+  creating.value = true;
+  try {
+    await ($fetch as Function)('/api/admin/roles', {
+      method: 'POST',
+      body: { key: newKey.value, name: newName.value, description: newDesc.value || null, permissions: [...newPerms.value] },
+    });
+    toast.success('Role created');
+    showCreate.value = false;
+    newKey.value = ''; newName.value = ''; newDesc.value = ''; newPerms.value = new Set();
+    await refresh();
+  } catch (err) {
+    toast.error(extractError(err));
+  } finally {
+    creating.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-roles">
+    <div class="cpub-roles-head">
+      <h1 class="cpub-admin-title">Roles &amp; Permissions</h1>
+      <button class="cpub-btn cpub-btn-sm" @click="showCreate = !showCreate">
+        <i class="fa-solid fa-plus"></i> New role
+      </button>
+    </div>
+
+    <!-- Master RBAC switch — off: stage roles then activate; on: live + kill-switch. -->
+    <div v-if="!rbacEnabled" class="cpub-rbac-banner cpub-rbac-banner--off">
+      <div class="cpub-rbac-banner-text">
+        <strong>RBAC is off.</strong> These role permissions have no effect yet, the instance runs
+        admin-only. Stage your roles and assignments here, then turn RBAC on to activate them all at once.
+      </div>
+      <button class="cpub-btn cpub-btn-sm" :disabled="togglingRbac" @click="setRbac(true)">
+        <i class="fa-solid fa-toggle-on"></i> {{ togglingRbac ? 'Enabling...' : 'Enable RBAC' }}
+      </button>
+    </div>
+    <div v-else class="cpub-rbac-banner cpub-rbac-banner--on">
+      <div class="cpub-rbac-banner-text">
+        <strong>RBAC is enabled.</strong> Role permissions are live, staff is a moderator and custom
+        roles are active. Admins always keep full access.
+      </div>
+      <button class="cpub-btn cpub-btn-sm cpub-btn-ghost" :disabled="togglingRbac" @click="setRbac(false)">
+        <i class="fa-solid fa-toggle-off"></i> {{ togglingRbac ? 'Disabling...' : 'Disable' }}
+      </button>
+    </div>
+
+    <!-- Create form -->
+    <section v-if="showCreate" class="cpub-role-card cpub-role-create">
+      <h2 class="cpub-role-card-title">New custom role</h2>
+      <div class="cpub-role-fields">
+        <label class="cpub-field">
+          <span class="cpub-field-label">Key</span>
+          <input v-model="newKey" class="cpub-input" placeholder="e.g. moderator" />
+        </label>
+        <label class="cpub-field">
+          <span class="cpub-field-label">Name</span>
+          <input v-model="newName" class="cpub-input" placeholder="e.g. Moderator" />
+        </label>
+      </div>
+      <label class="cpub-field">
+        <span class="cpub-field-label">Description</span>
+        <input v-model="newDesc" class="cpub-input" placeholder="What this role is for" />
+      </label>
+      <div class="cpub-perm-groups">
+        <fieldset v-for="(keys, group) in grouped" :key="group" class="cpub-perm-group">
+          <legend class="cpub-perm-legend">{{ group }}</legend>
+          <label v-for="k in keys" :key="k" class="cpub-perm-check">
+            <input type="checkbox" :checked="newPerms.has(k)" @change="toggleNewPerm(k)" />
+            <span>{{ k }}</span>
+          </label>
+        </fieldset>
+      </div>
+      <div class="cpub-role-actions">
+        <button class="cpub-btn cpub-btn-sm" :disabled="creating" @click="createRole">
+          {{ creating ? 'Creating...' : 'Create role' }}
+        </button>
+        <button class="cpub-btn cpub-btn-sm cpub-btn-ghost" @click="showCreate = false">Cancel</button>
+      </div>
+    </section>
+
+    <!-- Role list -->
+    <div class="cpub-role-list">
+      <div v-for="role in roles ?? []" :key="role.id" class="cpub-role-card">
+        <div class="cpub-role-row">
+          <div class="cpub-role-meta">
+            <span class="cpub-role-name">{{ role.name }}</span>
+            <span class="cpub-role-key">{{ role.key }}</span>
+            <span v-if="role.isSystem" class="cpub-role-badge">system</span>
+          </div>
+          <div class="cpub-role-stats">
+            <span>{{ role.memberCount }} {{ role.memberCount === 1 ? 'user' : 'users' }}</span>
+            <button class="cpub-btn cpub-btn-xs" @click="editingId === role.id ? cancelEdit() : startEdit(role)">
+              {{ editingId === role.id ? 'Close' : 'Edit' }}
+            </button>
+            <button v-if="!role.isSystem" class="cpub-btn cpub-btn-xs cpub-btn-danger" @click="removeRole(role)">
+              Delete
+            </button>
+          </div>
+        </div>
+        <p v-if="role.description" class="cpub-role-desc">{{ role.description }}</p>
+        <div v-if="editingId !== role.id" class="cpub-role-perms">
+          <span v-if="role.permissions.includes('*')" class="cpub-perm-tag cpub-perm-tag-all">* full access</span>
+          <span v-for="p in role.permissions.filter((x) => x !== '*')" :key="p" class="cpub-perm-tag">{{ p }}</span>
+          <span v-if="!role.permissions.length" class="cpub-role-none">No permissions (entitlement tier only)</span>
+        </div>
+
+        <!-- Inline editor -->
+        <div v-else class="cpub-role-edit">
+          <label class="cpub-field">
+            <span class="cpub-field-label">Name</span>
+            <input v-model="editName" class="cpub-input" />
+          </label>
+          <div class="cpub-perm-groups">
+            <fieldset v-for="(keys, group) in grouped" :key="group" class="cpub-perm-group">
+              <legend class="cpub-perm-legend">{{ group }}</legend>
+              <label v-for="k in keys" :key="k" class="cpub-perm-check">
+                <input type="checkbox" :checked="editPerms.has(k)" @change="toggleEditPerm(k)" />
+                <span>{{ k }}</span>
+              </label>
+            </fieldset>
+          </div>
+          <div class="cpub-role-actions">
+            <button class="cpub-btn cpub-btn-sm" :disabled="savingEdit" @click="saveEdit(role)">
+              {{ savingEdit ? 'Saving...' : 'Save' }}
+            </button>
+            <button class="cpub-btn cpub-btn-sm cpub-btn-ghost" @click="cancelEdit">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+.cpub-roles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-3); }
+.cpub-rbac-banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-width-default) solid var(--border); margin-bottom: var(--space-5); }
+.cpub-rbac-banner-text { font-size: var(--text-sm); color: var(--text-dim); line-height: 1.6; flex: 1; min-width: 0; }
+.cpub-rbac-banner-text strong { color: var(--text); }
+.cpub-rbac-banner--off { background: var(--surface2); }
+.cpub-rbac-banner--on { background: var(--green-bg, var(--surface2)); border-color: var(--green-border, var(--accent)); }
+.cpub-rbac-banner .cpub-btn { flex-shrink: 0; }
+.cpub-role-list { display: flex; flex-direction: column; gap: var(--space-3); }
+.cpub-role-card { padding: var(--space-4); background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); }
+.cpub-role-create { margin-bottom: var(--space-5); }
+.cpub-role-card-title { font-size: var(--text-md); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
+.cpub-role-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
+.cpub-role-meta { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
+.cpub-role-name { font-weight: var(--font-weight-bold); }
+.cpub-role-key { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }
+.cpub-role-badge { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 1px 5px; border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
+.cpub-role-stats { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-dim); font-family: var(--font-mono); }
+.cpub-role-desc { font-size: var(--text-sm); color: var(--text-dim); margin: var(--space-2) 0 0; }
+.cpub-role-perms { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
+.cpub-perm-tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: var(--surface2); border: var(--border-width-default) solid var(--border); color: var(--text-dim); }
+.cpub-perm-tag-all { color: var(--accent); border-color: var(--accent); }
+.cpub-role-none { font-size: var(--text-xs); color: var(--text-faint); font-style: italic; }
+.cpub-role-edit, .cpub-role-fields { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
+.cpub-role-fields { flex-direction: row; }
+.cpub-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
+.cpub-field-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-dim); }
+.cpub-input { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; }
+.cpub-input:focus { border-color: var(--accent); }
+.cpub-perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
+.cpub-perm-group { border: var(--border-width-default) solid var(--border); padding: var(--space-2) var(--space-3); }
+.cpub-perm-legend { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-dim); padding: 0 var(--space-1); }
+.cpub-perm-check { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; padding: 2px 0; cursor: pointer; }
+.cpub-role-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
+.cpub-btn-xs { font-size: 10px; padding: 3px 8px; }
+.cpub-btn-ghost { background: none; }
+</style>

package/pages/admin/users.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { RoleWithPermissions } from '@commonpub/server';
+
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Users, Admin, ${useSiteName()}` });
 
@@ -9,6 +11,11 @@ const { data: users, refresh } = await useFetch('/api/admin/users', {
   query: computed(() => ({ search: search.value || undefined })),
 });
 
+// Custom (non-system) roles — for per-user assignment. Requires `roles.manage`;
+// useFetch won't crash the page if the viewer lacks it (data stays null).
+const { data: allRoles } = await useFetch<RoleWithPermissions[]>('/api/admin/roles');
+const customRoles = computed<RoleWithPermissions[]>(() => (allRoles.value ?? []).filter((r) => !r.isSystem));
+
 interface AdminUser {
   id: string;
   username: string;
@@ -39,6 +46,49 @@ async function changeRole(userId: string, role: string): Promise<void> {
   }
 }
 
+// --- Custom-role assignment (expand a row to edit a user's custom roles) ---
+const expandedUserId = ref<string | null>(null);
+const editingRoleIds = ref<Set<string>>(new Set());
+const savingRoles = ref(false);
+
+async function toggleRolesEditor(userId: string): Promise<void> {
+  if (expandedUserId.value === userId) {
+    expandedUserId.value = null;
+    return;
+  }
+  expandedUserId.value = userId;
+  editingRoleIds.value = new Set();
+  try {
+    const { roleIds } = await $fetch<{ roleIds: string[] }>(`/api/admin/users/${userId}/roles`);
+    editingRoleIds.value = new Set(roleIds);
+  } catch {
+    toast.error('Could not load this user’s roles');
+  }
+}
+
+function toggleRoleId(roleId: string): void {
+  const next = new Set(editingRoleIds.value);
+  if (next.has(roleId)) next.delete(roleId);
+  else next.add(roleId);
+  editingRoleIds.value = next;
+}
+
+async function saveRoles(userId: string): Promise<void> {
+  savingRoles.value = true;
+  try {
+    // Only custom role ids are sent; the system/primary role is the dropdown above.
+    const customIds = new Set(customRoles.value.map((r) => r.id));
+    const roleIds = [...editingRoleIds.value].filter((id) => customIds.has(id));
+    await $fetch(`/api/admin/users/${userId}/roles`, { method: 'PUT', body: { roleIds } });
+    toast.success('Custom roles updated');
+    expandedUserId.value = null;
+  } catch {
+    toast.error('Failed to update custom roles');
+  } finally {
+    savingRoles.value = false;
+  }
+}
+
 async function toggleStatus(userId: string, currentStatus: string): Promise<void> {
   const newStatus = currentStatus === 'active' ? 'suspended' : 'active';
   try {
@@ -78,13 +128,15 @@ async function deleteUser(userId: string, username: string): Promise<void> {
             <th>Username</th>
             <th>Email</th>
             <th>Role</th>
+            <th v-if="customRoles.length">Custom roles</th>
             <th>Status</th>
             <th>Joined</th>
             <th>Actions</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="u in userList" :key="u.id">
+          <template v-for="u in userList" :key="u.id">
+          <tr>
             <td>
               <NuxtLink :to="`/u/${u.username}`" class="admin-link">@{{ u.username }}</NuxtLink>
             </td>
@@ -98,6 +150,11 @@ async function deleteUser(userId: string, username: string): Promise<void> {
                 <option v-for="r in roles" :key="r" :value="r">{{ r }}</option>
               </select>
             </td>
+            <td v-if="customRoles.length">
+              <button class="admin-roles-btn" :aria-expanded="expandedUserId === u.id" @click="toggleRolesEditor(u.id)">
+                <i class="fa-solid fa-user-shield"></i> {{ expandedUserId === u.id ? 'Close' : 'Assign' }}
+              </button>
+            </td>
             <td>
               <button
                 class="admin-status-btn"
@@ -114,6 +171,21 @@ async function deleteUser(userId: string, username: string): Promise<void> {
               </button>
             </td>
           </tr>
+          <tr v-if="expandedUserId === u.id && customRoles.length" class="admin-roles-row">
+            <td :colspan="7">
+              <div class="admin-roles-editor">
+                <span class="admin-roles-label">Custom roles for @{{ u.username }}:</span>
+                <label v-for="r in customRoles" :key="r.id" class="admin-roles-check">
+                  <input type="checkbox" :checked="editingRoleIds.has(r.id)" @change="toggleRoleId(r.id)" />
+                  <span>{{ r.name }}</span>
+                </label>
+                <button class="admin-roles-save" :disabled="savingRoles" @click="saveRoles(u.id)">
+                  {{ savingRoles ? 'Saving...' : 'Save' }}
+                </button>
+              </div>
+            </td>
+          </tr>
+          </template>
         </tbody>
       </table>
     </div>
@@ -141,5 +213,13 @@ async function deleteUser(userId: string, username: string): Promise<void> {
 .admin-status-btn:hover { opacity: 0.8; }
 .admin-delete-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
 .admin-delete-btn:hover { color: var(--red); }
+.admin-roles-btn { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border: var(--border-width-default) solid var(--border2); background: var(--surface); color: var(--text-dim); cursor: pointer; }
+.admin-roles-btn:hover { border-color: var(--accent); color: var(--text); }
+.admin-roles-row td { background: var(--surface2); }
+.admin-roles-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 4px 0; }
+.admin-roles-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.admin-roles-check { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
+.admin-roles-save { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 3px 10px; border: var(--border-width-default) solid var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); cursor: pointer; margin-left: auto; }
+.admin-roles-save:disabled { opacity: 0.6; cursor: default; }
 .admin-empty { color: var(--text-faint); text-align: center; padding: 32px 0; }
 </style>

package/pages/contests/[slug]/edit.vue

@@ -17,6 +17,11 @@ const { data: contest, refresh, status: contestStatus } = useLazyFetch(`/api/con
 // broken link. Treat idle/pending as "loading", not "not found".
 const contestLoading = computed(() => contestStatus.value === 'idle' || contestStatus.value === 'pending');
 const isOwner = computed(() => isAdmin.value || !!(user.value?.id && contest.value?.createdById === user.value.id));
+// Can the viewer edit this contest? Owner, a per-contest `editor`, or a
+// `contest.manage` holder (server-computed `viewerCanManage`). Drives page access
+// + the editing surface. Owner-only surfaces (delete, managing collaborators)
+// stay gated on `isOwner`.
+const canManage = computed(() => isOwner.value || !!contest.value?.viewerCanManage);
 useSeoMeta({ title: () => `Edit: ${contest.value?.title ?? 'Contest'}, ${useSiteName()}` });
 
 const saving = ref(false);
@@ -327,7 +332,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
 </script>
 
 <template>
-  <div v-if="contest && !isOwner" class="cpub-not-found">
+  <div v-if="contest && !canManage" class="cpub-not-found">
     <p>You don't have permission to edit this contest.</p>
     <NuxtLink :to="`/contests/${slug}`" class="cpub-btn cpub-btn-sm">Back to Contest</NuxtLink>
   </div>
@@ -555,11 +560,11 @@ async function transitionStatus(newStatus: string): Promise<void> {
             </label>
           </div>
         </div>
-        <div class="cpub-subhead">
-          <h3 class="cpub-form-subtitle">Reviewers</h3>
+        <div v-if="isOwner" class="cpub-subhead">
+          <h3 class="cpub-form-subtitle">Collaborators</h3>
         </div>
-        <p class="cpub-form-hint">Reviewers can view this contest (even while it's private or in draft) without being a judge or an admin, view access scoped to this contest only. They can't edit or score entries.</p>
-        <ContestStakeholderManager :contest-slug="slug" />
+        <p v-if="isOwner" class="cpub-form-hint">Grant per-contest access scoped to this contest only, with no system-wide access. Reviewers can view it (even while private or in draft) but can't edit or score. Editors can fully edit this contest.</p>
+        <ContestStakeholderManager v-if="isOwner" :contest-slug="slug" />
       </section>
 
       <!-- Judge panel (single source of truth: contest_judges table) -->
@@ -620,7 +625,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
         </div>
       </section>
 
-      <section class="cpub-form-section cpub-danger-zone">
+      <section v-if="isOwner" class="cpub-form-section cpub-danger-zone">
         <h2 class="cpub-form-section-title cpub-danger-title">Danger Zone</h2>
         <div class="cpub-danger-row">
           <div>

package/pages/contests/[slug]/index.vue

@@ -23,6 +23,9 @@ const c = computed(() => contest.value);
 const entries = computed(() => apiEntriesData.value?.items ?? []);
 const judges = computed<ContestJudgeItem[]>(() => judgesData.value ?? []);
 const isOwner = computed(() => isAdmin.value || !!(user.value?.id && c.value?.createdById === user.value.id));
+// Can edit this contest (owner / per-contest editor / contest.manage holder).
+// Drives the Edit affordance; judge/collaborator management stays owner-only.
+const canManage = computed(() => isOwner.value || !!c.value?.viewerCanManage);
 
 // Judge state derives entirely from the contest_judges table (single source of
 // truth) — not the legacy `judges` jsonb column.
@@ -384,7 +387,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
           </div>
         </div>
 
-        <ContestSidebar :contest="c" :is-owner="isOwner" :can-judge="canJudge" @copy-link="copyLink" />
+        <ContestSidebar :contest="c" :is-owner="isOwner" :can-manage="canManage" :can-judge="canJudge" @copy-link="copyLink" />
       </div>
     </div>
   </div>

package/server/api/admin/permissions.get.ts

@@ -0,0 +1,14 @@
+import { PERMISSIONS } from '@commonpub/schema';
+
+// The grantable permission catalog — drives the role editor's checkbox list.
+// `*` and `admin.access` are the admin bypass: they're reserved to the `admin`
+// system role and stripped from every other role server-side (see
+// rbac/admin.ts sanitizeGrants), so we don't offer them in the editor (a
+// checkbox for them would silently never stick). Gated on `roles.manage`.
+const ADMIN_BYPASS_GRANTS = new Set(['*', 'admin.access']);
+
+export default defineEventHandler((event): string[] => {
+  requireFeature('admin');
+  requirePermission(event, 'roles.manage');
+  return PERMISSIONS.filter((p) => !ADMIN_BYPASS_GRANTS.has(p));
+});

package/server/api/admin/roles/[id]/index.delete.ts

@@ -0,0 +1,25 @@
+import { deleteRole } from '@commonpub/server';
+
+// Delete a custom role (system roles are protected). Cascades its grants +
+// user assignments via the FK.
+export default defineEventHandler(async (event): Promise<{ deleted: true }> => {
+  requireFeature('admin');
+  requirePermission(event, 'roles.manage');
+  const db = useDB();
+  const actor = requireAuth(event);
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  try {
+    await deleteRole(db, id, actor.id);
+  } catch (err) {
+    if (err instanceof Error && err.message === 'ROLE_NOT_FOUND') {
+      throw createError({ statusCode: 404, statusMessage: 'Role not found' });
+    }
+    if (err instanceof Error && err.message === 'ROLE_IS_SYSTEM') {
+      throw createError({ statusCode: 400, statusMessage: 'System roles cannot be deleted' });
+    }
+    throw err;
+  }
+  invalidateAllPermissions();
+  return { deleted: true };
+});

package/server/api/admin/roles/[id]/index.put.ts

@@ -0,0 +1,24 @@
+import { updateRole } from '@commonpub/server';
+import { updateRoleSchema } from '@commonpub/schema';
+
+// Edit a role's name/description/permissions (system roles included — e.g. tune
+// the staff moderator set). The admin role always keeps its `*` bypass.
+export default defineEventHandler(async (event): Promise<{ ok: true }> => {
+  requireFeature('admin');
+  requirePermission(event, 'roles.manage');
+  const db = useDB();
+  const actor = requireAuth(event);
+  const { id } = parseParams(event, { id: 'uuid' });
+  const input = await parseBody(event, updateRoleSchema);
+
+  try {
+    await updateRole(db, id, input, actor.id);
+  } catch (err) {
+    if (err instanceof Error && err.message === 'ROLE_NOT_FOUND') {
+      throw createError({ statusCode: 404, statusMessage: 'Role not found' });
+    }
+    throw err;
+  }
+  invalidateAllPermissions();
+  return { ok: true };
+});

package/server/api/admin/roles/index.get.ts

@@ -0,0 +1,10 @@
+import { listRolesWithPermissions } from '@commonpub/server';
+import type { RoleWithPermissions } from '@commonpub/server';
+
+// List all roles with their permission keys + member counts. Gated on
+// `roles.manage` (RBAC self-administration).
+export default defineEventHandler(async (event): Promise<RoleWithPermissions[]> => {
+  requireFeature('admin');
+  requirePermission(event, 'roles.manage');
+  return listRolesWithPermissions(useDB());
+});

package/server/api/admin/roles/index.post.ts

@@ -0,0 +1,27 @@
+import { createRole } from '@commonpub/server';
+import { createRoleSchema } from '@commonpub/schema';
+
+// Create a custom role. Gated on `roles.manage`. New grants take effect on the
+// next request (≤ cache TTL); invalidate the whole cache to be immediate.
+export default defineEventHandler(async (event): Promise<{ id: string }> => {
+  requireFeature('admin');
+  requirePermission(event, 'roles.manage');
+  const db = useDB();
+  const actor = requireAuth(event);
+  const input = await parseBody(event, createRoleSchema);
+
+  let result;
+  try {
+    result = await createRole(db, input, actor.id);
+  } catch (err) {
+    if (err instanceof Error && err.message === 'ROLE_KEY_TAKEN') {
+      throw createError({ statusCode: 409, statusMessage: 'A role with that key already exists' });
+    }
+    if (err instanceof Error && err.message === 'ROLE_KEY_RESERVED') {
+      throw createError({ statusCode: 400, statusMessage: 'That key is reserved for a system role' });
+    }
+    throw err;
+  }
+  invalidateAllPermissions();
+  return result;
+});

package/server/api/admin/users/[id]/role.put.ts

@@ -8,5 +8,24 @@ export default defineEventHandler(async (event): Promise<void> => {
   const { id } = parseParams(event, { id: 'uuid' });
   const input = await parseBody(event, adminUpdateRoleSchema);
 
-  return updateUserRole(db, id, input.role, admin.id);
+  // Minting an admin is admin-only: `users.manage` lets a custom role manage
+  // non-admin users, but must not be a backdoor to creating admins (which would
+  // turn `users.manage` into root). Promotion to the admin system role requires
+  // the admin floor itself.
+  if (input.role === 'admin') requirePermission(event, 'admin.access');
+
+  try {
+    await updateUserRole(db, id, input.role, admin.id);
+  } catch (err) {
+    if (err instanceof Error && err.message === 'LAST_ADMIN') {
+      throw createError({ statusCode: 400, statusMessage: 'Cannot demote the only admin account' });
+    }
+    if (err instanceof Error && err.message === 'User not found') {
+      throw createError({ statusCode: 404, statusMessage: 'User not found' });
+    }
+    throw err;
+  }
+  // The role change alters effective permissions — drop the cached set so the
+  // next request resolves fresh (cache lives in the layer; commit happened above).
+  invalidatePermissions(id);
 });

package/server/api/admin/users/[id]/roles.get.ts

@@ -0,0 +1,10 @@
+import { getUserRoleIds } from '@commonpub/server';
+
+// The role IDs a user currently holds (system + custom) — for the admin UI's
+// role assignment checkboxes.
+export default defineEventHandler(async (event): Promise<{ roleIds: string[] }> => {
+  requireFeature('admin');
+  requirePermission(event, 'roles.manage');
+  const { id } = parseParams(event, { id: 'uuid' });
+  return { roleIds: await getUserRoleIds(useDB(), id) };
+});

package/server/api/admin/users/[id]/roles.put.ts

@@ -0,0 +1,17 @@
+import { setUserCustomRoles } from '@commonpub/server';
+import { setUserRolesSchema } from '@commonpub/schema';
+
+// Replace a user's CUSTOM (non-system) role assignments. The system/primary role
+// is managed separately via role.put.ts; system role IDs here are ignored.
+export default defineEventHandler(async (event): Promise<{ ok: true }> => {
+  requireFeature('admin');
+  requirePermission(event, 'roles.manage');
+  const db = useDB();
+  const actor = requireAuth(event);
+  const { id } = parseParams(event, { id: 'uuid' });
+  const input = await parseBody(event, setUserRolesSchema);
+
+  await setUserCustomRoles(db, id, input.roleIds, actor.id);
+  invalidatePermissions(id);
+  return { ok: true };
+});

package/server/api/contests/[slug]/advance.post.ts

@@ -1,8 +1,9 @@
-import { getContestBySlug, advanceContestStage } from '@commonpub/server';
+import { getContestBySlug, advanceContestStage, isContestEditor } from '@commonpub/server';
 import { contestAdvanceSchema } from '@commonpub/schema';
 
 // Phase B2 — apply an advancement cut at a review stage (cull the cohort to top-N
-// or a manual pick, snapshot scores, advance to the next stage). Owner-gated.
+// or a manual pick, snapshot scores, advance to the next stage). Authorized for
+// the owner, a per-contest `editor`, or a `contest.manage` holder.
 export default defineEventHandler(async (event): Promise<{ advanced: boolean; advancedCount: number; eliminatedCount: number }> => {
   requireFeature('contests');
   const db = useDB();
@@ -13,10 +14,14 @@ export default defineEventHandler(async (event): Promise<{ advanced: boolean; ad
   const contest = await getContestBySlug(db, slug);
   if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
 
-  const result = await advanceContestStage(db, contest.id, user.id, input);
+  const canManage =
+    ownerOrPermission(event, contest.createdById, 'contest.manage') ||
+    (await isContestEditor(db, contest.id, user.id));
+
+  const result = await advanceContestStage(db, contest.id, user.id, input, canManage);
   if (!result.advanced) {
-    const owner = /owner/i.test(result.error ?? '');
-    throw createError({ statusCode: owner ? 403 : 400, statusMessage: result.error || 'Advancement failed' });
+    const denied = /authoriz|owner/i.test(result.error ?? '');
+    throw createError({ statusCode: denied ? 403 : 400, statusMessage: result.error || 'Advancement failed' });
   }
   return result;
 });

package/server/api/contests/[slug]/index.get.ts

@@ -1,4 +1,4 @@
-import { getContestBySlug, canViewContest } from '@commonpub/server';
+import { getContestBySlug, canViewContest, isContestEditor } from '@commonpub/server';
 import type { ContestDetail } from '@commonpub/server';
 
 export default defineEventHandler(async (event): Promise<ContestDetail> => {
@@ -13,5 +13,13 @@ export default defineEventHandler(async (event): Promise<ContestDetail> => {
   if (!(await canViewContest(db, contest, user))) {
     throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
   }
-  return contest;
+  // Per-request manage flag for the client (owner / editor / contest.manage).
+  // Server stays the enforcement boundary; this only drives UI affordances.
+  // Returned as a fresh object (not a mutation of the fetched row) so the
+  // per-viewer flag can never leak across requests if getContestBySlug is cached.
+  const viewerCanManage = user
+    ? ownerOrPermission(event, contest.createdById, 'contest.manage') ||
+      (await isContestEditor(db, contest.id, user.id))
+    : false;
+  return { ...contest, viewerCanManage };
 });

package/server/api/contests/[slug]/index.put.ts

@@ -1,4 +1,4 @@
-import { updateContest } from '@commonpub/server';
+import { updateContest, getContestBySlug, isContestEditor } from '@commonpub/server';
 import type { ContestDetail } from '@commonpub/server';
 import { updateContestSchema } from '@commonpub/schema';
 
@@ -9,9 +9,18 @@ export default defineEventHandler(async (event): Promise<ContestDetail> => {
   const { slug } = parseParams(event, { slug: 'string' });
   const input = await parseBody(event, updateContestSchema);
 
+  // Owner, a per-contest `editor` stakeholder, or a `contest.manage` holder may
+  // edit. The owner check inside updateContest covers the owner; pass canManage
+  // for the permission/editor paths (editor is also re-checked server-side).
+  const contest = await getContestBySlug(db, slug);
+  const canManage = contest
+    ? ownerOrPermission(event, contest.createdById, 'contest.manage') ||
+      (await isContestEditor(db, contest.id, user.id))
+    : false;
+
   let result;
   try {
-    result = await updateContest(db, slug, user.id, input);
+    result = await updateContest(db, slug, user.id, input, canManage);
   } catch (err) {
     if (err instanceof Error && err.message === 'SLUG_TAKEN') {
       throw createError({ statusCode: 409, statusMessage: 'That URL slug is already in use by another contest.' });

package/server/api/contests/[slug]/stakeholders/index.post.ts

@@ -1,11 +1,19 @@
 import { getContestBySlug, addContestStakeholder } from '@commonpub/server';
+import { stakeholderRoleSchema } from '@commonpub/schema';
 import { z } from 'zod';
 
-const addStakeholderSchema = z.object({ userId: z.string().uuid() });
+const addStakeholderSchema = z.object({
+  userId: z.string().uuid(),
+  // 'reviewer' (view-only, default) or 'editor' (full edit rights to THIS
+  // contest only). Only owner / contest.manage can add or promote, so an editor
+  // cannot mint more editors.
+  role: stakeholderRoleSchema.optional(),
+});
 
 /**
  * POST /api/contests/:slug/stakeholders
- * Grant a user view-only review access (contest owner or admin only).
+ * Grant a user per-contest access (reviewer = view-only, editor = full edit of
+ * this contest). Contest owner or a `contest.manage` holder only.
  */
 export default defineEventHandler(async (event) => {
   requireFeature('contests');
@@ -22,6 +30,7 @@ export default defineEventHandler(async (event) => {
 
   const body = await parseBody(event, addStakeholderSchema);
   const result = await addContestStakeholder(db, contest.id, body.userId, {
+    role: body.role,
     contestSlug: slug,
     contestTitle: contest.title,
     invitedBy: user.id,
@@ -29,5 +38,5 @@ export default defineEventHandler(async (event) => {
   if (!result.added) {
     throw createError({ statusCode: 400, statusMessage: result.error ?? 'Failed to add stakeholder' });
   }
-  return { added: true };
+  return { added: true, updated: result.updated ?? false };
 });

package/server/api/contests/[slug]/transition.post.ts

@@ -1,4 +1,4 @@
-import { getContestBySlug, transitionContestStatus } from '@commonpub/server';
+import { getContestBySlug, transitionContestStatus, isContestEditor } from '@commonpub/server';
 import type { ContestStatus } from '@commonpub/server';
 import { contestTransitionSchema } from '@commonpub/schema';
 
@@ -14,10 +14,15 @@ export default defineEventHandler(async (event): Promise<{ transitioned: boolean
     throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
   }
 
-  const result = await transitionContestStatus(db, contest.id, user.id, input.status);
+  const canManage =
+    ownerOrPermission(event, contest.createdById, 'contest.manage') ||
+    (await isContestEditor(db, contest.id, user.id));
+
+  const result = await transitionContestStatus(db, contest.id, user.id, input.status, canManage);
 
   if (!result.transitioned) {
-    throw createError({ statusCode: 400, statusMessage: result.error || 'Transition failed' });
+    const denied = /authoriz|owner/i.test(result.error ?? '');
+    throw createError({ statusCode: denied ? 403 : 400, statusMessage: result.error || 'Transition failed' });
   }
 
   return { transitioned: true, newStatus: input.status };

package/server/api/me.get.ts

@@ -6,8 +6,15 @@
  */
 export default defineEventHandler((event) => {
   const { user, session } = event.context.auth ?? {};
+  // Effective permissions resolved by the auth middleware (RBAC). The admin
+  // floor lives in users.role, so the set is empty for admins — useCan() applies
+  // the floor client-side. Permissions/roleKeys are advisory (UX only); the
+  // server is always the enforcement boundary.
+  const resolved = event.context.cpubPermissions;
   return {
     user: user ?? null,
     session: session ?? null,
+    permissions: resolved ? [...resolved.permissions] : [],
+    roleKeys: resolved?.roleKeys ?? [],
   };
 });