@commonpub/layer 0.84.0 → 0.86.0

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, ContestCoverPlacement } from '@commonpub/schema';
 import type { ContestTemplateSeed } from '../utils/contestTemplates';
 
 export type ContestFormat = 'markdown' | 'html';
@@ -52,6 +52,9 @@ export interface ContestEditorSource {
   prizesDescriptionFormat?: string | null;
   bannerUrl?: string | null;
   coverImageUrl?: string | null;
+  bannerMeta?: ContestImageMeta | null;
+  coverMeta?: ContestImageMeta | null;
+  coverPlacement?: ContestCoverPlacement | null;
   startDate?: string | null;
   endDate?: string | null;
   judgingEndDate?: string | null;
@@ -105,6 +108,9 @@ export interface UseContestEditor {
   prizesDescriptionFormat: Ref<ContestFormat>;
   bannerUrl: Ref<string>;
   coverImageUrl: Ref<string>;
+  bannerMeta: Ref<ContestImageMeta | null>;
+  coverMeta: Ref<ContestImageMeta | null>;
+  coverPlacement: Ref<ContestCoverPlacement | null>;
   startDate: Ref<string>;
   endDate: Ref<string>;
   judgingEndDate: Ref<string>;
@@ -172,6 +178,9 @@ 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 coverPlacement = ref<ContestCoverPlacement | null>(null);
   const startDate = ref('');
   const endDate = ref('');
   const judgingEndDate = ref('');
@@ -252,6 +261,9 @@ 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;
+    coverPlacement.value = c.coverPlacement ?? null;
     // ISO instants stored verbatim; CpubDateTimeField renders them in local time.
     startDate.value = c.startDate ?? '';
     endDate.value = c.endDate ?? '';
@@ -335,6 +347,10 @@ 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,
+      coverPlacement: coverImageUrl.value ? (coverPlacement.value ?? undefined) : null,
       startDate: startDate.value || undefined,
       endDate: endDate.value || undefined,
       judgingEndDate: judgingEndDate.value || undefined,
@@ -389,7 +405,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, coverPlacement, startDate, endDate,
       judgingEndDate, communityVotingEnabled, judgingVisibility, eligibleContentTypes, maxEntriesPerUser,
       visibility, visibleToRoles, showPrizes, prizesDescription, prizes, criteria, stages, currentStageId],
     () => { if (!hydrating) formDirty.value = true; },
@@ -403,7 +419,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, coverPlacement, 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.86.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,17 +54,17 @@
     "vue-advanced-cropper": "^2.8.9",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.23.0",
-    "@commonpub/editor": "0.8.0",
-    "@commonpub/explainer": "0.8.0",
+    "@commonpub/auth": "0.8.0",
     "@commonpub/learning": "0.5.2",
+    "@commonpub/explainer": "0.8.0",
+    "@commonpub/schema": "0.48.0",
+    "@commonpub/server": "2.92.0",
     "@commonpub/protocol": "0.14.0",
-    "@commonpub/server": "2.90.0",
-    "@commonpub/docs": "0.6.3",
-    "@commonpub/schema": "0.46.0",
     "@commonpub/theme-studio": "0.6.1",
+    "@commonpub/config": "0.23.0",
     "@commonpub/ui": "0.13.1",
-    "@commonpub/auth": "0.8.0"
+    "@commonpub/editor": "0.9.0",
+    "@commonpub/docs": "0.6.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",