@commonpub/layer 0.84.0 → 0.85.0

package/components/contest/ContestBannerAdjust.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+/**
+ * ContestBannerAdjust — non-destructive framing control for a contest banner or
+ * cover (P4). A live preview at the target aspect ratio + a zoom slider (0 = fit/
+ * contain) + drag-to-reposition. Writes a `ContestImageMeta` ({ zoom, x, y })
+ * v-model; the original image is never re-cropped. Render parity with the public
+ * hero is guaranteed by sharing `imageFramingStyle` (utils/contestImage.ts).
+ */
+import type { ContestImageMeta } from '@commonpub/schema';
+import { imageFramingStyle, defaultImageMeta } from '../../utils/contestImage';
+
+defineProps<{
+  imageUrl: string;
+  /** CSS aspect-ratio for the preview box, e.g. '4 / 1' (banner), '4 / 3' (cover). */
+  aspect?: string;
+  label?: string;
+}>();
+const meta = defineModel<ContestImageMeta | null>({ default: null });
+
+const ZOOM_MAX = 1.5;
+const current = computed<ContestImageMeta>(() => meta.value ?? defaultImageMeta());
+const framing = computed(() => imageFramingStyle(meta.value));
+
+function patch(p: Partial<ContestImageMeta>): void {
+  meta.value = { ...current.value, ...p };
+}
+function onZoom(e: Event): void {
+  patch({ zoom: Number((e.target as HTMLInputElement).value) });
+}
+function reset(): void {
+  meta.value = null;
+}
+
+// ─── Drag to reposition (sets x/y as percent) ───
+const boxRef = ref<HTMLElement | null>(null);
+const dragging = ref(false);
+let startX = 0;
+let startY = 0;
+let startPosX = 50;
+let startPosY = 50;
+
+function onPointerDown(e: PointerEvent): void {
+  if (!boxRef.value) return;
+  dragging.value = true;
+  startX = e.clientX;
+  startY = e.clientY;
+  startPosX = current.value.x;
+  startPosY = current.value.y;
+  document.addEventListener('pointermove', onPointerMove);
+  document.addEventListener('pointerup', onPointerUp);
+}
+function onPointerMove(e: PointerEvent): void {
+  if (!dragging.value || !boxRef.value) return;
+  const rect = boxRef.value.getBoundingClientRect();
+  // Drag right reveals the LEFT of the image (object-position decreases), so invert.
+  const dx = ((e.clientX - startX) / Math.max(1, rect.width)) * 100;
+  const dy = ((e.clientY - startY) / Math.max(1, rect.height)) * 100;
+  patch({ x: clamp(startPosX - dx), y: clamp(startPosY - dy) });
+}
+function onPointerUp(): void {
+  dragging.value = false;
+  document.removeEventListener('pointermove', onPointerMove);
+  document.removeEventListener('pointerup', onPointerUp);
+}
+function clamp(n: number): number {
+  return Math.max(0, Math.min(100, Math.round(n)));
+}
+onUnmounted(() => {
+  document.removeEventListener('pointermove', onPointerMove);
+  document.removeEventListener('pointerup', onPointerUp);
+});
+
+const zoomLabel = computed(() => (current.value.zoom <= 0 ? 'Fit' : `${Math.round(current.value.zoom * 100)}%`));
+</script>
+
+<template>
+  <div class="cpub-ba">
+    <div
+      ref="boxRef"
+      class="cpub-ba-box"
+      :class="{ 'cpub-ba-drag': dragging }"
+      :style="{ aspectRatio: aspect ?? '4 / 1' }"
+      @pointerdown="onPointerDown"
+    >
+      <img :src="imageUrl" :alt="label ?? 'Image preview'" class="cpub-ba-img" :style="framing" draggable="false" />
+      <span class="cpub-ba-hint"><i class="fa-solid fa-up-down-left-right"></i> Drag to reposition</span>
+    </div>
+    <div class="cpub-ba-controls">
+      <label class="cpub-ba-zoom">
+        <span class="cpub-ba-zoom-label">Zoom <strong>{{ zoomLabel }}</strong></span>
+        <input
+          type="range"
+          min="0"
+          :max="ZOOM_MAX"
+          step="0.05"
+          :value="current.zoom"
+          :aria-label="`${label ?? 'Image'} zoom (0 is fit)`"
+          @input="onZoom"
+        />
+      </label>
+      <button type="button" class="cpub-btn cpub-btn-sm cpub-ba-reset" :disabled="!meta" @click="reset">
+        <i class="fa-solid fa-rotate-left"></i> Reset
+      </button>
+    </div>
+    <p class="cpub-ba-help">Zoom 0 fits the whole image. Increase to fill and crop; drag the preview to choose what shows.</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-ba { display: flex; flex-direction: column; gap: 8px; }
+.cpub-ba-box { position: relative; width: 100%; overflow: hidden; border: var(--border-width-default) solid var(--border); background: var(--surface2); cursor: grab; touch-action: none; }
+.cpub-ba-drag { cursor: grabbing; }
+.cpub-ba-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
+.cpub-ba-hint { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text); background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 3px 7px; display: inline-flex; align-items: center; gap: 5px; opacity: .85; pointer-events: none; }
+.cpub-ba-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.cpub-ba-zoom { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
+.cpub-ba-zoom-label { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); white-space: nowrap; }
+.cpub-ba-zoom input[type='range'] { flex: 1; accent-color: var(--accent); }
+.cpub-ba-reset { flex-shrink: 0; }
+.cpub-ba-help { margin: 0; font-size: 11px; color: var(--text-faint); line-height: 1.5; }
+</style>

package/components/contest/ContestEditor.vue

@@ -64,7 +64,7 @@ const editor = useContestEditor({
 const {
   title, slugInput, slugTouched, subheading, descriptionBlocks, rulesBlocks, prizesBlocks,
   description, descriptionFormat, rules, rulesFormat, prizesDescription, prizesDescriptionFormat,
-  bannerUrl, coverImageUrl, startDate, endDate, judgingEndDate, communityVotingEnabled,
+  bannerUrl, coverImageUrl, bannerMeta, coverMeta, startDate, endDate, judgingEndDate, communityVotingEnabled,
   judgingVisibility, eligibleContentTypes, maxEntriesPerUser, visibility, visibleToRoles,
   showPrizes, prizes, criteria, stages, currentStageId,
   saving, formDirty, dateError, canSubmit, slugify, toggleType, toggleRole, addPrize, removePrize, prizeLabel, save,
@@ -105,6 +105,20 @@ const scheduleRoadmap = computed(() => roadmapFromSchedule(stages.value, { start
 provide(CONTEST_SCHEDULE_KEY, scheduleRoadmap);
 const { uploadFile } = useFileUpload();
 provide(UPLOAD_HANDLER_KEY, (file: File) => uploadFile<{ url: string; width?: number | null; height?: number | null }>(file, 'content'));
+// Feed the Judges Showcase block a loader for the real scoring panel, so it can
+// offer "Import panel judges" (name + account avatar). Empty in create mode (no
+// slug yet). Maps the judges API row shape to the showcase's curated-row shape.
+provide(CONTEST_JUDGES_KEY, async () => {
+  if (!slug.value) return [];
+  const rows = await $fetch<Array<{ userName: string; userAvatar?: string | null; userUsername: string; role: string }>>(
+    `/api/contests/${slug.value}/judges`,
+  );
+  return rows.map((r) => ({
+    name: r.userName,
+    avatarUrl: r.userAvatar ?? undefined,
+    link: r.userUsername ? `/u/${r.userUsername}` : undefined,
+  }));
+});
 
 // Editor -> model write-back: each body's blocks flow into the composable's
 // descriptionBlocks/rulesBlocks/prizesBlocks refs (read by buildPayload).
@@ -242,6 +256,12 @@ function uploadMedia(event: Event, target: Ref<string>, purpose: string): void {
 function onBannerUpload(e: Event): void { uploadMedia(e, bannerUrl, 'banner'); }
 function onCoverUpload(e: Event): void { uploadMedia(e, coverImageUrl, 'cover'); }
 function onBannerUrl(): void { const url = window.prompt('Enter banner image URL:'); if (url) bannerUrl.value = url; }
+// Non-destructive framing (P4): toggle the zoom/reposition panels per image; the
+// inline previews mirror the public hero via the shared imageFramingStyle util.
+const showBannerAdjust = ref(false);
+const showCoverAdjust = ref(false);
+const bannerPreviewStyle = computed(() => imageFramingStyle(bannerMeta.value));
+const coverPreviewStyle = computed(() => imageFramingStyle(coverMeta.value));
 
 // --- Right-rail collapsible sections ---
 const openSections = ref<Record<string, boolean>>({
@@ -467,7 +487,7 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
           <template #overview-lead>
             <div class="cpub-ce-media">
               <div class="cpub-ce-banner" :class="{ 'has-image': !!bannerUrl }">
-                <img v-if="bannerUrl" :src="bannerUrl" alt="Contest banner" class="cpub-ce-banner-img" />
+                <img v-if="bannerUrl" :src="bannerUrl" alt="Contest banner" class="cpub-ce-banner-img" :style="bannerPreviewStyle" />
                 <div v-else class="cpub-ce-media-placeholder">
                   <i class="fa-regular fa-image"></i>
                   <span>Banner image</span>
@@ -478,12 +498,13 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
                     <input type="file" accept="image/*" class="cpub-sr-only" aria-label="Upload banner image" @change="onBannerUpload">
                   </label>
                   <button type="button" class="cpub-ce-media-btn" @click="onBannerUrl"><i class="fa-solid fa-link"></i> URL</button>
+                  <button v-if="bannerUrl" type="button" class="cpub-ce-media-btn" :class="{ active: showBannerAdjust }" @click="showBannerAdjust = !showBannerAdjust"><i class="fa-solid fa-crop-simple"></i> Adjust</button>
                   <button v-if="bannerUrl" type="button" class="cpub-ce-media-btn" @click="bannerUrl = ''"><i class="fa-solid fa-trash"></i> Remove</button>
                 </div>
 
                 <!-- Cover thumbnail, inset over the banner's lower-left (mirrors the public hero). -->
                 <div class="cpub-ce-cover" :class="{ 'has-image': !!coverImageUrl }">
-                  <img v-if="coverImageUrl" :src="coverImageUrl" alt="Contest cover" class="cpub-ce-cover-img" />
+                  <img v-if="coverImageUrl" :src="coverImageUrl" alt="Contest cover" class="cpub-ce-cover-img" :style="coverPreviewStyle" />
                   <div v-else class="cpub-ce-media-placeholder cpub-ce-media-placeholder-sm">
                     <i class="fa-regular fa-image"></i>
                     <span>Cover</span>
@@ -493,11 +514,17 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
                       <i class="fa-solid fa-arrow-up-from-bracket"></i>
                       <input type="file" accept="image/*" class="cpub-sr-only" aria-label="Upload cover image" @change="onCoverUpload">
                     </label>
+                    <button v-if="coverImageUrl" type="button" class="cpub-ce-media-btn cpub-ce-media-btn-icon" :class="{ active: showCoverAdjust }" title="Adjust cover framing" @click="showCoverAdjust = !showCoverAdjust"><i class="fa-solid fa-crop-simple"></i></button>
                     <button v-if="coverImageUrl" type="button" class="cpub-ce-media-btn cpub-ce-media-btn-icon" title="Remove cover" @click="coverImageUrl = ''"><i class="fa-solid fa-trash"></i></button>
                   </div>
                 </div>
               </div>
-              <p class="cpub-form-hint cpub-ce-media-hint">Banner is the wide hero (~4:1). Cover is the card thumbnail in listings (~4:3); it falls back to the banner if unset.</p>
+
+              <!-- Non-destructive framing panels (P4) -->
+              <ContestBannerAdjust v-if="bannerUrl && showBannerAdjust" v-model="bannerMeta" :image-url="bannerUrl" aspect="4 / 1" label="Banner" class="cpub-ce-adjust" />
+              <ContestBannerAdjust v-if="coverImageUrl && showCoverAdjust" v-model="coverMeta" :image-url="coverImageUrl" aspect="4 / 3" label="Cover" class="cpub-ce-adjust" />
+
+              <p class="cpub-form-hint cpub-ce-media-hint">Banner is the wide hero (~4:1). Cover is the card thumbnail in listings (~4:3); it falls back to the banner if unset. Use Adjust to zoom and reposition without re-cropping.</p>
             </div>
           </template>
 
@@ -860,7 +887,9 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
 .cpub-ce-media-btn:hover { background: var(--surface2); }
 .cpub-ce-media-btn.primary:hover { opacity: 0.9; background: var(--accent); }
 .cpub-ce-media-btn-icon { padding: 5px 7px; }
+.cpub-ce-media-btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
 .cpub-ce-media-hint { margin: 0; }
+.cpub-ce-adjust { margin-top: 8px; padding: 10px; border: var(--border-width-default) solid var(--border); background: var(--surface2); }
 .cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
 
 /* --- Responsive: stack the rail under the body on narrow viewports --- */

package/components/contest/ContestHero.vue

@@ -16,6 +16,10 @@ const emit = defineEmits<{
 
 const c = computed(() => props.contest);
 
+// Non-destructive banner framing (P4). null/absent ⇒ the legacy cover fit, so
+// existing contests look identical until an organiser adjusts framing.
+const bannerStyle = computed(() => imageFramingStyle(c.value?.bannerMeta ?? null));
+
 // Local wall-clock formatting (dates) and the live countdown are timezone- and
 // clock-dependent, so they would mismatch between the server's TZ and the viewer's
 // on hydration (and Vue won't rectify it in prod). Gate them on a client `mounted`
@@ -142,7 +146,7 @@ const entryCount = computed<number>(() => c.value?.entryCount ?? 0);
   <div class="cpub-hero">
     <!-- Slim banner band (constrained) — the hero image, not a tall block. -->
     <div v-if="c?.bannerUrl" class="cpub-hero-banner">
-      <img :src="c.bannerUrl" :alt="`${c?.title || 'Contest'} banner`" />
+      <img :src="c.bannerUrl" :alt="`${c?.title || 'Contest'} banner`" :style="bannerStyle" />
     </div>
 
     <!-- Compact bar — title + status + meta + actions in one tight, clean band

package/components/contest/ContestProposalForm.vue

@@ -20,6 +20,7 @@ const toast = useToast();
 const { extract: extractError } = useApiError();
 
 const template = computed(() => props.stage.submissionTemplate ?? []);
+const instructions = computed(() => (props.stage.instructionsBlocks ?? []) as [string, Record<string, unknown>][]);
 const values = ref<Record<string, string>>({});
 watch(template, (t) => {
   const next: Record<string, string> = {};
@@ -59,6 +60,7 @@ async function submit(): Promise<void> {
       <h3 class="cpub-proposal-title"><i class="fa-solid fa-clipboard-list"></i> {{ stage.name }}: submit a proposal</h3>
     </div>
     <p v-if="stage.description" class="cpub-proposal-desc">{{ stage.description }}</p>
+    <BlocksBlockContentRenderer v-if="instructions.length" :blocks="instructions" class="cpub-prose cpub-md cpub-proposal-intro" />
     <p class="cpub-proposal-desc">Submitting creates a draft project you can develop for later rounds. You can edit it any time.</p>
 
     <ContestSubmissionField
@@ -84,5 +86,6 @@ async function submit(): Promise<void> {
 .cpub-proposal-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
 .cpub-proposal-title i { color: var(--accent); }
 .cpub-proposal-desc { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.6; }
+.cpub-proposal-intro { margin: 0 0 12px; }
 .cpub-proposal-actions { display: flex; align-items: center; gap: 10px; }
 </style>

package/components/contest/ContestStageCard.vue

@@ -8,6 +8,7 @@
  * submission-form builder) re-derive `useFeatures()` here rather than prop-drilling.
  */
 import type { ContestStage } from '@commonpub/schema';
+import type { BlockTuple } from '@commonpub/editor';
 import ContestStageTemplateEditor from './ContestStageTemplateEditor.vue';
 
 const props = defineProps<{
@@ -44,6 +45,10 @@ function advanceCountInput(e: Event): void {
 function onTemplateUpdate(template: ContestStage['submissionTemplate']): void {
   setField({ submissionTemplate: template && template.length ? template : undefined });
 }
+// Same for the block intro (empty → drop the key).
+function onInstructionsUpdate(blocks: BlockTuple[]): void {
+  setField({ instructionsBlocks: blocks.length ? (blocks as ContestStage['instructionsBlocks']) : undefined });
+}
 </script>
 
 <template>
@@ -157,7 +162,9 @@ function onTemplateUpdate(template: ContestStage['submissionTemplate']): void {
     <ContestStageTemplateEditor
       v-if="stage.kind === 'submission' && templatesEnabled"
       :template="stage.submissionTemplate ?? []"
+      :instructions="(stage.instructionsBlocks as BlockTuple[] | undefined)"
       @update:template="onTemplateUpdate"
+      @update:instructions="onInstructionsUpdate"
     />
 
     <div v-if="stage.kind === 'event'" class="cpub-form-row">

package/components/contest/ContestStageSubmission.vue

@@ -28,6 +28,7 @@ const toast = useToast();
 const { extract: extractError } = useApiError();
 
 const template = computed(() => props.stage.submissionTemplate ?? []);
+const instructions = computed(() => (props.stage.instructionsBlocks ?? []) as [string, Record<string, unknown>][]);
 // Eliminated entries are out of later rounds; don't offer the form for them.
 const eligibleEntries = computed(() => props.entries.filter((e) => !e.eliminated));
 const selectedEntryId = ref<string>('');
@@ -94,6 +95,7 @@ function submittedAtLabel(iso: string): string {
       </span>
     </div>
     <p v-if="stage.description" class="cpub-stagesub-desc">{{ stage.description }}</p>
+    <BlocksBlockContentRenderer v-if="instructions.length" :blocks="instructions" class="cpub-prose cpub-md cpub-stagesub-intro" />
 
     <div v-if="eligibleEntries.length > 1" class="cpub-stagesub-field">
       <label class="cpub-stagesub-label" for="cpub-stagesub-entry">Entry</label>
@@ -134,6 +136,7 @@ function submittedAtLabel(iso: string): string {
 .cpub-stagesub-done { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
 .cpub-stagesub-todo { color: var(--text-dim); border-color: var(--border2); background: var(--surface2); }
 .cpub-stagesub-desc { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.6; }
+.cpub-stagesub-intro { margin: 0 0 12px; }
 .cpub-stagesub-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
 .cpub-stagesub-label { font-size: 11px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
 .cpub-stagesub-req { color: var(--red); }

package/components/contest/ContestStageTemplateEditor.vue

@@ -4,16 +4,38 @@
  * from ContestStagesEditor so the (heaviest, flag-gated) part of the stage card is
  * its own cohesive unit. Operates on ONE stage's `submissionTemplate` array and
  * emits the whole new array (`update:template`); the pure array ops live in
- * utils/contestStages.ts. The agreement/address field types + the per-field PII
- * toggle are gated behind `features.contestPii` (rule #2); PII *access* is always
- * gated server-side by the `contest.pii` permission regardless.
+ * utils/contestStages.ts. P2 added (a) one-click field PRESETS, (b) whole-form
+ * TEMPLATES, and (c) a block INTRO rendered above the fields on the public form.
+ *
+ * The intro is authored as markdown but STORED as `instructionsBlocks` (BlockTuple[]
+ * — the same shape the contest bodies use), so it renders through BlockContentRenderer
+ * identically in this preview and on the public submission form. Full drag-drop block
+ * editing of the intro is deferred (markdown + live preview is enough, same call the
+ * plan made for agreement terms); the storage already supports upgrading later.
+ *
+ * The agreement/address field types + the per-field PII toggle are gated behind
+ * `features.contestPii` (rule #2); PII *access* is always gated server-side by the
+ * `contest.pii` permission regardless.
  */
 import type { ContestSubmissionTemplateField } from '@commonpub/schema';
+import { markdownToBlockTuples, blockTuplesToMarkdown, type BlockTuple } from '@commonpub/editor';
+import {
+  availableFieldPresets,
+  availableFormTemplates,
+  templatePresetAdded,
+  type FieldPreset,
+  type SubmissionFormTemplate,
+} from '../../utils/contestSubmissionTemplates';
 
 const props = defineProps<{
   template: ContestSubmissionTemplateField[];
+  /** This stage's block intro (rendered above the fields on the public form). */
+  instructions?: BlockTuple[];
+}>();
+const emit = defineEmits<{
+  'update:template': [template: ContestSubmissionTemplateField[]];
+  'update:instructions': [blocks: BlockTuple[]];
 }>();
-const emit = defineEmits<{ 'update:template': [template: ContestSubmissionTemplateField[]] }>();
 
 const { features } = useFeatures();
 const piiEnabled = computed(() => features.value.contestPii === true);
@@ -23,9 +45,47 @@ const FIELD_TYPES = computed<ContestSubmissionTemplateField['type'][]>(() => {
   return base;
 });
 
-function addField(): void {
-  emit('update:template', templateFieldAdded(props.template));
+const fieldPresets = computed(() => availableFieldPresets(piiEnabled.value));
+const formTemplates = computed(() => availableFormTemplates(piiEnabled.value));
+
+// ─── Two small dropdown menus (Add field · Use a template) ───
+const menuWrap = ref<HTMLElement | null>(null);
+const openMenu = ref<'add' | 'template' | null>(null);
+function toggleMenu(which: 'add' | 'template'): void {
+  openMenu.value = openMenu.value === which ? null : which;
+}
+function closeMenu(): void {
+  openMenu.value = null;
+}
+function onDocPointer(e: PointerEvent): void {
+  if (openMenu.value && menuWrap.value && !menuWrap.value.contains(e.target as Node)) closeMenu();
 }
+function onDocKey(e: KeyboardEvent): void {
+  if (e.key === 'Escape' && openMenu.value) closeMenu();
+}
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocPointer);
+  document.addEventListener('keydown', onDocKey);
+});
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onDocPointer);
+  document.removeEventListener('keydown', onDocKey);
+});
+
+function addPreset(preset: FieldPreset): void {
+  emit('update:template', templatePresetAdded(props.template, preset));
+  closeMenu();
+}
+function applyFormTemplate(tpl: SubmissionFormTemplate): void {
+  closeMenu();
+  // Replacing a non-empty form is destructive — confirm before clobbering.
+  if (props.template.length && typeof window !== 'undefined' && !window.confirm(`Replace the current ${props.template.length} field(s) with the "${tpl.label}" template?`)) {
+    return;
+  }
+  emit('update:template', tpl.build({ pii: piiEnabled.value }));
+}
+
+// ─── Per-field edits (delegate to the pure array ops) ───
 function labelInput(fi: number, e: Event): void {
   emit('update:template', templateFieldLabelChanged(props.template, fi, (e.target as HTMLInputElement).value));
 }
@@ -47,15 +107,120 @@ function setOption(fi: number, oi: number, patch: Partial<{ value: string; label
 function removeOption(fi: number, oi: number): void {
   emit('update:template', templateOptionRemoved(props.template, fi, oi));
 }
+
+// ─── Block intro (markdown ⇄ BlockTuple[]) ───
+const showIntro = ref((props.instructions?.length ?? 0) > 0);
+const introText = ref(blockTuplesToMarkdown(props.instructions ?? []));
+const introPreview = computed<BlockTuple[]>(() => markdownToBlockTuples(introText.value));
+// Re-sync only on a GENUINELY external change (a form-template reset, a reorder
+// reusing this instance). Our own keystroke emits the same blocks straight back;
+// re-deriving markdown from them isn't char-exact (round-trip normalisation), so a
+// naive `md !== introText` resync would fight the caret. Compare BLOCKS instead:
+// if the incoming blocks already match what our current text produces, it's our
+// echo — skip.
+watch(
+  () => props.instructions,
+  (b) => {
+    const incoming = JSON.stringify(b ?? []);
+    if (incoming === JSON.stringify(introPreview.value)) return; // our own echo
+    introText.value = blockTuplesToMarkdown(b ?? []);
+    if ((b?.length ?? 0) > 0) showIntro.value = true;
+  },
+);
+function onIntroInput(e: Event): void {
+  introText.value = (e.target as HTMLTextAreaElement).value;
+  emit('update:instructions', introText.value.trim() ? introPreview.value : []);
+}
+function toggleIntro(): void {
+  showIntro.value = !showIntro.value;
+  if (!showIntro.value && introText.value.trim()) {
+    introText.value = '';
+    emit('update:instructions', []);
+  }
+}
 </script>
 
 <template>
   <div class="cpub-stage-criteria">
     <div class="cpub-stage-criteria-head">
       <span class="cpub-form-label" style="margin: 0;">Submission form, this stage</span>
-      <button type="button" class="cpub-btn cpub-btn-sm" @click="addField"><i class="fa-solid fa-plus"></i> Add field</button>
+      <div ref="menuWrap" class="cpub-stf-menus">
+        <!-- Use a template -->
+        <div class="cpub-stf-menu">
+          <button
+            type="button"
+            class="cpub-btn cpub-btn-sm"
+            aria-haspopup="menu"
+            :aria-expanded="openMenu === 'template'"
+            @click="toggleMenu('template')"
+          >
+            <i class="fa-solid fa-wand-magic-sparkles"></i> Use a template <i class="fa-solid fa-chevron-down"></i>
+          </button>
+          <div v-if="openMenu === 'template'" class="cpub-stf-dropdown" role="menu" aria-label="Submission form templates">
+            <button
+              v-for="tpl in formTemplates"
+              :key="tpl.id"
+              type="button"
+              role="menuitem"
+              class="cpub-stf-item"
+              @click="applyFormTemplate(tpl)"
+            >
+              <span class="cpub-stf-item-label">{{ tpl.label }}</span>
+              <span class="cpub-stf-item-desc">{{ tpl.description }}</span>
+            </button>
+          </div>
+        </div>
+        <!-- Add a field (presets) -->
+        <div class="cpub-stf-menu">
+          <button
+            type="button"
+            class="cpub-btn cpub-btn-sm"
+            aria-haspopup="menu"
+            :aria-expanded="openMenu === 'add'"
+            @click="toggleMenu('add')"
+          >
+            <i class="fa-solid fa-plus"></i> Add field <i class="fa-solid fa-chevron-down"></i>
+          </button>
+          <div v-if="openMenu === 'add'" class="cpub-stf-dropdown" role="menu" aria-label="Field presets">
+            <button
+              v-for="preset in fieldPresets"
+              :key="preset.id"
+              type="button"
+              role="menuitem"
+              class="cpub-stf-item cpub-stf-item-row"
+              @click="addPreset(preset)"
+            >
+              <i class="fa-solid cpub-stf-item-icon" :class="preset.icon"></i>
+              <span class="cpub-stf-item-label">{{ preset.label }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
     <p class="cpub-form-hint" style="margin: 4px 0;">Optional. Add fields entrants must fill for this stage (e.g. a proposal summary, or a repository link for a prototype round). Leave empty if entering a project is enough.</p>
+
+    <!-- Block intro: rich instructions shown above the fields on the public form. -->
+    <div class="cpub-stf-intro">
+      <label class="cpub-stage-tfield-req">
+        <input type="checkbox" :checked="showIntro" aria-label="Add instructions above the form" @change="toggleIntro" />
+        <span>Add instructions above the form</span>
+      </label>
+      <div v-if="showIntro" class="cpub-stf-intro-edit">
+        <textarea
+          :value="introText"
+          class="cpub-form-input cpub-form-textarea"
+          rows="3"
+          placeholder="Markdown instructions shown above the form (what to submit, tips, links)."
+          aria-label="Form instructions (markdown)"
+          @input="onIntroInput"
+        ></textarea>
+        <div v-if="introPreview.length" class="cpub-stf-intro-preview">
+          <span class="cpub-form-hint" style="margin: 0 0 4px;">Preview</span>
+          <BlocksBlockContentRenderer :blocks="introPreview" class="cpub-prose cpub-md" />
+        </div>
+      </div>
+    </div>
+
     <div v-for="(tf, fi) in template" :key="fi" class="cpub-stage-tfield">
       <div class="cpub-stage-tfield-main">
         <input
@@ -175,7 +340,25 @@ function removeOption(fi: number, oi: number): void {
 .cpub-stage-del:hover { border-color: var(--red-border); color: var(--red); }
 
 .cpub-stage-criteria { border: var(--border-width-default) dashed var(--border2); padding: 10px; margin-top: 4px; background: var(--surface); }
-.cpub-stage-criteria-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.cpub-stage-criteria-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+
+/* Add-field / template dropdown menus */
+.cpub-stf-menus { display: flex; gap: 6px; }
+.cpub-stf-menu { position: relative; }
+.cpub-stf-dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; max-height: 320px; overflow-y: auto; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
+.cpub-stf-item { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 8px 10px; background: transparent; border: none; border-bottom: var(--border-width-default) solid var(--border2); cursor: pointer; color: var(--text); }
+.cpub-stf-item:last-child { border-bottom: none; }
+.cpub-stf-item:hover { background: var(--accent-bg); }
+.cpub-stf-item-row { flex-direction: row; align-items: center; gap: 8px; }
+.cpub-stf-item-icon { color: var(--accent); width: 16px; text-align: center; }
+.cpub-stf-item-label { font-size: var(--text-sm); font-weight: 600; }
+.cpub-stf-item-desc { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.4; }
+
+/* Block intro */
+.cpub-stf-intro { margin: 8px 0; padding: 8px; border: var(--border-width-default) dashed var(--border2); background: var(--surface2); }
+.cpub-stf-intro-edit { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
+.cpub-stf-intro-preview { border-top: var(--border-width-default) dashed var(--border2); padding-top: 8px; }
+
 .cpub-stage-tfield { margin-top: 8px; padding-top: 8px; border-top: var(--border-width-default) dashed var(--border2); }
 .cpub-stage-tfield:first-of-type { border-top: 0; padding-top: 0; }
 .cpub-stage-tfield-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

package/components/contest/blocks/JudgesShowcaseBlock.vue

@@ -2,14 +2,29 @@
 /**
  * Edit component for the `judgesShowcase` contest block (avatar + name + title +
  * bio cards). Provided to BlockCanvas via BLOCK_COMPONENTS_KEY by the contest
- * editor (2e). Follows the house block-edit contract: `content` in, `update` out,
- * immutable list ops. Avatars are URLs here; 2e can swap to <ImageUpload>.
+ * editor. Follows the house block-edit contract: `content` in, `update` out,
+ * immutable list ops.
+ *
+ * P6 de-friction: avatars now upload via the contest editor's UPLOAD_HANDLER_KEY
+ * (URL still accepted), rows reorder, and "Import panel judges" seeds rows from
+ * the real scoring panel (CONTEST_JUDGES_KEY) in one click. The Judges Showcase
+ * is the curated PUBLIC face (custom photos/titles); the scoring panel (People
+ * rail) is the real accounts who score — two distinct concepts, hence the note.
  */
+import { inject, ref } from 'vue';
+import { UPLOAD_HANDLER_KEY } from '@commonpub/editor/vue';
+import { CONTEST_JUDGES_KEY } from '../../../utils/contestBlocks';
 import type { JudgeShowcaseEntry, JudgesShowcaseContent } from '../../../types/contestBlocks';
 
 const props = defineProps<{ content: Record<string, unknown> }>();
 const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
 
+const uploadHandler = inject(UPLOAD_HANDLER_KEY, undefined);
+const loadPanelJudges = inject(CONTEST_JUDGES_KEY, null);
+const uploadingIndex = ref<number | null>(null);
+const importing = ref(false);
+const importNote = ref('');
+
 const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading : ''));
 const judges = computed<JudgeShowcaseEntry[]>(() =>
   Array.isArray(props.content.judges) ? (props.content.judges as JudgeShowcaseEntry[]) : [],
@@ -30,6 +45,50 @@ function setJudge(i: number, field: keyof JudgeShowcaseEntry, v: string): void {
 function removeJudge(i: number): void {
   commit({ judges: judges.value.filter((_, idx) => idx !== i) });
 }
+function moveJudge(i: number, dir: -1 | 1): void {
+  const j = i + dir;
+  if (j < 0 || j >= judges.value.length) return;
+  const next = [...judges.value];
+  [next[i], next[j]] = [next[j]!, next[i]!];
+  commit({ judges: next });
+}
+
+async function onFile(i: number, event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (!file || !uploadHandler) return;
+  uploadingIndex.value = i;
+  try {
+    const res = await uploadHandler(file);
+    setJudge(i, 'avatarUrl', res.url);
+  } finally {
+    uploadingIndex.value = null;
+  }
+}
+
+async function importPanelJudges(): Promise<void> {
+  if (!loadPanelJudges || importing.value) return;
+  importing.value = true;
+  importNote.value = '';
+  try {
+    const panel = await loadPanelJudges();
+    const have = new Set(judges.value.map((j) => (j.name ?? '').trim().toLowerCase()).filter(Boolean));
+    const additions: JudgeShowcaseEntry[] = panel
+      .filter((p) => p.name.trim() && !have.has(p.name.trim().toLowerCase()))
+      .map((p) => ({ name: p.name, avatarUrl: p.avatarUrl, title: p.title, link: p.link }));
+    if (!additions.length) {
+      importNote.value = panel.length ? 'All panel judges are already shown.' : 'No panel judges to import yet.';
+      return;
+    }
+    commit({ judges: [...judges.value, ...additions] });
+    importNote.value = `Imported ${additions.length} judge${additions.length === 1 ? '' : 's'}. Add photos and titles below.`;
+  } catch {
+    importNote.value = 'Could not load the judges panel.';
+  } finally {
+    importing.value = false;
+  }
+}
 </script>
 
 <template>
@@ -38,10 +97,25 @@ function removeJudge(i: number): void {
       <div class="cpub-jedit-icon"><i class="fa-solid fa-user-group"></i></div>
       <span class="cpub-jedit-title">Judges Showcase</span>
       <span class="cpub-jedit-count">{{ judges.length }} {{ judges.length === 1 ? 'person' : 'people' }}</span>
+      <button
+        v-if="loadPanelJudges"
+        type="button"
+        class="cpub-jedit-add"
+        :disabled="importing"
+        @click="importPanelJudges"
+      >
+        <i class="fa-solid fa-user-plus"></i> {{ importing ? 'Importing...' : 'Import panel judges' }}
+      </button>
       <button type="button" class="cpub-jedit-add" @click="addJudge"><i class="fa-solid fa-plus"></i> Add person</button>
     </div>
 
     <div class="cpub-jedit-body">
+      <p class="cpub-jedit-explain">
+        <i class="fa-solid fa-circle-info"></i>
+        These are the curated public faces (custom photos and titles). The scoring panel, who actually
+        rate entries, is managed under People. Use Import panel judges to start from that list.
+      </p>
+
       <input
         class="cpub-jedit-input cpub-jedit-heading"
         type="text"
@@ -51,13 +125,30 @@ function removeJudge(i: number): void {
         @input="setHeading(($event.target as HTMLInputElement).value)"
       />
 
+      <p v-if="importNote" class="cpub-jedit-note" role="status">{{ importNote }}</p>
+
       <div v-for="(j, i) in judges" :key="i" class="cpub-jedit-row">
         <div class="cpub-jedit-row-main">
           <input class="cpub-jedit-input" type="text" :value="j.name" placeholder="Name" :aria-label="`Person ${i + 1} name`" @input="setJudge(i, 'name', ($event.target as HTMLInputElement).value)" />
           <input class="cpub-jedit-input" type="text" :value="j.title ?? ''" placeholder="Title / affiliation" :aria-label="`Person ${i + 1} title`" @input="setJudge(i, 'title', ($event.target as HTMLInputElement).value)" />
+          <button type="button" class="cpub-jedit-iconbtn" :disabled="i === 0" :aria-label="`Move person ${i + 1} up`" @click="moveJudge(i, -1)"><i class="fa-solid fa-arrow-up"></i></button>
+          <button type="button" class="cpub-jedit-iconbtn" :disabled="i === judges.length - 1" :aria-label="`Move person ${i + 1} down`" @click="moveJudge(i, 1)"><i class="fa-solid fa-arrow-down"></i></button>
           <button type="button" class="cpub-jedit-remove" :aria-label="`Remove person ${i + 1}`" @click="removeJudge(i)"><i class="fa-solid fa-xmark"></i></button>
         </div>
-        <input class="cpub-jedit-input" type="url" :value="j.avatarUrl ?? ''" placeholder="Avatar image URL (https://…)" :aria-label="`Person ${i + 1} avatar URL`" @input="setJudge(i, 'avatarUrl', ($event.target as HTMLInputElement).value)" />
+
+        <div class="cpub-jedit-avatar-row">
+          <span class="cpub-jedit-avatar-prev">
+            <img v-if="j.avatarUrl" :src="j.avatarUrl" :alt="`${j.name || 'Judge'} photo`" />
+            <i v-else class="fa-solid fa-user"></i>
+          </span>
+          <input class="cpub-jedit-input" type="url" :value="j.avatarUrl ?? ''" placeholder="Photo URL (https://…)" :aria-label="`Person ${i + 1} photo URL`" @input="setJudge(i, 'avatarUrl', ($event.target as HTMLInputElement).value)" />
+          <label v-if="uploadHandler" class="cpub-jedit-upload" :class="{ 'cpub-jedit-upload-busy': uploadingIndex === i }">
+            <i class="fa-solid" :class="uploadingIndex === i ? 'fa-spinner fa-spin' : 'fa-arrow-up-from-bracket'"></i>
+            <span>{{ uploadingIndex === i ? 'Uploading' : 'Upload' }}</span>
+            <input type="file" accept="image/*" class="cpub-jedit-file" :aria-label="`Upload photo for person ${i + 1}`" @change="onFile(i, $event)" />
+          </label>
+        </div>
+
         <input class="cpub-jedit-input" type="url" :value="j.link ?? ''" placeholder="Profile / link (https://…, optional)" :aria-label="`Person ${i + 1} link`" @input="setJudge(i, 'link', ($event.target as HTMLInputElement).value)" />
         <textarea class="cpub-jedit-input cpub-jedit-bio" rows="2" :value="j.bio ?? ''" placeholder="Short bio (optional)" :aria-label="`Person ${i + 1} bio`" @input="setJudge(i, 'bio', ($event.target as HTMLTextAreaElement).value)" />
       </div>
@@ -71,14 +162,18 @@ function removeJudge(i: number): void {
 
 <style scoped>
 .cpub-jedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
-.cpub-jedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-jedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); flex-wrap: wrap; }
 .cpub-jedit-icon { font-size: 12px; color: var(--accent); }
 .cpub-jedit-title { font-size: 12px; font-weight: 600; }
 .cpub-jedit-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
 .cpub-jedit-add { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; background: transparent; border: var(--border-width-default) solid var(--border2); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 4px; margin-left: 8px; }
-.cpub-jedit-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+.cpub-jedit-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+.cpub-jedit-add:disabled { opacity: .5; cursor: default; }
 
 .cpub-jedit-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-jedit-explain { margin: 0; font-size: 11px; color: var(--text-faint); line-height: 1.5; display: flex; gap: 6px; }
+.cpub-jedit-explain i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
+.cpub-jedit-note { margin: 0; font-size: 11px; color: var(--accent); font-family: var(--font-mono); }
 .cpub-jedit-input { width: 100%; padding: 6px 8px; font-size: 12px; background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text); outline: none; }
 .cpub-jedit-input:focus { border-color: var(--accent); }
 .cpub-jedit-input::placeholder { color: var(--text-faint); }
@@ -86,11 +181,23 @@ function removeJudge(i: number): void {
 .cpub-jedit-bio { resize: vertical; font-family: inherit; }
 
 .cpub-jedit-row { border: var(--border-width-default) dashed var(--border2); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
-.cpub-jedit-row-main { display: flex; gap: 6px; }
+.cpub-jedit-row-main { display: flex; gap: 6px; align-items: center; }
 .cpub-jedit-row-main .cpub-jedit-input { flex: 1; }
+.cpub-jedit-iconbtn { background: none; border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 11px; width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
+.cpub-jedit-iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.cpub-jedit-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
 .cpub-jedit-remove { background: none; border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 0 8px; flex-shrink: 0; }
 .cpub-jedit-remove:hover { border-color: var(--red-border); color: var(--red); }
 
+.cpub-jedit-avatar-row { display: flex; gap: 6px; align-items: center; }
+.cpub-jedit-avatar-row .cpub-jedit-input { flex: 1; }
+.cpub-jedit-avatar-prev { width: 30px; height: 30px; flex-shrink: 0; border: var(--border-width-default) solid var(--border); background: var(--surface2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 12px; overflow: hidden; }
+.cpub-jedit-avatar-prev img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-jedit-upload { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border: var(--border-width-default) solid var(--border2); color: var(--text-dim); cursor: pointer; flex-shrink: 0; white-space: nowrap; }
+.cpub-jedit-upload:hover { border-color: var(--accent); color: var(--accent); }
+.cpub-jedit-upload-busy { opacity: .7; cursor: default; }
+.cpub-jedit-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+
 .cpub-jedit-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; border: var(--border-width-default) dashed var(--border2); }
 .cpub-jedit-empty:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
 </style>

package/composables/useContestEditor.ts

@@ -14,7 +14,7 @@
  * round-trip bug and no per-field re-conversion at save (the Phase 1 datetime fix).
  */
 import { ref, computed, watch, nextTick, type Ref, type ComputedRef } from 'vue';
-import type { ContestStage } from '@commonpub/schema';
+import type { ContestStage, ContestImageMeta } from '@commonpub/schema';
 import type { ContestTemplateSeed } from '../utils/contestTemplates';
 
 export type ContestFormat = 'markdown' | 'html';
@@ -52,6 +52,8 @@ export interface ContestEditorSource {
   prizesDescriptionFormat?: string | null;
   bannerUrl?: string | null;
   coverImageUrl?: string | null;
+  bannerMeta?: ContestImageMeta | null;
+  coverMeta?: ContestImageMeta | null;
   startDate?: string | null;
   endDate?: string | null;
   judgingEndDate?: string | null;
@@ -105,6 +107,8 @@ export interface UseContestEditor {
   prizesDescriptionFormat: Ref<ContestFormat>;
   bannerUrl: Ref<string>;
   coverImageUrl: Ref<string>;
+  bannerMeta: Ref<ContestImageMeta | null>;
+  coverMeta: Ref<ContestImageMeta | null>;
   startDate: Ref<string>;
   endDate: Ref<string>;
   judgingEndDate: Ref<string>;
@@ -172,6 +176,8 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
   const prizesDescriptionFormat = ref<ContestFormat>('markdown');
   const bannerUrl = ref('');
   const coverImageUrl = ref('');
+  const bannerMeta = ref<ContestImageMeta | null>(null);
+  const coverMeta = ref<ContestImageMeta | null>(null);
   const startDate = ref('');
   const endDate = ref('');
   const judgingEndDate = ref('');
@@ -252,6 +258,8 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
     prizesDescriptionFormat.value = asFormat(c.prizesDescriptionFormat);
     bannerUrl.value = c.bannerUrl ?? '';
     coverImageUrl.value = c.coverImageUrl ?? '';
+    bannerMeta.value = c.bannerMeta ?? null;
+    coverMeta.value = c.coverMeta ?? null;
     // ISO instants stored verbatim; CpubDateTimeField renders them in local time.
     startDate.value = c.startDate ?? '';
     endDate.value = c.endDate ?? '';
@@ -335,6 +343,9 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
       prizesDescriptionFormat: prizesDescriptionFormat.value,
       bannerUrl: bannerUrl.value || undefined,
       coverImageUrl: coverImageUrl.value || undefined,
+      // Clear the framing when the image is removed; else send it (or leave as-is).
+      bannerMeta: bannerUrl.value ? (bannerMeta.value ?? undefined) : null,
+      coverMeta: coverImageUrl.value ? (coverMeta.value ?? undefined) : null,
       startDate: startDate.value || undefined,
       endDate: endDate.value || undefined,
       judgingEndDate: judgingEndDate.value || undefined,
@@ -389,7 +400,7 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
   // Any post-hydration edit flips the dirty flag (drives the topbar "unsaved" cue).
   watch(
     [title, slugInput, subheading, description, descriptionBlocks, rulesBlocks, prizesBlocks, rules,
-      descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, startDate, endDate,
+      descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, bannerMeta, coverMeta, startDate, endDate,
       judgingEndDate, communityVotingEnabled, judgingVisibility, eligibleContentTypes, maxEntriesPerUser,
       visibility, visibleToRoles, showPrizes, prizesDescription, prizes, criteria, stages, currentStageId],
     () => { if (!hydrating) formDirty.value = true; },
@@ -403,7 +414,7 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
 
   return {
     title, slugInput, slugTouched, subheading, description, descriptionBlocks, rulesBlocks, prizesBlocks,
-    rules, descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, startDate,
+    rules, descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, bannerMeta, coverMeta, startDate,
     endDate, judgingEndDate, communityVotingEnabled, judgingVisibility, eligibleContentTypes, maxEntriesPerUser,
     visibility, visibleToRoles, showPrizes, prizesDescription, prizes, criteria, stages, currentStageId,
     saving, formDirty, dateError, canSubmit,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.84.0",
+  "version": "0.85.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -56,15 +56,15 @@
     "zod": "^4.3.6",
     "@commonpub/config": "0.23.0",
     "@commonpub/editor": "0.8.0",
-    "@commonpub/explainer": "0.8.0",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/protocol": "0.14.0",
-    "@commonpub/server": "2.90.0",
+    "@commonpub/auth": "0.8.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/schema": "0.46.0",
     "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/ui": "0.13.1",
-    "@commonpub/auth": "0.8.0"
+    "@commonpub/protocol": "0.14.0",
+    "@commonpub/schema": "0.47.0",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/server": "2.91.0",
+    "@commonpub/explainer": "0.8.0",
+    "@commonpub/ui": "0.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -506,7 +506,10 @@ async function withdrawEntry(entryId: string): Promise<void> {
 .cpub-submit-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: var(--border-width-default) solid var(--border); }
 
 /* LAYOUT */
-.cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 32px; }
+/* Top padding intentionally tighter than the sides: the hero bar already sits
+   directly above with its own 20px bottom padding + border, so a full 32px here
+   stacked to a ~52px hero→tabs gap. ~18px lands the tabbar close under the hero. */
+.cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 18px 32px 32px; }
 
 .cpub-entries-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
 .cpub-entries-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }

package/pages/contests/index.vue

@@ -65,6 +65,7 @@ const canCreateContest = computed(() => {
             :alt="contest.title"
             class="cpub-contest-cover"
             :class="{ 'cpub-contest-cover--contain': !contest.coverImageUrl && !!contest.bannerUrl }"
+            :style="contest.coverImageUrl ? imageFramingStyle(contest.coverMeta) : undefined"
             loading="lazy"
           />
           <template v-else>

package/utils/contestBlocks.ts

@@ -19,6 +19,16 @@ export const CONTEST_RUBRIC_KEY: InjectionKey<Ref<ContestRubricCriterion[]>> = S
  *  "pull from schedule" seed. Absent (null) outside the contest editor. */
 export const CONTEST_SCHEDULE_KEY: InjectionKey<Ref<RoadmapItem[]>> = Symbol('contestSchedule');
 
+/** A panel judge as the Judges Showcase block cares about it (for "Import panel
+ *  judges": seed showcase rows from the real scoring panel). */
+export interface ContestPanelJudge { name: string; avatarUrl?: string; title?: string; link?: string }
+
+/** ContestEditor `provide`s an async loader for the contest's scoring-panel
+ *  judges under this key, so the Judges Showcase block can offer a one-click
+ *  "import panel judges" seed (name + account avatar). Resolves to [] in create
+ *  mode (no slug yet); absent (null) outside the contest editor. */
+export const CONTEST_JUDGES_KEY: InjectionKey<() => Promise<ContestPanelJudge[]>> = Symbol('contestJudges');
+
 /** A stage as the roadmap cares about it (structural subset of ContestStage). */
 export interface RoadmapStageSource { name: string; kind?: string; startsAt?: string; endsAt?: string; description?: string }
 /** The three core schedule dates, when there are no custom stages. */

package/utils/contestBody.ts

@@ -15,11 +15,11 @@ export function seedBodyBlocks(
   if (Array.isArray(blocks) && blocks.length) return blocks as BlockTuple[];
   const text = (legacy ?? '').trim();
   if (!text) return [];
-  if (legacyFormat === 'html') return [['markdown', { content: text }]];
+  if (legacyFormat === 'html') return [['markdown', { source: text }]];
   try {
     const parsed = markdownToBlockTuples(text);
-    return parsed.length ? parsed : [['markdown', { content: text }]];
+    return parsed.length ? parsed : [['markdown', { source: text }]];
   } catch {
-    return [['markdown', { content: text }]];
+    return [['markdown', { source: text }]];
   }
 }

package/utils/contestImage.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'vue';
+import type { ContestImageMeta } from '@commonpub/schema';
+
+/**
+ * Map a contest banner/cover `ContestImageMeta` to CSS for the <img> (P4). The
+ * framing is NON-DESTRUCTIVE — the original upload is never re-cropped; this only
+ * drives object-fit / transform / object-position. Shared by ContestHero (public
+ * render), the editor preview, and ContestBannerAdjust so all three agree.
+ *
+ *  - `null`/absent ⇒ `cover` with NO transform — the legacy fit, so existing
+ *    contests look identical until an organiser touches the framing (back-compat).
+ *  - `zoom <= 0`   ⇒ `contain` — perfect fit, the whole image visible (letterboxed).
+ *  - `zoom > 0`    ⇒ `cover` + `scale(1 + zoom)` + `object-position: x% y%`.
+ */
+/** A `:style` object (a Vue CSSProperties subset) for an <img>. */
+export type ImageFraming = CSSProperties;
+
+export function imageFramingStyle(meta: ContestImageMeta | null | undefined): CSSProperties {
+  if (!meta) return { objectFit: 'cover' };
+  const x = clampPct(meta.x);
+  const y = clampPct(meta.y);
+  if (meta.zoom <= 0) return { objectFit: 'contain', objectPosition: `${x}% ${y}%` };
+  const zoom = Math.min(4, meta.zoom);
+  return { objectFit: 'cover', transform: `scale(${1 + zoom})`, objectPosition: `${x}% ${y}%` };
+}
+
+function clampPct(n: number): number {
+  if (!Number.isFinite(n)) return 50;
+  return Math.max(0, Math.min(100, Math.round(n)));
+}
+
+/** The default framing an organiser starts from when they first adjust an image. */
+export function defaultImageMeta(): ContestImageMeta {
+  return { zoom: 0, x: 50, y: 50 };
+}

package/utils/contestSubmissionTemplates.ts

@@ -0,0 +1,165 @@
+import type { ContestSubmissionTemplateField } from '@commonpub/schema';
+import { fieldKeyFromLabel } from './contestStages';
+
+/**
+ * Field presets + whole-form templates for the submission-form builder (P2). Pure
+ * data + helpers so they unit-test in isolation; the builder UI
+ * (ContestStageTemplateEditor) appends a preset or replaces the whole form via the
+ * `templatePreset*`/template builders here. Keys are derived from the label and
+ * uniquified against the existing template so two "Email" fields don't collide
+ * (template field keys must be unique — `contestStageSchema`).
+ *
+ * Address/Agreement presets + the address/shipping templates are PII-gated
+ * (`features.contestPii`): the agreement/address field types are only offered in
+ * the builder when that flag is on, so the UI hides them otherwise. The pure
+ * builders take an explicit `{ pii }` so they degrade the same way in isolation.
+ */
+type TemplateField = ContestSubmissionTemplateField;
+
+/** Default terms an organiser can keep or edit; shared by the preset + template. */
+export const RULES_AGREEMENT_TERMS =
+  'By entering, I confirm this submission is my own original work and I agree to the contest rules and code of conduct.';
+
+/** Make `base` unique within `taken` by appending `_2`, `_3`, … */
+function uniqueKey(taken: Set<string>, base: string): string {
+  if (!taken.has(base)) return base;
+  let n = 2;
+  while (taken.has(`${base}_${n}`)) n += 1;
+  return `${base}_${n}`;
+}
+
+/** Stamp keys on a set of keyless fields, keeping them unique among themselves. */
+function withKeys(fields: Array<Omit<TemplateField, 'key'> & { key?: string }>): TemplateField[] {
+  const taken = new Set<string>();
+  return fields.map((f) => {
+    const key = uniqueKey(taken, f.key || fieldKeyFromLabel(f.label));
+    taken.add(key);
+    return { ...f, key };
+  });
+}
+
+// ─── One-click field presets (the "Add field" menu) ───
+
+export interface FieldPreset {
+  id: string;
+  /** Menu label. */
+  label: string;
+  /** FontAwesome icon (no `fa-solid` prefix). */
+  icon: string;
+  /** Requires `features.contestPii` (agreement/address field types). */
+  pii?: boolean;
+  /** The field this preset seeds (key derived from the label at add time). */
+  field: Omit<TemplateField, 'key'>;
+}
+
+export const FIELD_PRESETS: FieldPreset[] = [
+  { id: 'text', label: 'Short text', icon: 'fa-font', field: { label: 'Short answer', type: 'text', required: false } },
+  { id: 'textarea', label: 'Long text', icon: 'fa-align-left', field: { label: 'Details', type: 'textarea', required: false } },
+  { id: 'url', label: 'Link (URL)', icon: 'fa-link', field: { label: 'Link', type: 'url', required: false, help: 'Include the full https:// address.' } },
+  { id: 'email', label: 'Email', icon: 'fa-envelope', field: { label: 'Email address', type: 'email', required: false } },
+  { id: 'number', label: 'Number', icon: 'fa-hashtag', field: { label: 'Number', type: 'number', required: false } },
+  { id: 'select', label: 'Dropdown', icon: 'fa-list', field: { label: 'Choose one', type: 'select', required: false, options: [{ value: '', label: '' }] } },
+  { id: 'checkbox', label: 'Checkbox', icon: 'fa-square-check', field: { label: 'Confirm', type: 'checkbox', required: false } },
+  { id: 'date', label: 'Date', icon: 'fa-calendar', field: { label: 'Date', type: 'date', required: false } },
+  {
+    id: 'address',
+    label: 'Mailing address',
+    icon: 'fa-location-dot',
+    pii: true,
+    field: { label: 'Mailing address', type: 'address', required: false, pii: true, help: 'Stored privately. Only staff with PII access and the entrant can read it.' },
+  },
+  {
+    id: 'agreement',
+    label: 'Agreement',
+    icon: 'fa-file-signature',
+    pii: true,
+    field: { label: 'Agreement', type: 'agreement', required: true, mustAccept: true, terms: RULES_AGREEMENT_TERMS },
+  },
+];
+
+/** Presets offered for the builder, gated by whether PII field types are enabled. */
+export function availableFieldPresets(pii: boolean): FieldPreset[] {
+  return pii ? FIELD_PRESETS : FIELD_PRESETS.filter((p) => !p.pii);
+}
+
+/** Append a preset field, deriving a unique machine key from its label. */
+export function templatePresetAdded(t: TemplateField[], preset: FieldPreset): TemplateField[] {
+  const taken = new Set(t.map((f) => f.key));
+  const key = uniqueKey(taken, fieldKeyFromLabel(preset.field.label));
+  return [...t, { ...preset.field, key }];
+}
+
+// ─── Whole-form templates (the "Start from template" picker) ───
+
+export interface SubmissionFormTemplate {
+  id: string;
+  label: string;
+  description: string;
+  /** Requires `features.contestPii` to seed its address/agreement fields. */
+  pii?: boolean;
+  /** Build the field array; flag-adaptive so it degrades when PII is off. */
+  build(opts: { pii: boolean }): TemplateField[];
+}
+
+const SHIPPING_AGREEMENT_TERMS =
+  'If selected, I agree to provide a valid shipping address and accept responsibility for any hardware sent to me.';
+
+export const SUBMISSION_FORM_TEMPLATES: SubmissionFormTemplate[] = [
+  {
+    id: 'standard',
+    label: 'Standard proposal',
+    description: 'Name, summary, description, approach (and a rules agreement when PII is on).',
+    build({ pii }): TemplateField[] {
+      const fields: Array<Omit<TemplateField, 'key'>> = [
+        { label: 'Project name', type: 'text', required: true },
+        { label: 'One-line summary', type: 'text', required: true, help: 'A single sentence describing your idea.' },
+        { label: 'Description', type: 'textarea', required: true, help: 'What you are building and the problem it solves.' },
+        { label: 'Approach', type: 'textarea', required: false, help: 'How you plan to build it (optional).' },
+      ];
+      if (pii) fields.push({ label: 'Contest rules', type: 'agreement', required: true, terms: RULES_AGREEMENT_TERMS, mustAccept: true });
+      return withKeys(fields);
+    },
+  },
+  {
+    id: 'hardware',
+    label: 'Hardware / shipping',
+    description: 'Standard proposal plus a mailing address and a shipping agreement (PII).',
+    pii: true,
+    build({ pii }): TemplateField[] {
+      const fields: Array<Omit<TemplateField, 'key'>> = [
+        { label: 'Project name', type: 'text', required: true },
+        { label: 'One-line summary', type: 'text', required: true, help: 'A single sentence describing your idea.' },
+        { label: 'Description', type: 'textarea', required: true, help: 'What you are building and the problem it solves.' },
+      ];
+      if (pii) {
+        fields.push({ label: 'Mailing address', type: 'address', required: true, pii: true, help: 'Stored privately. Only staff with PII access and the entrant can read it.' });
+        fields.push({ label: 'Shipping agreement', type: 'agreement', required: true, terms: SHIPPING_AGREEMENT_TERMS, mustAccept: true });
+      }
+      return withKeys(fields);
+    },
+  },
+  {
+    id: 'minimal',
+    label: 'Minimal',
+    description: 'Just a project name and a link.',
+    build(): TemplateField[] {
+      return withKeys([
+        { label: 'Project name', type: 'text', required: true },
+        { label: 'Link', type: 'url', required: false, help: 'Include the full https:// address.' },
+      ]);
+    },
+  },
+  {
+    id: 'blank',
+    label: 'Blank',
+    description: 'Start with no fields.',
+    build(): TemplateField[] {
+      return [];
+    },
+  },
+];
+
+/** Templates offered for the builder, gated by whether PII field types are enabled. */
+export function availableFormTemplates(pii: boolean): SubmissionFormTemplate[] {
+  return pii ? SUBMISSION_FORM_TEMPLATES : SUBMISSION_FORM_TEMPLATES.filter((t) => !t.pii);
+}

package/utils/contestTemplates.ts

@@ -87,6 +87,9 @@ export function standardContestTemplate(opts: StandardTemplateOptions): ContestT
       description: 'Entrants submit a proposal for review.',
       submissionMode: opts.proposals ? 'proposal' : 'attach',
       submissionTemplate: standardSubmissionTemplate(opts),
+      instructionsBlocks: markdownToBlockTuples(
+        'Tell us about your idea. Be concrete about what you will build and why it matters. You can edit your proposal until the round closes.',
+      ) as ContestStage['instructionsBlocks'],
     },
     {
       id: newStageId(),