@commonpub/layer 0.83.2 → 0.85.0

package/components/contest/ContestAdvancementPanel.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+/**
+ * ContestAdvancementPanel — the edit-only Top-N / manual cohort cut, extracted from
+ * ContestEditor. Crucially it operates on the PERSISTED review stages + REAL entries
+ * (not the editable `stages` model), so it self-fetches entries and takes the
+ * persisted review stages as a prop; the parent passes `contest.value.stages`
+ * filtered to review. Emits `advanced` after a cut so the parent refetches the
+ * contest. Mounted inside the Stages tab, below the stage editor.
+ */
+import type { ContestStage } from '@commonpub/schema';
+
+type ReviewStage = Pick<ContestStage, 'id' | 'name' | 'advanceCount'>;
+interface EntryLite { id: string; contentTitle: string; score?: number | null; eliminated?: boolean }
+
+const props = defineProps<{
+  slug: string;
+  reviewStages: ReviewStage[];
+}>();
+const emit = defineEmits<{ advanced: [] }>();
+
+const toast = useToast();
+const { extract: extractError } = useApiError();
+
+const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: EntryLite[] }>(
+  () => `/api/contests/${props.slug}/entries`,
+);
+const eligibleEntries = computed(() => (entriesData.value?.items ?? []).filter((e) => !e.eliminated));
+
+const advancing = ref<string | null>(null);
+const advanceN = ref<Record<string, number>>({});
+const advanceMode = ref<Record<string, 'topN' | 'manual'>>({});
+const manualPick = ref<Record<string, string[]>>({});
+
+function toggleManual(stageId: string, entryId: string): void {
+  const cur = manualPick.value[stageId] ?? [];
+  manualPick.value[stageId] = cur.includes(entryId) ? cur.filter((x) => x !== entryId) : [...cur, entryId];
+}
+
+async function postAdvance(stageId: string, body: Record<string, unknown>): Promise<void> {
+  advancing.value = stageId;
+  try {
+    const r = await $fetch<{ advancedCount: number; eliminatedCount: number }>(
+      `/api/contests/${props.slug}/advance`,
+      { method: 'POST', body },
+    );
+    toast.success(`${r.advancedCount} advanced, ${r.eliminatedCount} not advanced.`);
+    await refreshEntries();
+    emit('advanced');
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  } finally {
+    advancing.value = null;
+  }
+}
+
+async function advanceStage(stageId: string): Promise<void> {
+  const topN = advanceN.value[stageId];
+  if (!topN || topN < 1) { toast.error('Enter how many entries advance.'); return; }
+  if (!confirm(`Advance the top ${topN} entries from this stage? Entries below the cut are marked "not advanced" and drop out of later judging + final results. You can re-run this.`)) return;
+  await postAdvance(stageId, { reviewStageId: stageId, mode: 'topN', topN });
+}
+
+async function advanceStageManual(stageId: string): Promise<void> {
+  const ids = manualPick.value[stageId] ?? [];
+  if (!ids.length) { toast.error('Select at least one entry to advance.'); return; }
+  if (!confirm(`Advance the ${ids.length} selected ${ids.length === 1 ? 'entry' : 'entries'}? The rest of the cohort is marked "not advanced" and drops out of later judging + final results.`)) return;
+  await postAdvance(stageId, { reviewStageId: stageId, mode: 'manual', advancedEntryIds: ids });
+}
+
+// Prefill each review stage's Top-N from its persisted advanceCount, when present.
+watch(() => props.reviewStages, (stages) => {
+  for (const s of stages) {
+    if (typeof s.advanceCount === 'number' && advanceN.value[s.id] === undefined) advanceN.value[s.id] = s.advanceCount;
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <div v-if="reviewStages.length" class="cpub-advance-section">
+    <h3 class="cpub-form-subtitle"><i class="fa-solid fa-arrow-up-right-dots"></i> Advancement</h3>
+    <p class="cpub-form-hint">After judging a review stage, advance the top entries to the next stage. Entries below the cut are marked "not advanced". Re-running re-computes the cut. (Save any stage changes above first.)</p>
+    <div v-for="rs in reviewStages" :key="rs.id" class="cpub-advance-block">
+      <div class="cpub-advance-row">
+        <span class="cpub-advance-name"><i class="fa-solid fa-gavel"></i> {{ rs.name }}</span>
+        <div class="cpub-advance-mode">
+          <label class="cpub-form-check"><input type="radio" :name="`mode-${rs.id}`" :checked="(advanceMode[rs.id] ?? 'topN') === 'topN'" @change="advanceMode[rs.id] = 'topN'" /> <span>Top N</span></label>
+          <label class="cpub-form-check"><input type="radio" :name="`mode-${rs.id}`" :checked="advanceMode[rs.id] === 'manual'" @change="advanceMode[rs.id] = 'manual'" /> <span>Pick manually</span></label>
+        </div>
+      </div>
+      <div v-if="(advanceMode[rs.id] ?? 'topN') === 'topN'" class="cpub-advance-ctl">
+        <label class="cpub-form-label" :for="`adv-${rs.id}`">Advance top</label>
+        <input :id="`adv-${rs.id}`" v-model.number="advanceN[rs.id]" type="number" min="1" class="cpub-form-input cpub-advance-n" placeholder="50" />
+        <button type="button" class="cpub-btn cpub-btn-sm" :disabled="advancing === rs.id" @click="advanceStage(rs.id)">
+          <i class="fa-solid fa-arrow-up-right-dots"></i> {{ advancing === rs.id ? 'Advancing…' : 'Advance' }}
+        </button>
+      </div>
+      <div v-else class="cpub-advance-manual">
+        <p v-if="!eligibleEntries.length" class="cpub-form-hint" style="margin: 0;">No entries in the current cohort to pick from yet.</p>
+        <template v-else>
+          <label v-for="e in eligibleEntries" :key="e.id" class="cpub-advance-pick">
+            <input type="checkbox" :checked="(manualPick[rs.id] ?? []).includes(e.id)" @change="toggleManual(rs.id, e.id)" />
+            <span class="cpub-advance-pick-title">{{ e.contentTitle }}</span>
+            <span v-if="e.score != null" class="cpub-advance-pick-score">{{ e.score }}</span>
+          </label>
+          <button type="button" class="cpub-btn cpub-btn-sm" :disabled="advancing === rs.id || !(manualPick[rs.id] ?? []).length" @click="advanceStageManual(rs.id)">
+            <i class="fa-solid fa-arrow-up-right-dots"></i> {{ advancing === rs.id ? 'Advancing…' : `Advance ${(manualPick[rs.id] ?? []).length} selected` }}
+          </button>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Form-control + advancement styles travel with the markup (scoped CSS is per
+   component; the global theme only ships .cpub-form-label/-hint/-btn). */
+.cpub-form-input { width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-sans); }
+.cpub-form-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-form-subtitle { font-size: 12px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
+.cpub-form-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
+.cpub-form-check input { width: 14px; height: 14px; flex-shrink: 0; }
+
+.cpub-advance-section { margin-top: 20px; padding-top: 16px; border-top: var(--border-width-default) solid var(--border2); }
+.cpub-advance-block { padding: 12px 0; border-top: var(--border-width-default) solid var(--border); }
+.cpub-advance-block:first-of-type { border-top: 0; }
+.cpub-advance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.cpub-advance-name { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
+.cpub-advance-name i { color: var(--accent); font-size: 11px; }
+.cpub-advance-mode { display: inline-flex; gap: 12px; }
+.cpub-advance-ctl { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
+.cpub-advance-ctl .cpub-form-label { margin: 0; }
+.cpub-advance-n { width: 80px; }
+.cpub-advance-manual { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
+.cpub-advance-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 4px 8px; border: var(--border-width-default) solid var(--border); background: var(--surface2); cursor: pointer; }
+.cpub-advance-pick-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cpub-advance-pick-score { font-family: var(--font-mono); font-size: 11px; color: var(--accent); flex-shrink: 0; }
+.cpub-advance-manual .cpub-btn { align-self: flex-start; margin-top: 6px; }
+</style>

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/ContestBodyCanvas.vue

@@ -13,7 +13,9 @@
  */
 import { BlockCanvas, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
-type BodyTab = 'overview' | 'rules' | 'prizes';
+// 'stages' is a FORM tab (not a block body): it renders the `#stages` slot and has
+// no Write/Preview/Code mode. The three block tabs share one BlockCanvas.
+type BodyTab = 'overview' | 'rules' | 'prizes' | 'stages';
 type BodyMode = 'write' | 'preview' | 'code';
 
 const props = defineProps<{
@@ -32,7 +34,10 @@ const TABS: { key: BodyTab; label: string; icon: string }[] = [
   { key: 'overview', label: 'Overview', icon: 'fa-circle-info' },
   { key: 'rules', label: 'Rules', icon: 'fa-file-lines' },
   { key: 'prizes', label: 'Prizes', icon: 'fa-trophy' },
+  { key: 'stages', label: 'Stages', icon: 'fa-diagram-project' },
 ];
+// Block tabs share the canvas + the Write/Preview/Code switch; 'stages' is a form.
+const isBlockTab = computed(() => props.activeTab !== 'stages');
 const MODES: { key: BodyMode; label: string; icon: string }[] = [
   { key: 'write', label: 'Write', icon: 'fa-pen' },
   { key: 'preview', label: 'Preview', icon: 'fa-eye' },
@@ -86,7 +91,7 @@ function onTabKey(e: KeyboardEvent, key: BodyTab): void {
           <i class="fa-solid" :class="t.icon"></i> {{ t.label }}
         </button>
       </div>
-      <div class="cpub-cbc-mode" role="group" aria-label="Body view mode">
+      <div v-if="isBlockTab" class="cpub-cbc-mode" role="group" aria-label="Body view mode">
         <button
           v-for="m in MODES"
           :key="m.key"
@@ -102,18 +107,22 @@ function onTabKey(e: KeyboardEvent, key: BodyTab): void {
     </div>
 
     <div class="cpub-cbc-panel" role="tabpanel" tabindex="0" :aria-labelledby="`cpub-cbc-tab-${activeTab}`">
-      <!-- Overview-only lead (inline banner + cover); the parent fills the slot. -->
-      <div v-if="activeTab === 'overview' && mode === 'write'" class="cpub-cbc-lead">
-        <slot name="overview-lead" />
-      </div>
-      <!-- One canvas, keyed by tab so each body gets a clean canvas instance; the
-           underlying block state persists in the parent's hoisted editors. -->
-      <BlockCanvas v-show="mode === 'write'" :key="activeTab" :block-editor="editor" :block-types="groups" />
-      <div v-if="mode === 'preview'" class="cpub-cbc-preview">
-        <BlocksBlockContentRenderer v-if="previewBlocks.length" :blocks="previewBlocks" class="cpub-prose cpub-md" />
-        <p v-else class="cpub-cbc-empty">Nothing to preview yet. Switch to Write and add some blocks.</p>
-      </div>
-      <pre v-else-if="mode === 'code'" class="cpub-cbc-code" aria-label="Block content as JSON"><code>{{ codeJson }}</code></pre>
+      <!-- Stages: a form tab (timeline + submission forms + advancement). -->
+      <slot v-if="activeTab === 'stages'" name="stages" />
+      <template v-else>
+        <!-- Overview-only lead (inline banner + cover); the parent fills the slot. -->
+        <div v-if="activeTab === 'overview' && mode === 'write'" class="cpub-cbc-lead">
+          <slot name="overview-lead" />
+        </div>
+        <!-- One canvas, keyed by tab so each body gets a clean canvas instance; the
+             underlying block state persists in the parent's hoisted editors. -->
+        <BlockCanvas v-show="mode === 'write'" :key="activeTab" :block-editor="editor" :block-types="groups" />
+        <div v-if="mode === 'preview'" class="cpub-cbc-preview">
+          <BlocksBlockContentRenderer v-if="previewBlocks.length" :blocks="previewBlocks" class="cpub-prose cpub-md" />
+          <p v-else class="cpub-cbc-empty">Nothing to preview yet. Switch to Write and add some blocks.</p>
+        </div>
+        <pre v-else-if="mode === 'code'" class="cpub-cbc-code" aria-label="Block content as JSON"><code>{{ codeJson }}</code></pre>
+      </template>
     </div>
   </div>
 </template>