@commonpub/layer 0.53.0 → 0.55.0

package/components/contest/ContestStagesEditor.vue

@@ -20,11 +20,6 @@ const props = defineProps<{
 
 const KINDS: ContestStage['kind'][] = ['submission', 'review', 'interim', 'results', 'event', 'custom'];
 
-function newId(): string {
-  const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
-  return c?.randomUUID?.() ?? `s-${Date.now()}-${Math.round(Math.random() * 1e6)}`;
-}
-
 // datetime-local <-> ISO (mirrors the rest of the contest forms' convention).
 function toLocal(iso?: string): string {
   if (!iso) return '';
@@ -50,39 +45,28 @@ function onDate(i: number, field: 'startsAt' | 'endsAt', e: Event): void {
   setField(i, { [field]: v } as Partial<ContestStage>);
 }
 
+// Array operations live as pure functions in utils/contestStages.ts (unit-tested).
 function addStage(): void {
-  commit([...stages.value, { id: newId(), name: '', kind: 'custom' }]);
+  commit(withStageAdded(stages.value));
 }
 
 function duplicateStage(i: number): void {
-  const src = stages.value[i];
-  if (!src) return;
-  const copy: ContestStage = { ...src, id: newId(), name: `${src.name} (copy)`, core: false };
-  commit([...stages.value.slice(0, i + 1), copy, ...stages.value.slice(i + 1)]);
+  commit(withStageDuplicated(stages.value, i));
 }
 
 function removeStage(i: number): void {
   const removed = stages.value[i];
-  commit(stages.value.filter((_, idx) => idx !== i));
+  commit(withStageRemoved(stages.value, i));
   if (removed && currentId.value === removed.id) currentId.value = null;
 }
 
 function move(i: number, dir: -1 | 1): void {
-  const j = i + dir;
-  if (j < 0 || j >= stages.value.length) return;
-  const next = [...stages.value];
-  [next[i], next[j]] = [next[j]!, next[i]!];
-  commit(next);
+  commit(withStageMoved(stages.value, i, dir));
 }
 
 // Seed the editor with the standard three stages so the owner has a starting point.
 function customize(): void {
-  const iso = (d?: string | null) => (d ? new Date(d).toISOString() : undefined);
-  commit([
-    { id: newId(), name: 'Submissions', kind: 'submission', startsAt: iso(props.startDate), endsAt: iso(props.endDate) },
-    { id: newId(), name: 'Judging', kind: 'review', endsAt: iso(props.judgingEndDate) ?? iso(props.endDate) },
-    { id: newId(), name: 'Results', kind: 'results' },
-  ]);
+  commit(seedStandardStages(props));
 }
 
 function resetToStandard(): void {
@@ -108,6 +92,13 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
     </div>
 
     <template v-else>
+      <div class="cpub-stage-tophead">
+        <span class="cpub-stage-count">{{ stages.length }} stage{{ stages.length === 1 ? '' : 's' }}</span>
+        <div class="cpub-stage-toolbar">
+          <button type="button" class="cpub-btn cpub-btn-sm" @click="addStage"><i class="fa-solid fa-plus"></i> Add stage</button>
+          <button type="button" class="cpub-btn cpub-btn-sm cpub-stage-reset" @click="resetToStandard"><i class="fa-solid fa-rotate-left"></i> Reset to standard</button>
+        </div>
+      </div>
       <p v-if="missingSubmission" class="cpub-form-error" role="alert" style="margin: 0 0 10px;">
         Add at least one <strong>Submissions</strong> stage, or reset to the standard flow.
       </p>
@@ -193,14 +184,25 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
 
       <div class="cpub-stage-toolbar">
         <button type="button" class="cpub-btn cpub-btn-sm" @click="addStage"><i class="fa-solid fa-plus"></i> Add stage</button>
-        <button type="button" class="cpub-btn cpub-btn-sm cpub-stage-reset" @click="resetToStandard"><i class="fa-solid fa-rotate-left"></i> Reset to standard flow</button>
       </div>
     </template>
   </div>
 </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); }
 .cpub-stage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
 .cpub-stage-row { border: var(--border-width-default) solid var(--border); background: var(--surface2); padding: 12px; }
 .cpub-stage-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "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/auth": "0.8.0",
     "@commonpub/config": "0.18.0",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/editor": "0.7.11",
-    "@commonpub/schema": "0.30.0",
-    "@commonpub/protocol": "0.13.0",
     "@commonpub/docs": "0.6.3",
     "@commonpub/explainer": "0.7.15",
+    "@commonpub/protocol": "0.13.0",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/server": "2.77.0",
-    "@commonpub/ui": "0.9.2",
-    "@commonpub/auth": "0.8.0"
+    "@commonpub/schema": "0.30.0",
+    "@commonpub/ui": "0.9.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -268,6 +268,8 @@ async function transitionStatus(newStatus: string): Promise<void> {
     </p>
 
     <form class="cpub-edit-form" @submit.prevent="handleSave">
+      <div class="cpub-edit-layout">
+      <div class="cpub-edit-main">
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Details</h2>
         <div class="cpub-form-field">
@@ -348,24 +350,6 @@ async function transitionStatus(newStatus: string): Promise<void> {
         </div>
       </section>
 
-      <section class="cpub-form-section">
-        <h2 class="cpub-form-section-title">Entries</h2>
-        <div class="cpub-form-field">
-          <span class="cpub-form-label">Eligible content types</span>
-          <p class="cpub-form-hint">Leave all unchecked to accept any published content the entrant owns.</p>
-          <div class="cpub-type-options" role="group" aria-label="Eligible content types">
-            <label v-for="t in enabledTypeMeta" :key="t.type" class="cpub-form-check">
-              <input type="checkbox" :checked="eligibleContentTypes.includes(t.type)" @change="toggleType(t.type)" />
-              <span>{{ t.label }}</span>
-            </label>
-          </div>
-        </div>
-        <div class="cpub-form-field">
-          <label class="cpub-form-label">Max entries per person</label>
-          <input v-model.number="maxEntriesPerUser" type="number" min="1" class="cpub-form-input" placeholder="Unlimited" style="max-width: 160px;" />
-        </div>
-      </section>
-
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Prizes</h2>
         <label class="cpub-form-check" style="margin-bottom: 10px;">
@@ -482,6 +466,26 @@ async function transitionStatus(newStatus: string): Promise<void> {
         <p class="cpub-form-hint">Invited judges receive a notification and must accept before they can score.</p>
         <ContestJudgeManager :contest-slug="slug" :is-owner="true" />
       </section>
+      </div><!-- /cpub-edit-main -->
+
+      <aside class="cpub-edit-side">
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Entries</h2>
+        <div class="cpub-form-field">
+          <span class="cpub-form-label">Eligible content types</span>
+          <p class="cpub-form-hint">Leave all unchecked to accept any published content the entrant owns.</p>
+          <div class="cpub-type-options" role="group" aria-label="Eligible content types">
+            <label v-for="t in enabledTypeMeta" :key="t.type" class="cpub-form-check">
+              <input type="checkbox" :checked="eligibleContentTypes.includes(t.type)" @change="toggleType(t.type)" />
+              <span>{{ t.label }}</span>
+            </label>
+          </div>
+        </div>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Max entries per person</label>
+          <input v-model.number="maxEntriesPerUser" type="number" min="1" class="cpub-form-input" placeholder="Unlimited" />
+        </div>
+      </section>
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Stage &amp; Status</h2>
@@ -526,6 +530,8 @@ async function transitionStatus(newStatus: string): Promise<void> {
           </button>
         </div>
       </section>
+      </aside><!-- /cpub-edit-side -->
+      </div><!-- /cpub-edit-layout -->
 
       <!-- Sticky save bar — always reachable without scrolling to the bottom. -->
       <div class="cpub-edit-actionbar">
@@ -545,7 +551,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
 </template>
 
 <style scoped>
-.cpub-contest-edit { max-width: 700px; margin: 0 auto; padding: 32px; }
+.cpub-contest-edit { max-width: 1080px; margin: 0 auto; padding: 32px; }
 .cpub-back-link { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
 .cpub-back-link:hover { color: var(--accent); }
 .cpub-edit-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
@@ -561,15 +567,19 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-status-cancelled { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
 
 .cpub-edit-form { display: flex; flex-direction: column; gap: 16px; }
+/* Two-column editor: wide content column + a sticky meta rail (Stage & Status,
+   Entry rules, Danger Zone) so lifecycle controls stay reachable while editing. */
+.cpub-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
+.cpub-edit-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.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-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+.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-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
-.cpub-form-input, .cpub-form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
-.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; }
+.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: 1fr 1fr; gap: 12px; }
+.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; }
@@ -632,6 +642,11 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-edit-actionbar-status { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
 .cpub-edit-actionbar-btns { display: flex; align-items: center; gap: 8px; }
 
+/* Collapse the meta rail under the main column on narrower viewports. */
+@media (max-width: 900px) {
+  .cpub-edit-layout { grid-template-columns: 1fr; }
+  .cpub-edit-side { position: static; }
+}
 @media (max-width: 768px) {
   .cpub-contest-edit { padding: 16px; }
   .cpub-form-row { grid-template-columns: 1fr; }

package/pages/contests/create.vue

@@ -403,13 +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-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+.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-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
-.cpub-form-input, .cpub-form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
-.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; }
+.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: 12px; }
+.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

@@ -49,6 +49,50 @@ export function currentStageId(c: StageSource): string | null {
   }
 }
 
+// ─── Pure stage-array operations (used by ContestStagesEditor; unit-tested) ───
+
+export function newStageId(): string {
+  const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
+  return c?.randomUUID?.() ?? `s-${Date.now()}-${Math.round(Math.random() * 1e6)}`;
+}
+
+export function blankStage(): ContestStage {
+  return { id: newStageId(), name: '', kind: 'custom' };
+}
+
+/** The three standard stages seeded when an operator chooses to customise. */
+export function seedStandardStages(c: { startDate?: string | null; endDate?: string | null; judgingEndDate?: string | null }): ContestStage[] {
+  const i = (d?: string | null): string | undefined => (d ? new Date(d).toISOString() : undefined);
+  return [
+    { id: newStageId(), name: 'Submissions', kind: 'submission', startsAt: i(c.startDate), endsAt: i(c.endDate) },
+    { id: newStageId(), name: 'Judging', kind: 'review', endsAt: i(c.judgingEndDate) ?? i(c.endDate) },
+    { id: newStageId(), name: 'Results', kind: 'results' },
+  ];
+}
+
+export function withStageAdded(stages: ContestStage[]): ContestStage[] {
+  return [...stages, blankStage()];
+}
+
+export function withStageDuplicated(stages: ContestStage[], i: number): ContestStage[] {
+  const src = stages[i];
+  if (!src) return stages;
+  const copy: ContestStage = { ...src, id: newStageId(), name: `${src.name} (copy)`, core: false };
+  return [...stages.slice(0, i + 1), copy, ...stages.slice(i + 1)];
+}
+
+export function withStageRemoved(stages: ContestStage[], i: number): ContestStage[] {
+  return stages.filter((_, idx) => idx !== i);
+}
+
+export function withStageMoved(stages: ContestStage[], i: number, dir: -1 | 1): ContestStage[] {
+  const j = i + dir;
+  if (j < 0 || j >= stages.length) return stages;
+  const next = [...stages];
+  [next[i], next[j]] = [next[j]!, next[i]!];
+  return next;
+}
+
 /** FontAwesome icon (no `fa-solid` prefix) for each stage kind. */
 export const STAGE_KIND_ICON: Record<ContestStage['kind'], string> = {
   submission: 'fa-pen-to-square',