@commonpub/layer 0.27.1 → 0.28.1

package/components/contest/ContestEntries.vue

@@ -176,9 +176,9 @@ function confirmWithdraw(entryId: string): void {
 .cpub-entry-score { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); display: flex; align-items: center; gap: 3px; }
 
 .cpub-entry-vote-btn {
-  display: inline-flex; align-items: center; gap: 4px;
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
   font-size: 11px; font-family: var(--font-mono); font-weight: 600;
-  padding: 3px 8px; border: var(--border-width-default) solid var(--border2);
+  padding: 4px 10px; min-height: 28px; border: var(--border-width-default) solid var(--border2);
   background: var(--surface); color: var(--text-dim); cursor: pointer;
   transition: all 0.15s;
 }
@@ -187,7 +187,7 @@ function confirmWithdraw(entryId: string): void {
 .cpub-entry-vote-btn:disabled { opacity: 0.4; cursor: default; }
 .cpub-entry-vote-btn i { font-size: 10px; }
 
-.cpub-withdraw-btn { display: flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--radius); border: var(--border-width-default) solid var(--red-border); background: var(--surface); color: var(--red); cursor: pointer; margin-left: auto; }
+.cpub-withdraw-btn { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 4px 10px; min-height: 28px; border-radius: var(--radius); border: var(--border-width-default) solid var(--red-border); background: var(--surface); color: var(--red); cursor: pointer; margin-left: auto; }
 .cpub-withdraw-btn:hover { background: var(--red-bg); }
 
 .cpub-empty-state { text-align: center; padding: 32px 0; }

package/package.json

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

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

@@ -92,6 +92,8 @@ async function acceptInvite(): Promise<void> {
 
 // Entry submission
 const showSubmitDialog = ref(false);
+const submitDialogRef = ref<HTMLElement | null>(null);
+useFocusTrap(submitDialogRef, () => showSubmitDialog.value, () => { showSubmitDialog.value = false; });
 const submitContentId = ref('');
 const submitting = ref(false);
 const { data: userContent } = useFetch('/api/content', {
@@ -156,7 +158,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
     <!-- SUBMIT ENTRY DIALOG -->
     <div v-if="showSubmitDialog" class="cpub-submit-overlay" @click.self="showSubmitDialog = false">
-      <div class="cpub-submit-dialog" role="dialog" aria-label="Submit entry">
+      <div ref="submitDialogRef" class="cpub-submit-dialog" role="dialog" aria-modal="true" aria-label="Submit entry">
         <div class="cpub-submit-header">
           <h2>Submit Entry</h2>
           <button class="cpub-submit-close" aria-label="Close" @click="showSubmitDialog = false"><i class="fa-solid fa-times"></i></button>
@@ -296,8 +298,9 @@ async function withdrawEntry(entryId: string): Promise<void> {
 .cpub-invite-text i { color: var(--accent); }
 
 /* TABS */
-.cpub-tabbar { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: var(--border-width-default) solid var(--border); margin-bottom: 20px; }
-.cpub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); cursor: pointer; }
+.cpub-tabbar { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: var(--border-width-default) solid var(--border); margin-bottom: 20px; }
+.cpub-tabbar::-webkit-scrollbar { display: none; }
+.cpub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 40px; flex-shrink: 0; white-space: nowrap; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); cursor: pointer; }
 .cpub-tab:hover { color: var(--text-dim); }
 .cpub-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
 .cpub-tab i { font-size: 11px; }

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

@@ -6,15 +6,24 @@ const slug = route.params.slug as string;
 const { user } = useAuth();
 const toast = useToast();
 
-import type { Serialized, ContestDetail, ContestEntryItem, ContestJudgeItem } from '@commonpub/server';
+import type { Serialized, ContestDetail, ContestEntryItem, ContestJudgeItem, JudgeScoreEntry } from '@commonpub/server';
 
 const { data: contest } = useLazyFetch<Serialized<ContestDetail>>(`/api/contests/${slug}`);
 const { data: judgesData, refresh: refreshJudges } = useLazyFetch<ContestJudgeItem[]>(`/api/contests/${slug}/judges`);
-const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: (Serialized<ContestEntryItem> & { judgeScores?: Array<{ judgeId: string; score: number; feedback?: string }> })[]; total: number }>(
+const { data: entriesData, refresh: refreshEntries } = useLazyFetch<{ items: (Serialized<ContestEntryItem> & { judgeScores?: JudgeScoreEntry[] })[]; total: number }>(
   `/api/contests/${slug}/entries`,
   { 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 ?? []);
+const hasCriteria = computed(() => criteria.value.length > 0);
+function critMax(i: number): number {
+  const w = criteria.value[i]?.weight;
+  return typeof w === 'number' && w > 0 ? w : 100;
+}
+
 useSeoMeta({ title: () => `Judge: ${contest.value?.title || 'Contest'} — ${useSiteName()}` });
 
 // Judge authorization derives from the contest_judges table.
@@ -54,6 +63,7 @@ const entryList = computed(() => {
       rank: entry.rank ?? null,
       myScore: myScore?.score ?? null,
       myFeedback: myScore?.feedback ?? '',
+      myCriteriaScores: myScore?.criteriaScores ?? null,
     };
   });
 });
@@ -63,6 +73,7 @@ const totalCount = computed(() => entryList.value.length);
 const progressPct = computed(() => totalCount.value > 0 ? Math.round((scoredCount.value / totalCount.value) * 100) : 0);
 
 const scoring = ref<Record<string, number>>({});
+const critScoring = ref<Record<string, number[]>>({}); // per entry → [criterionScore...]
 const feedback = ref<Record<string, string>>({});
 const submitting = ref<string | null>(null);
 const error = ref('');
@@ -77,18 +88,50 @@ watch(entryList, (list) => {
     if (entry.myFeedback && feedback.value[entry.id] === undefined) {
       feedback.value[entry.id] = entry.myFeedback;
     }
+    if (hasCriteria.value && critScoring.value[entry.id] === undefined) {
+      // seed from a prior per-criterion submission, aligned by index
+      critScoring.value[entry.id] = criteria.value.map((c, i) =>
+        entry.myCriteriaScores?.[i]?.score ?? 0,
+      );
+    }
   }
 }, { immediate: true });
 
+// Live preview of the normalized overall when scoring by criteria.
+function critTotal(entryId: string): number {
+  const vals = critScoring.value[entryId] ?? [];
+  const totalMax = criteria.value.reduce((s, _c, i) => s + critMax(i), 0);
+  if (totalMax <= 0) return 0;
+  const sum = criteria.value.reduce((s, _c, i) => s + Math.min(Math.max(vals[i] ?? 0, 0), critMax(i)), 0);
+  return Math.round((sum / totalMax) * 100);
+}
+
 async function submitScore(entryId: string): Promise<void> {
   if (!inJudgingPhase.value) {
     error.value = 'Scoring is only open during the judging phase.';
     return;
   }
-  const score = scoring.value[entryId];
-  if (score === undefined || score < 1 || score > 100) {
-    error.value = 'Score must be between 1 and 100.';
-    return;
+
+  let body: Record<string, unknown>;
+  if (hasCriteria.value) {
+    const vals = critScoring.value[entryId] ?? [];
+    const criteriaScores = criteria.value.map((c, i) => ({
+      label: c.label,
+      score: Math.round(vals[i] ?? 0),
+      max: critMax(i),
+    }));
+    if (criteriaScores.some((c) => c.score < 0 || c.score > c.max)) {
+      error.value = 'Each criterion score must be between 0 and its maximum.';
+      return;
+    }
+    body = { entryId, criteriaScores, feedback: feedback.value[entryId] || undefined };
+  } else {
+    const score = scoring.value[entryId];
+    if (score === undefined || score < 1 || score > 100) {
+      error.value = 'Score must be between 1 and 100.';
+      return;
+    }
+    body = { entryId, score, feedback: feedback.value[entryId] || undefined };
   }
 
   error.value = '';
@@ -96,14 +139,7 @@ async function submitScore(entryId: string): Promise<void> {
   submitting.value = entryId;
 
   try {
-    await $fetch(`/api/contests/${slug}/judge`, {
-      method: 'POST',
-      body: {
-        entryId,
-        score,
-        feedback: feedback.value[entryId] || undefined,
-      },
-    });
+    await $fetch(`/api/contests/${slug}/judge`, { method: 'POST', body });
     success.value = 'Score submitted for entry.';
     await refreshEntries().catch(() => {
       success.value = 'Score saved — refresh to see the updated totals.';
@@ -202,14 +238,35 @@ async function submitScore(entryId: string): Promise<void> {
               <span class="cpub-judge-score-value">{{ entry.myScore }}</span>
             </div>
             <div class="cpub-judge-score-controls">
+              <!-- Per-criterion scoring (when the contest defines a rubric) -->
+              <div v-if="hasCriteria && critScoring[entry.id]" class="cpub-judge-criteria-inputs">
+                <div v-for="(crit, i) in criteria" :key="i" class="cpub-judge-crit-row">
+                  <label class="cpub-judge-crit-label">{{ crit.label }}</label>
+                  <div class="cpub-judge-crit-input-wrap">
+                    <input
+                      v-model.number="critScoring[entry.id][i]"
+                      type="number"
+                      class="cpub-judge-crit-input"
+                      min="0"
+                      :max="critMax(i)"
+                      :aria-label="`${crit.label} score, max ${critMax(i)}`"
+                    />
+                    <span class="cpub-judge-crit-max">/ {{ critMax(i) }}</span>
+                  </div>
+                </div>
+                <div class="cpub-judge-crit-total">Overall <strong>{{ critTotal(entry.id) }}</strong> / 100</div>
+              </div>
+
               <div class="cpub-judge-score-input-wrap">
                 <input
+                  v-if="!hasCriteria"
                   v-model.number="scoring[entry.id]"
                   type="number"
                   class="cpub-judge-score-input"
                   min="1"
                   max="100"
                   placeholder="1-100"
+                  aria-label="Overall score, 1 to 100"
                 />
                 <button
                   class="cpub-judge-score-btn"
@@ -279,6 +336,15 @@ async function submitScore(entryId: string): Promise<void> {
 .cpub-judge-score-label { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
 .cpub-judge-score-value { font-size: 20px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
 .cpub-judge-score-controls { display: flex; flex-direction: column; gap: 6px; }
+.cpub-judge-criteria-inputs { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: var(--border-width-default) dashed var(--border); background: var(--surface2); margin-bottom: 2px; }
+.cpub-judge-crit-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.cpub-judge-crit-label { font-size: 11px; color: var(--text-dim); flex: 1; min-width: 0; }
+.cpub-judge-crit-input-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.cpub-judge-crit-input { width: 52px; padding: 4px 6px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-family: var(--font-mono); text-align: center; outline: none; }
+.cpub-judge-crit-input:focus { border-color: var(--accent); }
+.cpub-judge-crit-max { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-judge-crit-total { font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); text-align: right; padding-top: 4px; border-top: var(--border-width-default) solid var(--border); }
+.cpub-judge-crit-total strong { color: var(--accent); font-size: 13px; }
 .cpub-judge-score-input-wrap { display: flex; gap: 0; }
 .cpub-judge-score-input {
   width: 70px; padding: 6px 8px; border: var(--border-width-default) solid var(--border); background: var(--surface);

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

@@ -121,6 +121,7 @@ function medalColor(rank: number): string {
       <!-- LEADERBOARD -->
       <div v-if="leaderboard.length > 0" class="cpub-leaderboard">
         <h2 class="cpub-leaderboard-title">Full Leaderboard</h2>
+        <div class="cpub-leaderboard-scroll">
         <table class="cpub-leaderboard-table">
           <thead>
             <tr>
@@ -150,6 +151,7 @@ function medalColor(rank: number): string {
             </tr>
           </tbody>
         </table>
+        </div>
       </div>
 
       <div v-else class="cpub-results-empty">
@@ -190,7 +192,9 @@ function medalColor(rank: number): string {
 /* LEADERBOARD */
 .cpub-leaderboard { margin-bottom: 32px; }
 .cpub-leaderboard-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
-.cpub-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+/* Horizontal scroll on narrow screens instead of overflowing the page. */
+.cpub-leaderboard-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.cpub-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }
 .cpub-leaderboard-table th { text-align: left; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 8px 12px; border-bottom: var(--border-width-default) solid var(--border); }
 .cpub-leaderboard-table td { padding: 10px 12px; border-bottom: var(--border-width-default) solid var(--border); }
 .cpub-lb-top3 { background: var(--surface2); }

package/server/api/contests/[slug]/judge.post.ts

@@ -7,7 +7,7 @@ export default defineEventHandler(async (event): Promise<{ success: boolean }> =
   const db = useDB();
   const input = await parseBody(event, judgeEntrySchema);
 
-  const result = await judgeContestEntry(db, input.entryId, input.score, user.id, input.feedback);
+  const result = await judgeContestEntry(db, input.entryId, input.score, user.id, input.feedback, input.criteriaScores);
   if (!result.judged) {
     throw createError({ statusCode: 403, statusMessage: result.error ?? 'Judging failed' });
   }