@commonpub/layer 0.54.0 → 0.56.0

package/components/contest/ContestStagesEditor.vue

@@ -45,6 +45,25 @@ function onDate(i: number, field: 'startsAt' | 'endsAt', e: Event): void {
   setField(i, { [field]: v } as Partial<ContestStage>);
 }
 
+// Per-round rubric (review stages). Immutable updates via setField.
+type StageCriterion = { label: string; weight?: number; description?: string };
+function addCriterion(i: number): void {
+  const cur = (stages.value[i]?.criteria ?? []) as StageCriterion[];
+  setField(i, { criteria: [...cur, { label: '' }] });
+}
+function setCriterion(i: number, ci: number, patch: Partial<StageCriterion>): void {
+  const cur = (stages.value[i]?.criteria ?? []).map((c, idx) => (idx === ci ? { ...c, ...patch } : c));
+  setField(i, { criteria: cur });
+}
+function removeCriterion(i: number, ci: number): void {
+  const cur = (stages.value[i]?.criteria ?? []).filter((_, idx) => idx !== ci);
+  setField(i, { criteria: cur.length ? cur : undefined });
+}
+function critWeightInput(i: number, ci: number, e: Event): void {
+  const v = (e.target as HTMLInputElement).value;
+  setCriterion(i, ci, { weight: v === '' ? undefined : Math.max(0, Math.min(100, Math.round(Number(v)))) });
+}
+
 // Array operations live as pure functions in utils/contestStages.ts (unit-tested).
 function addStage(): void {
   commit(withStageAdded(stages.value));
@@ -147,6 +166,8 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
             </div>
           </div>
 
+          <p class="cpub-stage-kind-help"><i class="fa-solid fa-circle-info"></i> {{ STAGE_KIND_HELP[stage.kind] }}</p>
+
           <div class="cpub-form-row">
             <div class="cpub-form-field">
               <label class="cpub-form-label">Starts</label>
@@ -169,6 +190,20 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
             />
           </div>
 
+          <!-- Per-round judging rubric (review stages) -->
+          <div v-if="stage.kind === 'review'" class="cpub-stage-criteria">
+            <div class="cpub-stage-criteria-head">
+              <span class="cpub-form-label" style="margin: 0;">Judging criteria — this round</span>
+              <button type="button" class="cpub-btn cpub-btn-sm" @click="addCriterion(i)"><i class="fa-solid fa-plus"></i> Add</button>
+            </div>
+            <p class="cpub-form-hint" style="margin: 4px 0;">Optional — leave empty to use the contest’s default criteria. Set per-round criteria for multi-round contests (e.g. judge proposals on Feasibility, prototypes on Deployment readiness).</p>
+            <div v-for="(crit, ci) in (stage.criteria ?? [])" :key="ci" class="cpub-stage-crit-row">
+              <input :value="crit.label" type="text" class="cpub-form-input" placeholder="Criterion (e.g. Community impact)" @input="setCriterion(i, ci, { label: ($event.target as HTMLInputElement).value })" />
+              <input :value="crit.weight ?? ''" type="number" min="0" max="100" class="cpub-form-input cpub-stage-crit-pts" placeholder="pts" @input="critWeightInput(i, ci, $event)" />
+              <button type="button" class="cpub-stage-iconbtn cpub-stage-del" aria-label="Remove criterion" @click="removeCriterion(i, ci)"><i class="fa-solid fa-xmark"></i></button>
+            </div>
+          </div>
+
           <div v-if="stage.kind === 'event'" class="cpub-form-row">
             <div class="cpub-form-field">
               <label class="cpub-form-label">Location</label>
@@ -190,6 +225,16 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
 </template>
 
 <style scoped>
+/* Self-contained form-control styles (tokenised) — Vue scoped CSS doesn't cross
+   component boundaries, so this extracted editor styles its own inputs rather than
+   relying on the parent page. Mirrors the contest pages' controls. */
+.cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-input, .cpub-form-textarea { 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, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
+
 .cpub-stages-standard { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
 .cpub-stage-tophead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
 .cpub-stage-count { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
@@ -206,4 +251,11 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
 .cpub-stage-del:hover { border-color: var(--red-border); color: var(--red); }
 .cpub-stage-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
 .cpub-stage-reset { color: var(--text-faint); }
+.cpub-stage-kind-help { font-size: 11px; color: var(--text-faint); line-height: 1.5; margin: 0 0 4px; display: flex; gap: 6px; }
+.cpub-stage-kind-help i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
+.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-crit-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
+.cpub-stage-crit-row .cpub-form-input { margin: 0; }
+.cpub-stage-crit-pts { max-width: 70px; flex-shrink: 0; }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,14 +55,14 @@
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.18.0",
-    "@commonpub/editor": "0.7.11",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/protocol": "0.13.0",
+    "@commonpub/editor": "0.7.11",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/server": "2.77.0",
+    "@commonpub/schema": "0.31.0",
+    "@commonpub/server": "2.78.0",
+    "@commonpub/protocol": "0.13.0",
     "@commonpub/ui": "0.9.2",
-    "@commonpub/schema": "0.30.0"
+    "@commonpub/learning": "0.5.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -574,9 +574,12 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-edit-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
 .cpub-form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
 .cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
-/* `.cpub-form-input/-textarea/-field/-row/-label` are sourced from the global
-   theme (forms.css) so the extracted ContestStagesEditor inherits them across the
-   Vue scoped-style boundary — don't re-scope them here. */
+.cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-input, .cpub-form-textarea { 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, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
 
 .cpub-form-error { font-size: 12px; color: var(--red); margin-top: 8px; }
 .cpub-form-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; }

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

@@ -15,9 +15,23 @@ const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: (Se
   { query: { includeJudgeScores: true } },
 );
 
-// Judging rubric: when defined, judges score each criterion (0..max) and the
-// overall is the normalized weighted sum (computed server-side).
-const criteria = computed(() => contest.value?.judgingCriteria ?? []);
+// The current review stage (multi-round contests). Drives the round label + the
+// per-round rubric; falls back to the contest-level rubric when the stage has none.
+const currentReviewStage = computed(() => {
+  const c = contest.value;
+  if (!c || !c.stages?.length) return null;
+  const cid = currentStageId(c);
+  const st = c.stages.find((s) => s.id === cid);
+  return st && st.kind === 'review' ? st : null;
+});
+
+// Judging rubric: per-round criteria if the current review stage defines them,
+// else the contest-level rubric. Judges score each criterion (0..max); the overall
+// is the normalized weighted sum (computed server-side).
+const criteria = computed(() => {
+  const stageCrit = currentReviewStage.value?.criteria;
+  return (stageCrit && stageCrit.length ? stageCrit : contest.value?.judgingCriteria) ?? [];
+});
 const hasCriteria = computed(() => criteria.value.length > 0);
 function critMax(i: number): number {
   const w = criteria.value[i]?.weight;
@@ -48,7 +62,9 @@ async function acceptInvite(): Promise<void> {
 }
 
 const entryList = computed(() => {
-  const items = entriesData.value?.items ?? [];
+  // Cohort scope: once a review stage has culled the field, judges only score the
+  // surviving cohort (eliminated entries drop out of later rounds).
+  const items = (entriesData.value?.items ?? []).filter((e) => !e.eliminated);
   return items.map((entry) => {
     const myScore = entry.judgeScores?.find((s) => s.judgeId === user.value?.id);
     return {
@@ -161,8 +177,12 @@ async function submitScore(entryId: string): Promise<void> {
       <h1 class="cpub-judge-title">
         <i class="fa-solid fa-gavel cpub-judge-icon"></i>
         Judge: {{ contest?.title || 'Contest' }}
+        <span v-if="currentReviewStage" class="cpub-judge-round">{{ currentReviewStage.name }}</span>
       </h1>
-      <p class="cpub-judge-desc">Score each entry from 1 to 100. Add optional feedback. Scores are saved immediately.</p>
+      <p class="cpub-judge-desc">
+        Score each entry from 1 to 100. Add optional feedback. Scores are saved immediately.
+        <template v-if="currentReviewStage"> You're judging the <strong>{{ entryList.length }}</strong> {{ entryList.length === 1 ? 'entry' : 'entries' }} still in this round.</template>
+      </p>
     </header>
 
     <!-- Loading -->
@@ -200,9 +220,9 @@ async function submitScore(entryId: string): Promise<void> {
         Scoring opens when the contest enters the judging phase (currently <strong>{{ contest.status }}</strong>).
       </div>
 
-      <!-- Rubric guidance -->
-      <div v-if="contest.judgingCriteria?.length" class="cpub-judge-rubric">
-        <ContestJudgingCriteria :criteria="contest.judgingCriteria" compact />
+      <!-- Rubric guidance (per-round criteria when the current review stage defines them) -->
+      <div v-if="criteria.length" class="cpub-judge-rubric">
+        <ContestJudgingCriteria :criteria="criteria" compact />
       </div>
 
       <!-- Progress bar -->
@@ -298,6 +318,7 @@ async function submitScore(entryId: string): Promise<void> {
 .cpub-judge-back:hover { color: var(--accent); }
 .cpub-judge-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
 .cpub-judge-icon { color: var(--accent); font-size: 18px; }
+.cpub-judge-round { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border: var(--border-width-default) solid var(--accent-border); background: var(--accent-bg); padding: 3px 9px; border-radius: var(--radius); }
 .cpub-judge-desc { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
 
 .cpub-judge-unauthorized { text-align: center; padding: 48px 0; color: var(--text-faint); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

package/pages/contests/create.vue

@@ -403,8 +403,12 @@ function prizeLabel(prize: Prize): string {
 .cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
 .cpub-form-section-header .cpub-form-section-title { margin-bottom: 0; }
 
-/* `.cpub-form-input/-textarea/-field/-row/-label` come from the global theme
-   (forms.css) — shared with the extracted ContestStagesEditor. */
+.cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-input, .cpub-form-textarea { 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, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
 
 .cpub-prize-card { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
 .cpub-prize-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

package/utils/contestStages.ts

@@ -112,3 +112,14 @@ export const STAGE_KIND_LABEL: Record<ContestStage['kind'], string> = {
   event: 'Event / Showcase',
   custom: 'Custom milestone',
 };
+
+/** What each stage kind actually DOES — shown under the editor's type picker so
+ *  organisers understand the behaviour they're choosing. */
+export const STAGE_KIND_HELP: Record<ContestStage['kind'], string> = {
+  submission: 'Entrants submit (or, in a later round, refine) entries. The hero countdown targets this stage’s end date.',
+  review: 'Judges score entries on a rubric. End a review stage with an Advancement cut (Top-N) to pick who continues. Add per-round criteria below for multi-round contests.',
+  interim: 'A working period — e.g. a build sprint. The surviving cohort refines their existing entries; no new entrants.',
+  results: 'Final standings are published (ranks calculated from the latest judging round).',
+  event: 'A real-world milestone or showcase (date + location). Informational — no entry/judging behaviour.',
+  custom: 'An arbitrary dated milestone. No behaviour — just appears on the timeline.',
+};