@commonpub/layer 0.28.0 → 0.29.0

package/components/contest/ContestEntries.vue

@@ -176,9 +176,9 @@ function confirmWithdraw(entryId: string): void {
 .cpub-entry-score { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); display: flex; align-items: center; gap: 3px; }
 
 .cpub-entry-vote-btn {
-  display: inline-flex; align-items: center; gap: 4px;
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
   font-size: 11px; font-family: var(--font-mono); font-weight: 600;
-  padding: 3px 8px; border: var(--border-width-default) solid var(--border2);
+  padding: 4px 10px; min-height: 28px; border: var(--border-width-default) solid var(--border2);
   background: var(--surface); color: var(--text-dim); cursor: pointer;
   transition: all 0.15s;
 }
@@ -187,7 +187,7 @@ function confirmWithdraw(entryId: string): void {
 .cpub-entry-vote-btn:disabled { opacity: 0.4; cursor: default; }
 .cpub-entry-vote-btn i { font-size: 10px; }
 
-.cpub-withdraw-btn { display: flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--radius); border: var(--border-width-default) solid var(--red-border); background: var(--surface); color: var(--red); cursor: pointer; margin-left: auto; }
+.cpub-withdraw-btn { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 4px 10px; min-height: 28px; border-radius: var(--radius); border: var(--border-width-default) solid var(--red-border); background: var(--surface); color: var(--red); cursor: pointer; margin-left: auto; }
 .cpub-withdraw-btn:hover { background: var(--red-bg); }
 
 .cpub-empty-state { text-align: center; padding: 32px 0; }

package/components/contest/ContestStakeholderManager.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { ContestStakeholderItem } from '@commonpub/server';
+
+const props = defineProps<{ contestSlug: string }>();
+
+const toast = useToast();
+const { data: stakeholders, refresh } = useLazyFetch<ContestStakeholderItem[]>(
+  `/api/contests/${props.contestSlug}/stakeholders`,
+);
+
+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);
+let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function handleSearch(): void {
+  if (searchTimeout) clearTimeout(searchTimeout);
+  if (!searchQuery.value || searchQuery.value.length < 2) { searchResults.value = []; return; }
+  searchTimeout = setTimeout(async () => {
+    searching.value = true;
+    try {
+      const data = await ($fetch as Function)('/api/admin/users', { query: { search: searchQuery.value, limit: 8 } }) as { items: Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }> };
+      const existing = new Set((stakeholders.value ?? []).map((s) => s.userId));
+      searchResults.value = data.items.filter((u) => !existing.has(u.id));
+    } catch {
+      searchResults.value = [];
+    } finally {
+      searching.value = false;
+    }
+  }, 300);
+}
+
+async function addStakeholder(userId: string): Promise<void> {
+  adding.value = true;
+  try {
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId } });
+    toast.success('Reviewer added');
+    searchQuery.value = '';
+    searchResults.value = [];
+    await refresh();
+  } catch {
+    toast.error('Failed to add reviewer');
+  } finally {
+    adding.value = false;
+  }
+}
+
+async function removeStakeholder(userId: string): Promise<void> {
+  if (!confirm('Remove this reviewer’s access?')) return;
+  try {
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders/${userId}`, { method: 'DELETE' });
+    toast.success('Reviewer removed');
+    await refresh();
+  } catch {
+    toast.error('Failed to remove reviewer');
+  }
+}
+</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>
+    <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">
+          <span class="cpub-sh-av">
+            <img v-if="s.userAvatar" :src="s.userAvatar" :alt="s.userName" />
+            <span v-else>{{ s.userName.charAt(0) }}</span>
+          </span>
+          <span class="cpub-sh-name">{{ s.userName }}</span>
+        </NuxtLink>
+        <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>
+
+    <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 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)">
+          <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>
+          </span>
+          <span class="cpub-sh-opt-name">{{ u.displayName || u.username }}</span>
+          <span class="cpub-sh-opt-handle">@{{ u.username }}</span>
+        </button>
+      </div>
+      <div v-else-if="searching" class="cpub-sh-dropdown"><span class="cpub-sh-dropdown-empty">Searching...</span></div>
+      <div v-else-if="searchQuery.length >= 2" class="cpub-sh-dropdown"><span class="cpub-sh-dropdown-empty">No users found</span></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sh-hint { font-size: 11px; color: var(--text-faint); margin: 0 0 12px; line-height: 1.5; }
+.cpub-sh-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
+.cpub-sh-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
+.cpub-sh-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
+.cpub-sh-av { width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
+.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-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-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; }
+.cpub-sh-option:hover { background: var(--surface2); }
+.cpub-sh-option:disabled { opacity: 0.5; cursor: default; }
+.cpub-sh-opt-name { font-size: 12px; font-weight: 600; color: var(--text); }
+.cpub-sh-opt-handle { font-size: 11px; color: var(--text-faint); margin-left: auto; }
+.cpub-sh-dropdown-empty { display: block; padding: 8px 12px; font-size: 11px; color: var(--text-faint); }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -58,11 +58,11 @@
     "@commonpub/docs": "0.6.3",
     "@commonpub/explainer": "0.7.15",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/schema": "0.21.0",
-    "@commonpub/editor": "0.7.11",
+    "@commonpub/schema": "0.22.0",
+    "@commonpub/server": "2.63.0",
     "@commonpub/ui": "0.9.1",
-    "@commonpub/protocol": "0.12.0",
-    "@commonpub/server": "2.62.0"
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/protocol": "0.12.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -31,6 +31,15 @@ function toggleType(type: string): void {
   else eligibleContentTypes.value.push(type);
 }
 
+const visibility = ref<'public' | 'unlisted' | 'private'>('public');
+const visibleToRoles = ref<string[]>([]);
+const ROLE_OPTIONS = ['member', 'pro', 'verified', 'staff', 'admin'];
+function toggleRole(r: string): void {
+  const i = visibleToRoles.value.indexOf(r);
+  if (i >= 0) visibleToRoles.value.splice(i, 1);
+  else visibleToRoles.value.push(r);
+}
+
 interface Prize { place: number | null; category: string; title: string; description: string; value: string }
 const prizes = ref<Prize[]>([]);
 
@@ -51,6 +60,8 @@ watch(contest, (c) => {
   judgingVisibility.value = (c.judgingVisibility as typeof judgingVisibility.value) ?? 'judges-only';
   eligibleContentTypes.value = [...(c.eligibleContentTypes ?? [])];
   maxEntriesPerUser.value = c.maxEntriesPerUser ?? null;
+  visibility.value = (c.visibility as typeof visibility.value) ?? 'public';
+  visibleToRoles.value = [...(c.visibleToRoles ?? [])];
   prizes.value = (c.prizes ?? []).map((p: { place?: number; category?: string; title: string; description?: string; value?: string }) => ({
     place: p.place ?? null,
     category: p.category ?? '',
@@ -130,6 +141,8 @@ async function handleSave(): Promise<void> {
         judgingVisibility: judgingVisibility.value,
         eligibleContentTypes: eligibleContentTypes.value,
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
+        visibility: visibility.value,
+        visibleToRoles: visibility.value === 'private' ? visibleToRoles.value : [],
         prizes: prizeData,
         judgingCriteria: criteriaData,
       },
@@ -300,6 +313,32 @@ async function transitionStatus(newStatus: string): Promise<void> {
         </div>
       </section>
 
+      <!-- Visibility & Access -->
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Visibility &amp; Access</h2>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Who can see this contest</label>
+          <select v-model="visibility" class="cpub-form-input">
+            <option value="public">Public — listed and visible to everyone</option>
+            <option value="unlisted">Unlisted — visible by direct link, hidden from listings</option>
+            <option value="private">Private — restricted</option>
+          </select>
+        </div>
+        <div v-if="visibility === 'private'" class="cpub-form-field">
+          <span class="cpub-form-label">Also visible to roles</span>
+          <div class="cpub-type-options" role="group" aria-label="Roles that can view">
+            <label v-for="r in ROLE_OPTIONS" :key="r" class="cpub-form-check">
+              <input type="checkbox" :checked="visibleToRoles.includes(r)" @change="toggleRole(r)" />
+              <span>{{ r }}</span>
+            </label>
+          </div>
+        </div>
+        <div class="cpub-subhead">
+          <h3 class="cpub-form-subtitle">Reviewers</h3>
+        </div>
+        <ContestStakeholderManager :contest-slug="slug" />
+      </section>
+
       <!-- Judge panel (single source of truth: contest_judges table) -->
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Judges</h2>

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

@@ -27,6 +27,25 @@ const myJudge = computed(() => judges.value.find((j) => j.userId === user.value?
 const pendingInvite = computed(() => !!myJudge.value && !myJudge.value.acceptedAt);
 const canJudge = computed(() => !!myJudge.value && !!myJudge.value.acceptedAt && myJudge.value.role !== 'guest');
 
+// Unique entrants (the people), distinct from entries (the submissions).
+interface Participant { username: string; name: string; avatar: string | null; count: number }
+const participants = computed<Participant[]>(() => {
+  const map = new Map<string, Participant>();
+  for (const e of entries.value) {
+    const cur = map.get(e.authorUsername);
+    if (cur) cur.count++;
+    else map.set(e.authorUsername, { username: e.authorUsername, name: e.authorName, avatar: e.authorAvatarUrl, count: 1 });
+  }
+  return [...map.values()];
+});
+
+// Visibility banner shown to those who can see a non-public contest.
+const visibilityNote = computed(() => {
+  if (!c.value || c.value.visibility === 'public') return null;
+  if (c.value.visibility === 'unlisted') return { icon: 'fa-link', text: 'Unlisted — visible by direct link only, hidden from listings.' };
+  return { icon: 'fa-lock', text: 'Private — visible only to you, reviewers, judges, and allowed roles.' };
+});
+
 // Tabs ----------------------------------------------------------------------
 interface Tab { key: string; label: string; icon: string; count?: number }
 const tabs = computed<Tab[]>(() => {
@@ -34,6 +53,7 @@ const tabs = computed<Tab[]>(() => {
   if (c.value?.rules) t.push({ key: 'rules', label: 'Rules', icon: 'fa-file-lines' });
   if (c.value?.prizes?.length) t.push({ key: 'prizes', label: 'Prizes', icon: 'fa-trophy' });
   t.push({ key: 'entries', label: 'Entries', icon: 'fa-box-open', count: c.value?.entryCount ?? entries.value.length });
+  if (participants.value.length) t.push({ key: 'participants', label: 'Participants', icon: 'fa-users', count: participants.value.length });
   if (judges.value.length || isOwner.value) t.push({ key: 'judges', label: 'Judges', icon: 'fa-gavel', count: judges.value.length || undefined });
   return t;
 });
@@ -92,6 +112,8 @@ async function acceptInvite(): Promise<void> {
 
 // Entry submission
 const showSubmitDialog = ref(false);
+const submitDialogRef = ref<HTMLElement | null>(null);
+useFocusTrap(submitDialogRef, () => showSubmitDialog.value, () => { showSubmitDialog.value = false; });
 const submitContentId = ref('');
 const submitting = ref(false);
 const { data: userContent } = useFetch('/api/content', {
@@ -156,7 +178,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
     <!-- SUBMIT ENTRY DIALOG -->
     <div v-if="showSubmitDialog" class="cpub-submit-overlay" @click.self="showSubmitDialog = false">
-      <div class="cpub-submit-dialog" role="dialog" aria-label="Submit entry">
+      <div ref="submitDialogRef" class="cpub-submit-dialog" role="dialog" aria-modal="true" aria-label="Submit entry">
         <div class="cpub-submit-header">
           <h2>Submit Entry</h2>
           <button class="cpub-submit-close" aria-label="Close" @click="showSubmitDialog = false"><i class="fa-solid fa-times"></i></button>
@@ -205,6 +227,12 @@ async function withdrawEntry(entryId: string): Promise<void> {
             </button>
           </div>
 
+          <!-- Visibility banner (non-public contests, shown to those who can see it) -->
+          <div v-if="visibilityNote" class="cpub-visibility-banner">
+            <i class="fa-solid" :class="visibilityNote.icon"></i>
+            <span>{{ visibilityNote.text }}</span>
+          </div>
+
           <!-- Tab bar -->
           <div class="cpub-tabbar" role="tablist" aria-label="Contest sections">
             <button
@@ -259,6 +287,23 @@ async function withdrawEntry(entryId: string): Promise<void> {
             />
           </div>
 
+          <!-- PARTICIPANTS -->
+          <div v-show="activeTab === 'participants'" id="cpub-panel-participants" role="tabpanel" aria-labelledby="cpub-tab-participants" tabindex="0">
+            <div class="cpub-sec-head"><h2><i class="fa-solid fa-users" style="color: var(--accent);"></i> Participants</h2><span class="cpub-sec-sub">{{ participants.length }}</span></div>
+            <div class="cpub-participant-grid">
+              <NuxtLink v-for="p in participants" :key="p.username" :to="`/u/${p.username}`" class="cpub-participant">
+                <span class="cpub-participant-av">
+                  <img v-if="p.avatar" :src="p.avatar" :alt="p.name" />
+                  <span v-else>{{ (p.name || p.username || '?').charAt(0).toUpperCase() }}</span>
+                </span>
+                <span class="cpub-participant-info">
+                  <span class="cpub-participant-name">{{ p.name }}</span>
+                  <span class="cpub-participant-meta">{{ p.count }} {{ p.count === 1 ? 'entry' : 'entries' }}</span>
+                </span>
+              </NuxtLink>
+            </div>
+          </div>
+
           <!-- JUDGES -->
           <div v-show="activeTab === 'judges'" id="cpub-panel-judges" role="tabpanel" aria-labelledby="cpub-tab-judges" tabindex="0">
             <ContestJudges :judges="judges" />
@@ -296,8 +341,9 @@ async function withdrawEntry(entryId: string): Promise<void> {
 .cpub-invite-text i { color: var(--accent); }
 
 /* TABS */
-.cpub-tabbar { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: var(--border-width-default) solid var(--border); margin-bottom: 20px; }
-.cpub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); cursor: pointer; }
+.cpub-tabbar { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: var(--border-width-default) solid var(--border); margin-bottom: 20px; }
+.cpub-tabbar::-webkit-scrollbar { display: none; }
+.cpub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 40px; flex-shrink: 0; white-space: nowrap; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); cursor: pointer; }
 .cpub-tab:hover { color: var(--text-dim); }
 .cpub-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
 .cpub-tab i { font-size: 11px; }
@@ -306,9 +352,25 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
 [role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
 
+/* VISIBILITY BANNER */
+.cpub-visibility-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 12px; color: var(--text-dim); background: var(--surface2); border: var(--border-width-default) solid var(--border); }
+.cpub-visibility-banner i { color: var(--accent); }
+
 /* SECTION HEADERS */
 .cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
 .cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+.cpub-sec-sub { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
+
+/* PARTICIPANTS */
+.cpub-participant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
+.cpub-participant { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); text-decoration: none; }
+.cpub-participant:hover { box-shadow: var(--shadow-accent); }
+.cpub-participant-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-mono); border: var(--border-width-default) solid var(--border); background: var(--surface3); color: var(--text-dim); overflow: hidden; }
+.cpub-participant-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-participant-info { display: flex; flex-direction: column; min-width: 0; }
+.cpub-participant-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cpub-participant-meta { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+@media (max-width: 480px) { .cpub-participant-grid { grid-template-columns: 1fr; } }
 
 /* ABOUT */
 .cpub-about-section { margin-bottom: 20px; }

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

@@ -121,6 +121,7 @@ function medalColor(rank: number): string {
       <!-- LEADERBOARD -->
       <div v-if="leaderboard.length > 0" class="cpub-leaderboard">
         <h2 class="cpub-leaderboard-title">Full Leaderboard</h2>
+        <div class="cpub-leaderboard-scroll">
         <table class="cpub-leaderboard-table">
           <thead>
             <tr>
@@ -150,6 +151,7 @@ function medalColor(rank: number): string {
             </tr>
           </tbody>
         </table>
+        </div>
       </div>
 
       <div v-else class="cpub-results-empty">
@@ -190,7 +192,9 @@ function medalColor(rank: number): string {
 /* LEADERBOARD */
 .cpub-leaderboard { margin-bottom: 32px; }
 .cpub-leaderboard-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
-.cpub-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+/* Horizontal scroll on narrow screens instead of overflowing the page. */
+.cpub-leaderboard-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.cpub-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }
 .cpub-leaderboard-table th { text-align: left; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); }
 .cpub-leaderboard-table td { padding: 10px 12px; border-bottom: var(--border-width-default) solid var(--border); }
 .cpub-lb-top3 { background: var(--surface2); }

package/pages/contests/create.vue

@@ -17,6 +17,16 @@ const judgingEndDate = ref('');
 const communityVotingEnabled = ref(false);
 const judgingVisibility = ref<'public' | 'judges-only' | 'private'>('judges-only');
 
+// Visibility & access
+const visibility = ref<'public' | 'unlisted' | 'private'>('public');
+const visibleToRoles = ref<string[]>([]);
+const ROLE_OPTIONS = ['member', 'pro', 'verified', 'staff', 'admin'];
+function toggleRole(r: string): void {
+  const i = visibleToRoles.value.indexOf(r);
+  if (i >= 0) visibleToRoles.value.splice(i, 1);
+  else visibleToRoles.value.push(r);
+}
+
 // Entry rules
 const { enabledTypeMeta } = useContentTypes();
 const eligibleContentTypes = ref<string[]>([]); // empty = all types allowed
@@ -88,6 +98,8 @@ async function handleCreate(): Promise<void> {
         judgingEndDate: judgingEndDate.value ? new Date(judgingEndDate.value).toISOString() : undefined,
         communityVotingEnabled: communityVotingEnabled.value,
         judgingVisibility: judgingVisibility.value,
+        visibility: visibility.value,
+        visibleToRoles: visibility.value === 'private' && visibleToRoles.value.length ? visibleToRoles.value : undefined,
         eligibleContentTypes: eligibleContentTypes.value.length ? eligibleContentTypes.value : undefined,
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
         prizes: prizes.value
@@ -171,6 +183,30 @@ function prizeLabel(prize: Prize, idx: number): string {
         <p v-if="dateError" class="cpub-form-error" role="alert">{{ dateError }}</p>
       </section>
 
+      <!-- Visibility & Access -->
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Visibility &amp; Access</h2>
+        <div class="cpub-form-field">
+          <label for="visibility" class="cpub-form-label">Who can see this contest</label>
+          <select id="visibility" v-model="visibility" class="cpub-form-input">
+            <option value="public">Public — listed and visible to everyone</option>
+            <option value="unlisted">Unlisted — visible by direct link, hidden from listings</option>
+            <option value="private">Private — restricted (you can publish it later)</option>
+          </select>
+        </div>
+        <div v-if="visibility === 'private'" class="cpub-form-field">
+          <span class="cpub-form-label">Also visible to roles</span>
+          <p class="cpub-form-hint">Owner, admins, judges, and reviewers (added after creation) can always see it. Optionally grant whole roles too.</p>
+          <div class="cpub-type-options" role="group" aria-label="Roles that can view">
+            <label v-for="r in ROLE_OPTIONS" :key="r" class="cpub-form-check">
+              <input type="checkbox" :checked="visibleToRoles.includes(r)" @change="toggleRole(r)" />
+              <span>{{ r }}</span>
+            </label>
+          </div>
+        </div>
+        <p v-if="visibility === 'private'" class="cpub-form-hint">Add named reviewers (stakeholders) from the contest's Edit page after creating it.</p>
+      </section>
+
       <!-- Entry Rules -->
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Entries</h2>

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

@@ -1,4 +1,4 @@
-import { listContestEntries, getContestBySlug, isContestJudge, shouldRevealScores } from '@commonpub/server';
+import { listContestEntries, getContestBySlug, isContestJudge, shouldRevealScores, canViewContest } from '@commonpub/server';
 import type { ContestEntryItem } from '@commonpub/server';
 import { z } from 'zod';
 
@@ -21,6 +21,10 @@ export default defineEventHandler(async (event): Promise<{ items: ContestEntryIt
   // Aggregate score visibility additionally honours the contest's
   // judgingVisibility setting (public / judges-only / private).
   const user = getOptionalUser(event);
+  // Don't leak a private contest's entries to viewers who can't see the contest.
+  if (!(await canViewContest(db, contest, user))) {
+    throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  }
   let privileged = false;
   if (user) {
     privileged =

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

@@ -1,4 +1,4 @@
-import { submitContestEntry, getContestBySlug } from '@commonpub/server';
+import { submitContestEntry, getContestBySlug, canViewContest } from '@commonpub/server';
 import type { ContestEntryItem } from '@commonpub/server';
 import { z } from 'zod';
 
@@ -13,6 +13,10 @@ export default defineEventHandler(async (event): Promise<ContestEntryItem> => {
   const { slug } = parseParams(event, { slug: 'string' });
   const contest = await getContestBySlug(db, slug);
   if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  // Can't enter a contest you can't see.
+  if (!(await canViewContest(db, contest, user))) {
+    throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  }
   const input = await parseBody(event, submitEntrySchema);
 
   const entry = await submitContestEntry(db, contest.id, input.contentId, user.id);

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

@@ -1,4 +1,4 @@
-import { getContestBySlug } from '@commonpub/server';
+import { getContestBySlug, canViewContest } from '@commonpub/server';
 import type { ContestDetail } from '@commonpub/server';
 
 export default defineEventHandler(async (event): Promise<ContestDetail> => {
@@ -7,5 +7,11 @@ export default defineEventHandler(async (event): Promise<ContestDetail> => {
   const { slug } = parseParams(event, { slug: 'string' });
   const contest = await getContestBySlug(db, slug);
   if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  // Access control: private contests are only visible to owner/admin/stakeholders/
+  // judges/allowed-roles. 404 (not 403) so we don't leak that the contest exists.
+  const user = getOptionalUser(event);
+  if (!(await canViewContest(db, contest, user))) {
+    throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  }
   return contest;
 });

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

@@ -1,4 +1,4 @@
-import { getContestBySlug, listContestJudges } from '@commonpub/server';
+import { getContestBySlug, listContestJudges, canViewContest } from '@commonpub/server';
 
 /**
  * GET /api/contests/:slug/judges
@@ -12,6 +12,9 @@ export default defineEventHandler(async (event) => {
 
   const contest = await getContestBySlug(db, slug);
   if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  if (!(await canViewContest(db, contest, getOptionalUser(event)))) {
+    throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  }
 
   return listContestJudges(db, contest.id);
 });

package/server/api/contests/[slug]/stakeholders/[userId].delete.ts

@@ -0,0 +1,24 @@
+import { getContestBySlug, removeContestStakeholder } from '@commonpub/server';
+
+/**
+ * DELETE /api/contests/:slug/stakeholders/:userId
+ * Revoke a stakeholder's review access (contest owner or admin only).
+ */
+export default defineEventHandler(async (event) => {
+  requireFeature('contests');
+  const user = requireAuth(event);
+  const db = useDB();
+  const slug = getRouterParam(event, 'slug');
+  const userId = getRouterParam(event, 'userId');
+  if (!slug || !userId) throw createError({ statusCode: 400, statusMessage: 'Missing slug or userId' });
+
+  const contest = await getContestBySlug(db, slug);
+  if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  if (contest.createdById !== user.id && user.role !== 'admin') {
+    throw createError({ statusCode: 403, statusMessage: 'Only the contest owner or admin can manage stakeholders' });
+  }
+
+  const removed = await removeContestStakeholder(db, contest.id, userId);
+  if (!removed) throw createError({ statusCode: 404, statusMessage: 'Stakeholder not found' });
+  return { removed: true };
+});

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

@@ -0,0 +1,21 @@
+import { getContestBySlug, listContestStakeholders } from '@commonpub/server';
+
+/**
+ * GET /api/contests/:slug/stakeholders
+ * List view-only stakeholders (contest owner or admin only).
+ */
+export default defineEventHandler(async (event) => {
+  requireFeature('contests');
+  const user = requireAuth(event);
+  const db = useDB();
+  const slug = getRouterParam(event, 'slug');
+  if (!slug) throw createError({ statusCode: 400, statusMessage: 'Missing slug' });
+
+  const contest = await getContestBySlug(db, slug);
+  if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  if (contest.createdById !== user.id && user.role !== 'admin') {
+    throw createError({ statusCode: 403, statusMessage: 'Only the contest owner or admin can view stakeholders' });
+  }
+
+  return listContestStakeholders(db, contest.id);
+});

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

@@ -0,0 +1,33 @@
+import { getContestBySlug, addContestStakeholder } from '@commonpub/server';
+import { z } from 'zod';
+
+const addStakeholderSchema = z.object({ userId: z.string().uuid() });
+
+/**
+ * POST /api/contests/:slug/stakeholders
+ * Grant a user view-only review access (contest owner or admin only).
+ */
+export default defineEventHandler(async (event) => {
+  requireFeature('contests');
+  const user = requireAuth(event);
+  const db = useDB();
+  const slug = getRouterParam(event, 'slug');
+  if (!slug) throw createError({ statusCode: 400, statusMessage: 'Missing slug' });
+
+  const contest = await getContestBySlug(db, slug);
+  if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  if (contest.createdById !== user.id && user.role !== 'admin') {
+    throw createError({ statusCode: 403, statusMessage: 'Only the contest owner or admin can manage stakeholders' });
+  }
+
+  const body = await parseBody(event, addStakeholderSchema);
+  const result = await addContestStakeholder(db, contest.id, body.userId, {
+    contestSlug: slug,
+    contestTitle: contest.title,
+    invitedBy: user.id,
+  });
+  if (!result.added) {
+    throw createError({ statusCode: 400, statusMessage: result.error ?? 'Failed to add stakeholder' });
+  }
+  return { added: true };
+});

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

@@ -1,4 +1,4 @@
-import { getContestBySlug, getContestEntryVotes } from '@commonpub/server';
+import { getContestBySlug, getContestEntryVotes, canViewContest } from '@commonpub/server';
 import type { ContestEntryVoteInfo } from '@commonpub/server';
 
 /**
@@ -13,6 +13,9 @@ export default defineEventHandler(async (event): Promise<ContestEntryVoteInfo[]>
 
   const contest = await getContestBySlug(db, slug);
   if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  if (!(await canViewContest(db, contest, user))) {
+    throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+  }
   // Voting disabled, or contest not yet open (no entries) → empty array, not an error.
   if (!contest.communityVotingEnabled || contest.status === 'upcoming') return [];
 

package/server/api/contests/index.get.ts

@@ -6,5 +6,8 @@ export default defineEventHandler(async (event): Promise<PaginatedResponse<Conte
   requireFeature('contests');
   const db = useDB();
   const filters = parseQueryParams(event, contestFiltersSchema);
-  return listContests(db, filters);
+  // Pass the viewer so the list can include their own drafts/hidden contests
+  // (and everything for admins) while keeping the public list public-only.
+  const user = getOptionalUser(event);
+  return listContests(db, filters, user ? { userId: user.id, role: user.role } : null);
 });