@commonpub/layer 0.29.0 → 0.31.0

package/components/ContentCard.vue

@@ -294,6 +294,12 @@ function formatCount(n: number | undefined): string {
   min-width: 0;
 }
 
+/* Two render modes share .cpub-cc-av: <img class="cpub-cc-av cpub-cc-av--img">
+ * (author photo) and <span class="cpub-cc-av"> (initials fallback). `display:flex`
+ * MUST NOT apply to the <img> — a replaced element with display:flex silently
+ * drops `object-fit:cover` in Chromium, squishing portrait avatars into the box
+ * (the recurring deveco.io blog-card bug). Centering is scoped to the span; the
+ * img keeps object-fit only. See ArticleView.vue for the same fix. */
 .cpub-cc-av {
   width: 18px;
   height: 18px;
@@ -303,14 +309,18 @@ function formatCount(n: number | undefined): string {
   font-size: 8px;
   font-weight: 700;
   font-family: var(--font-mono);
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+span.cpub-cc-av {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  border-radius: 50%;
 }
 
-.cpub-cc-av--img {
+.cpub-cc-av--img,
+img.cpub-cc-av {
   object-fit: cover;
 }
 

package/components/CpubMarkdown.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * Renders a Markdown (or HTML-in-Markdown) string as formatted content, reusing
+ * the SAME pipeline articles/docs use: `markdownToBlockTuples` → the block
+ * content renderer. This is why a contest description like `## Mission` +
+ * `- **point**` + `[link](url)` renders as real headings/lists/links instead of
+ * the raw-markdown wall it used to show.
+ *
+ * Source is parsed once (computed) and memoised by Vue. Empty / parse-failure
+ * falls back to plain text so content never disappears.
+ */
+import { markdownToBlockTuples } from '@commonpub/editor';
+import type { BlockTuple } from '@commonpub/editor';
+
+const props = defineProps<{
+  /** Markdown source (may contain inline/block HTML — passed through). */
+  source?: string | null;
+}>();
+
+const trimmed = computed(() => (props.source ?? '').trim());
+
+const blocks = computed<BlockTuple[]>(() => {
+  if (!trimmed.value) return [];
+  try {
+    return markdownToBlockTuples(trimmed.value);
+  } catch {
+    return [];
+  }
+});
+</script>
+
+<template>
+  <BlocksBlockContentRenderer
+    v-if="blocks.length"
+    :blocks="(blocks as [string, Record<string, unknown>][])"
+    class="cpub-prose cpub-md"
+  />
+  <p v-else-if="trimmed" class="cpub-md cpub-md-plain">{{ trimmed }}</p>
+</template>
+
+<style scoped>
+.cpub-md-plain {
+  white-space: pre-wrap;
+  line-height: 1.7;
+}
+</style>

package/components/NotificationItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   notification: {
     id: string;
     type: string;
@@ -13,6 +13,18 @@ defineProps<{
   };
 }>();
 
+const emit = defineEmits<{ read: [id: string] }>();
+
+// The whole row is the click target when there's somewhere to go (previously
+// only the tiny right-hand arrow navigated). When there's a destination the
+// root renders as a NuxtLink so keyboard / middle-click / open-in-new-tab all
+// work; otherwise it stays a plain div.
+const destination = computed(() => props.notification.link || props.notification.targetUrl || null);
+
+function onActivate(): void {
+  if (!props.notification.read) emit('read', props.notification.id);
+}
+
 const iconMap: Record<string, string> = {
   like: 'fa-solid fa-heart',
   comment: 'fa-solid fa-comment',
@@ -28,7 +40,14 @@ const iconMap: Record<string, string> = {
 </script>
 
 <template>
-  <div class="cpub-notif" :class="{ 'cpub-notif-unread': !notification.read }">
+  <component
+    :is="destination ? 'NuxtLink' : 'div'"
+    :to="destination || undefined"
+    class="cpub-notif"
+    :class="{ 'cpub-notif-unread': !notification.read, 'cpub-notif-link-row': destination }"
+    :aria-label="destination ? `${notification.actorName ? notification.actorName + ' ' : ''}${notification.message}` : undefined"
+    @click="onActivate"
+  >
     <div class="cpub-notif-avatar-wrap">
       <img v-if="notification.actorAvatarUrl" :src="notification.actorAvatarUrl" :alt="notification.actorName ?? ''" class="cpub-notif-avatar" />
       <div v-else class="cpub-notif-avatar cpub-notif-avatar-fallback">
@@ -47,10 +66,8 @@ const iconMap: Record<string, string> = {
         {{ new Date(notification.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
       </time>
     </div>
-    <NuxtLink v-if="notification.link || notification.targetUrl" :to="notification.link || notification.targetUrl || '#'" class="cpub-notif-link" :aria-label="`View ${notification.type} notification`">
-      <i class="fa-solid fa-arrow-right"></i>
-    </NuxtLink>
-  </div>
+    <i v-if="destination" class="fa-solid fa-chevron-right cpub-notif-chevron" aria-hidden="true"></i>
+  </component>
 </template>
 
 <style scoped>
@@ -61,6 +78,18 @@ const iconMap: Record<string, string> = {
   padding: 12px;
   border: var(--border-width-default) solid transparent;
   border-bottom: var(--border-width-default) solid var(--border2);
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Whole-row link affordance: the entire item is the click target. */
+.cpub-notif-link-row {
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.cpub-notif-link-row:hover {
+  background: var(--surface2);
 }
 
 .cpub-notif.cpub-notif-unread {
@@ -68,6 +97,10 @@ const iconMap: Record<string, string> = {
   border-color: var(--accent-border);
 }
 
+.cpub-notif-link-row.cpub-notif-unread:hover {
+  background: var(--accent-bg-hover, var(--accent-bg));
+}
+
 .cpub-notif-avatar-wrap {
   position: relative;
   width: 32px;
@@ -126,18 +159,16 @@ const iconMap: Record<string, string> = {
   font-family: var(--font-mono);
 }
 
-.cpub-notif-link {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* Decorative chevron — signals the whole row navigates (the row itself is the
+   link now; this is aria-hidden, not a separate tab stop). */
+.cpub-notif-chevron {
+  align-self: center;
+  flex-shrink: 0;
   color: var(--text-faint);
-  text-decoration: none;
   font-size: 10px;
 }
 
-.cpub-notif-link:hover {
+.cpub-notif-link-row:hover .cpub-notif-chevron {
   color: var(--accent);
 }
 </style>

package/components/contest/ContestEntries.vue

@@ -149,10 +149,13 @@ function confirmWithdraw(entryId: string): void {
 .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); }
 
-.cpub-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
-.cpub-entry-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
+/* Match the content-card grid: responsive auto-fill columns + a 4:3 cover
+   (was a rigid 2-col grid with a squat fixed 110px strip that over-cropped
+   the cover photo). */
+.cpub-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 12px; }
+.cpub-entry-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
 .cpub-entry-card:hover { box-shadow: var(--shadow-accent); }
-.cpub-entry-thumb { height: 110px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+.cpub-entry-thumb { aspect-ratio: 4 / 3; width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
 .cpub-entry-bg-light { background: var(--surface2); }
 .cpub-entry-bg-dark { background: var(--surface3); }
 .cpub-entry-grid-pat { position: absolute; inset: 0; background-image: linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px); background-size: 20px 20px; opacity: .3; }

package/components/contest/ContestHero.vue

@@ -53,6 +53,27 @@ const countdownLabel = computed(() => {
 });
 
 const isEnded = computed(() => c.value?.status === 'completed' || c.value?.status === 'cancelled');
+
+// The hero shows the short `subheading` (a dedicated tagline field). For older
+// contests without one, fall back to a clean, plain-text, CSS-clamped excerpt of
+// the (possibly long Markdown) description — so the hero never dumps a raw
+// `## ...` wall. The full formatted description renders in the About tab.
+const tagline = computed<string>(() => {
+  const sub = (c.value?.subheading ?? '').trim();
+  if (sub) return sub;
+  const d = (c.value?.description ?? '').trim();
+  if (!d) return 'No description available.';
+  return d
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/`([^`]*)`/g, '$1')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/^#{1,6}\s+/gm, '')
+    .replace(/^\s*[-*+>]\s+/gm, '')
+    .replace(/(\*\*|__|~~|\*|_)/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+});
 </script>
 
 <template>
@@ -63,6 +84,10 @@ const isEnded = computed(() => c.value?.status === 'completed' || c.value?.statu
     </div>
 
     <div class="cpub-hero-inner">
+      <!-- Banner image: a clean band at the top of the hero. Title/tagline sit
+           BELOW it (never overlaid) so text stays legible regardless of image. -->
+      <img v-if="c?.bannerUrl" :src="c.bannerUrl" :alt="`${c?.title || 'Contest'} banner`" class="cpub-hero-banner" />
+
       <div v-if="c?.status === 'cancelled'" class="cpub-cancelled-banner">
         <i class="fa-solid fa-ban"></i> This contest has been cancelled.
       </div>
@@ -72,7 +97,7 @@ const isEnded = computed(() => c.value?.status === 'completed' || c.value?.statu
       </div>
 
       <div class="cpub-hero-title">{{ c?.title || 'Contest' }}</div>
-      <div class="cpub-hero-tagline">{{ c?.description || 'No description available.' }}</div>
+      <div class="cpub-hero-tagline">{{ tagline }}</div>
 
       <div class="cpub-hero-meta">
         <span v-if="c?.startDate || c?.endDate" class="cpub-hero-meta-item">
@@ -154,11 +179,12 @@ const isEnded = computed(() => c.value?.status === 'completed' || c.value?.statu
 .cpub-hero-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--accent-border) 1.5px, transparent 1.5px); background-size: 28px 28px; opacity: .3; }
 .cpub-hero-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--accent-bg) 1px, transparent 1px), linear-gradient(90deg, var(--accent-bg) 1px, transparent 1px); background-size: 56px 56px; }
 .cpub-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
+.cpub-hero-banner { display: block; width: 100%; max-height: 260px; object-fit: cover; margin-bottom: 28px; border: var(--border-width-default) solid var(--hero-border); border-radius: var(--radius); }
 .cpub-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
 .cpub-contest-badge { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); padding: 3px 10px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 5px; }
 .cpub-contest-badge i { font-size: 8px; }
 .cpub-hero-title { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; color: var(--hero-text); }
-.cpub-hero-tagline { font-size: 14px; color: var(--hero-text-dim); line-height: 1.55; max-width: 580px; margin-bottom: 28px; }
+.cpub-hero-tagline { font-size: 14px; color: var(--hero-text-dim); line-height: 1.55; max-width: 580px; margin-bottom: 28px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
 .cpub-hero-meta { display: flex; align-items: center; gap: 20px; font-size: 11px; color: var(--hero-text-dim); font-family: var(--font-mono); margin-bottom: 28px; }
 .cpub-hero-meta-item { display: flex; align-items: center; gap: 5px; }
 .cpub-hero-meta-sep { color: var(--hero-border); }

package/components/contest/ContestPrizes.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-interface Prize { place?: number; category?: string; title: string; description?: string; value?: string }
+interface Prize { place?: number; category?: string; title?: string; description?: string; value?: string }
 defineProps<{
   prizes: Prize[];
+  /** Optional Markdown intro shown above the prize cards (section-level, not per-prize). */
+  description?: string | null;
 }>();
 
 function prizeLabel(prize: Prize): string {
@@ -35,7 +37,8 @@ function prizeIcon(prize: Prize): string {
     <div class="cpub-sec-head">
       <h2><i class="fa fa-trophy" style="color: var(--yellow);"></i> Prizes</h2>
     </div>
-    <div class="cpub-prize-grid">
+    <CpubMarkdown v-if="description" :source="description" class="cpub-prizes-intro" />
+    <div v-if="prizes.length" class="cpub-prize-grid">
       <div
         v-for="(prize, i) in prizes"
         :key="i"
@@ -45,7 +48,7 @@ function prizeIcon(prize: Prize): string {
         <div class="cpub-prize-rank" :class="`cpub-prize-rank-${prizeColor(prize)}`">{{ prizeLabel(prize) }}</div>
         <div class="cpub-prize-icon" :class="`cpub-prize-icon-${prizeColor(prize)}`"><i class="fa-solid" :class="prizeIcon(prize)"></i></div>
         <div v-if="prize.value" class="cpub-prize-amount" :class="`cpub-prize-amount-${prizeColor(prize)}`">{{ prize.value }}</div>
-        <div class="cpub-prize-title">{{ prize.title }}</div>
+        <div v-if="prize.title" class="cpub-prize-title">{{ prize.title }}</div>
         <div v-if="prize.description" class="cpub-prize-desc">{{ prize.description }}</div>
       </div>
     </div>
@@ -58,6 +61,7 @@ function prizeIcon(prize: Prize): string {
 .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-prizes-intro { margin-bottom: 16px; }
 .cpub-prize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
 .cpub-prize-card { border-radius: var(--radius); padding: 20px; text-align: center; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); }
 .cpub-prize-gold { box-shadow: var(--shadow-accent); }

package/components/contest/ContestRules.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+/**
+ * Rules are authored as Markdown (and may contain inline HTML) — rendered the
+ * same way as the contest description, so headings/lists/links/HTML all format
+ * properly. Plain prose and plain one-rule-per-line text render fine through the
+ * Markdown pipeline too (as paragraphs / a tight list), so there's no separate
+ * "numbered list" special-case anymore (that produced the odd forced-list look).
+ */
+defineProps<{
   rules: string;
 }>();
-
-const ruleLines = computed(() =>
-  props.rules.split('\n').filter((line) => line.trim().length > 0),
-);
 </script>
 
 <template>
@@ -14,10 +17,7 @@ const ruleLines = computed(() =>
       <h2><i class="fa fa-file-lines" style="color: var(--purple);"></i> Rules</h2>
     </div>
     <div class="cpub-rules-card">
-      <ol v-if="ruleLines.length > 1" class="cpub-rules-list">
-        <li v-for="(line, i) in ruleLines" :key="i" class="cpub-rule-item">{{ line }}</li>
-      </ol>
-      <div v-else class="cpub-rules-text">{{ rules }}</div>
+      <CpubMarkdown :source="rules" />
     </div>
   </div>
 </template>

package/composables/useFeatures.ts

@@ -34,6 +34,12 @@ export interface FeatureFlags {
    * a default layout exists at scope ('route', '/'). Added session 158.
    */
   layoutEngine: boolean;
+  /**
+   * Global RBAC (session 175). Client-advisory only — drives `useCan`'s
+   * button-hiding; the server resolver is the enforcement boundary. Default
+   * OFF. See docs/plans/rbac.md.
+   */
+  rbac: boolean;
   /**
    * Cross-instance delegated authorization. All sub-flags default false.
    * Mirrors `@commonpub/config`'s `IdentityFeatures`. Phase 1b+ — see
@@ -55,6 +61,7 @@ export const DEFAULT_FLAGS: FeatureFlags = {
   editorial: true, federation: false, admin: false, emailNotifications: false,
   publicApi: false, contentImport: true,
   layoutEngine: false,
+  rbac: false,
   identity: {
     linkRemoteAccounts: false,
     signInWithRemote: false,
@@ -157,6 +164,7 @@ export function useFeatures() {
     publicApi: computed(() => flags.value.publicApi),
     contentImport: computed(() => flags.value.contentImport),
     layoutEngine: computed(() => flags.value.layoutEngine),
+    rbac: computed(() => flags.value.rbac),
     identity: computed(() => flags.value.identity),
   };
 }

package/nuxt.config.ts

@@ -109,6 +109,7 @@ export default defineNuxtConfig({
         publicApi: false,
         contentImport: true,
         layoutEngine: false,
+        rbac: false,
       },
       contentTypes: 'project,blog,explainer',
       contestCreation: 'admin',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,16 +53,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.6.0",
-    "@commonpub/config": "0.15.0",
-    "@commonpub/docs": "0.6.3",
+    "@commonpub/auth": "0.7.0",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/schema": "0.22.0",
-    "@commonpub/server": "2.63.0",
-    "@commonpub/ui": "0.9.1",
+    "@commonpub/config": "0.16.0",
+    "@commonpub/docs": "0.6.3",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/protocol": "0.12.0"
+    "@commonpub/protocol": "0.12.0",
+    "@commonpub/schema": "0.24.0",
+    "@commonpub/server": "2.65.0",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/ui": "0.9.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -13,6 +13,7 @@ useSeoMeta({ title: () => `Edit: ${contest.value?.title ?? 'Contest'} — ${useS
 
 const saving = ref(false);
 const title = ref('');
+const subheading = ref('');
 const description = ref('');
 const rules = ref('');
 const bannerUrl = ref('');
@@ -40,6 +41,7 @@ function toggleRole(r: string): void {
   else visibleToRoles.value.push(r);
 }
 
+const prizesDescription = ref('');
 interface Prize { place: number | null; category: string; title: string; description: string; value: string }
 const prizes = ref<Prize[]>([]);
 
@@ -50,6 +52,7 @@ const criteria = ref<Criterion[]>([]);
 watch(contest, (c) => {
   if (!c) return;
   title.value = c.title ?? '';
+  subheading.value = c.subheading ?? '';
   description.value = c.description ?? '';
   rules.value = c.rules ?? '';
   bannerUrl.value = c.bannerUrl ?? '';
@@ -62,10 +65,11 @@ watch(contest, (c) => {
   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 }) => ({
+  prizesDescription.value = c.prizesDescription ?? '';
+  prizes.value = (c.prizes ?? []).map((p: { place?: number; category?: string; title?: string; description?: string; value?: string }) => ({
     place: p.place ?? null,
     category: p.category ?? '',
-    title: p.title,
+    title: p.title ?? '',
     description: p.description ?? '',
     value: p.value ?? '',
   }));
@@ -82,10 +86,15 @@ function addPrize(): void {
 function removePrize(index: number): void {
   prizes.value.splice(index, 1);
 }
-function prizeLabel(prize: Prize, idx: number): string {
+function prizeLabel(prize: Prize): string {
   if (prize.category.trim()) return prize.category;
-  const labels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
-  return prize.place ? `${labels[prize.place - 1] || `${prize.place}th`} Place` : `${labels[idx] || `${idx + 1}th`} Place`;
+  if (prize.place && prize.place > 0) {
+    const labels = ['1st', '2nd', '3rd', '4th', '5th', '6th'];
+    return `${labels[prize.place - 1] || `${prize.place}th`} Place`;
+  }
+  // No place + no category: a flexible/description-only prize — don't invent
+  // a placement (the old code labelled these "Nth Place" by row index).
+  return 'Prize';
 }
 
 function addCriterion(): void {
@@ -111,13 +120,13 @@ async function handleSave(): Promise<void> {
   saving.value = true;
   try {
     const prizeData = prizes.value
-      .filter((p) => p.title.trim())
+      .filter((p) => p.title.trim() || p.description.trim() || p.category.trim() || (typeof p.place === 'number' && p.place > 0))
       .map((p) => ({
         place: typeof p.place === 'number' && Number.isFinite(p.place) && p.place > 0 ? p.place : undefined,
         category: p.category.trim() || undefined,
-        title: p.title,
-        description: p.description || undefined,
-        value: p.value || undefined,
+        title: p.title.trim() || undefined,
+        description: p.description.trim() || undefined,
+        value: p.value.trim() || undefined,
       }));
     const criteriaData = criteria.value
       .filter((c) => c.label.trim())
@@ -131,6 +140,7 @@ async function handleSave(): Promise<void> {
       method: 'PUT',
       body: {
         title: title.value,
+        subheading: subheading.value || undefined,
         description: description.value || undefined,
         rules: rules.value || undefined,
         bannerUrl: bannerUrl.value || undefined,
@@ -143,6 +153,7 @@ async function handleSave(): Promise<void> {
         maxEntriesPerUser: maxEntriesPerUser.value && maxEntriesPerUser.value > 0 ? maxEntriesPerUser.value : undefined,
         visibility: visibility.value,
         visibleToRoles: visibility.value === 'private' ? visibleToRoles.value : [],
+        prizesDescription: prizesDescription.value || undefined,
         prizes: prizeData,
         judgingCriteria: criteriaData,
       },
@@ -156,6 +167,20 @@ async function handleSave(): Promise<void> {
   }
 }
 
+const deleting = ref(false);
+async function handleDelete(): Promise<void> {
+  if (!confirm('Permanently delete this contest? All entries, judges, and reviewers are removed. This cannot be undone.')) return;
+  deleting.value = true;
+  try {
+    await $fetch(`/api/contests/${slug}`, { method: 'DELETE' });
+    toast.success('Contest deleted');
+    await navigateTo('/contests');
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+    deleting.value = false;
+  }
+}
+
 async function transitionStatus(newStatus: string): Promise<void> {
   const msg = newStatus === 'cancelled'
     ? 'Cancel this contest? This cannot be undone.'
@@ -190,17 +215,23 @@ async function transitionStatus(newStatus: string): Promise<void> {
           <label class="cpub-form-label">Title</label>
           <input v-model="title" type="text" class="cpub-form-input" />
         </div>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Subheading</label>
+          <input v-model="subheading" type="text" maxlength="300" class="cpub-form-input" placeholder="One-line tagline shown in the contest header" />
+          <p class="cpub-form-hint">Short plain-text tagline shown under the title in the hero. The Description below is the full body.</p>
+        </div>
         <div class="cpub-form-field">
           <label class="cpub-form-label">Description</label>
-          <textarea v-model="description" class="cpub-form-textarea" rows="3" />
+          <textarea v-model="description" class="cpub-form-textarea" rows="4" />
+          <p class="cpub-form-hint">Supports Markdown (headings, lists, bold, links) and inline HTML. Shown formatted on the contest page.</p>
         </div>
         <div class="cpub-form-field">
           <label class="cpub-form-label">Rules</label>
-          <textarea v-model="rules" class="cpub-form-textarea" rows="4" placeholder="One rule per line" />
+          <textarea v-model="rules" class="cpub-form-textarea" rows="6" placeholder="One rule per line, or full Markdown" />
+          <p class="cpub-form-hint">Supports Markdown. Plain one-rule-per-line text is rendered as a numbered list.</p>
         </div>
         <div class="cpub-form-field">
-          <label class="cpub-form-label">Banner Image URL</label>
-          <input v-model="bannerUrl" type="url" class="cpub-form-input" placeholder="https://..." />
+          <ImageUpload v-model="bannerUrl" purpose="banner" label="Banner Image" hint="Wide image shown across the top of the contest page (~4:1)." />
         </div>
       </section>
 
@@ -243,9 +274,15 @@ async function transitionStatus(newStatus: string): Promise<void> {
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Prizes</h2>
+        <p class="cpub-form-hint">Every field is optional. Use <strong>place</strong> for ranked prizes, a <strong>category</strong> for themed awards, or just a <strong>description</strong> — whatever fits. Cash value is optional.</p>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Prizes overview (optional)</label>
+          <textarea v-model="prizesDescription" class="cpub-form-textarea" rows="3" placeholder="Intro shown above the prize cards. Supports Markdown." />
+          <p class="cpub-form-hint">Markdown intro displayed on the Prizes tab, above the individual prizes.</p>
+        </div>
         <div v-for="(prize, i) in prizes" :key="i" class="cpub-prize-row">
           <div class="cpub-prize-header">
-            <span class="cpub-prize-label">{{ prizeLabel(prize, i) }}</span>
+            <span class="cpub-prize-label">{{ prizeLabel(prize) }}</span>
             <button type="button" class="cpub-prize-remove" aria-label="Remove prize" @click="removePrize(i)"><i class="fa-solid fa-times"></i></button>
           </div>
           <div class="cpub-form-row">
@@ -336,6 +373,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
         <div class="cpub-subhead">
           <h3 class="cpub-form-subtitle">Reviewers</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" />
       </section>
 
@@ -348,6 +386,14 @@ async function transitionStatus(newStatus: string): Promise<void> {
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Status Transitions</h2>
+        <p class="cpub-form-hint">
+          A contest moves through a lifecycle:
+          <strong>Upcoming</strong> → <strong>Active</strong> (accepting entries) →
+          <strong>Judging</strong> (entries closed, judges scoring) →
+          <strong>Completed</strong> (results &amp; rankings published). You can cancel at any
+          point before it completes. Current status:
+          <span class="cpub-status-badge" :class="`cpub-status-${contest.status}`">{{ contest.status }}</span>
+        </p>
         <div class="cpub-status-actions">
           <button v-if="contest.status === 'upcoming'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-activate" @click="transitionStatus('active')">
             <i class="fa-solid fa-play"></i> Start Contest
@@ -356,7 +402,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
             <i class="fa-solid fa-gavel"></i> Begin Judging
           </button>
           <button v-if="contest.status === 'judging'" type="button" class="cpub-btn cpub-transition-btn cpub-transition-complete" @click="transitionStatus('completed')">
-            <i class="fa-solid fa-flag-checkered"></i> Complete
+            <i class="fa-solid fa-flag-checkered"></i> Complete &amp; Publish Results
           </button>
           <button
             v-if="contest.status !== 'completed' && contest.status !== 'cancelled'"
@@ -366,12 +412,29 @@ async function transitionStatus(newStatus: string): Promise<void> {
           >
             <i class="fa-solid fa-ban"></i> Cancel Contest
           </button>
+          <p v-if="contest.status === 'completed' || contest.status === 'cancelled'" class="cpub-status-terminal">
+            <i class="fa-solid fa-circle-check"></i>
+            This contest is {{ contest.status }} — no further status changes are available.
+          </p>
         </div>
       </section>
 
       <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !title.trim() || !!dateError">
         <i class="fa-solid fa-floppy-disk"></i> {{ saving ? 'Saving...' : 'Save Changes' }}
       </button>
+
+      <section 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>
+            <p class="cpub-danger-label">Delete this contest</p>
+            <p class="cpub-form-hint">Permanently removes the contest and all of its entries, judges, and reviewers. This cannot be undone.</p>
+          </div>
+          <button type="button" class="cpub-btn cpub-btn-danger cpub-danger-btn" :disabled="deleting" @click="handleDelete">
+            <i class="fa-solid fa-trash"></i> {{ deleting ? 'Deleting...' : 'Delete Contest' }}
+          </button>
+        </div>
+      </section>
     </form>
   </div>
   <div v-else class="cpub-not-found"><p>Contest not found</p></div>
@@ -426,6 +489,16 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-transition-complete { color: var(--accent); border-color: var(--accent-border); }
 .cpub-transition-cancel { color: var(--red); border-color: var(--red-border); }
 
+.cpub-status-terminal { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; margin: 0; }
+.cpub-status-terminal i { color: var(--green); }
+
+.cpub-danger-zone { border-color: var(--red-border); }
+.cpub-danger-title { color: var(--red); }
+.cpub-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.cpub-danger-label { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
+.cpub-danger-btn { color: var(--red); border-color: var(--red-border); flex-shrink: 0; }
+.cpub-danger-btn:hover:not(:disabled) { background: var(--red-bg); }
+
 .cpub-not-found { text-align: center; padding: 64px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 12px; }
 
 @media (max-width: 768px) {