@commonpub/layer 0.83.1 → 0.84.0

package/components/contest/ContestStagesEditor.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import type { ContestStage, ContestSubmissionTemplateField } from '@commonpub/schema';
+import type { ContestStage } from '@commonpub/schema';
+import ContestStageCard from './ContestStageCard.vue';
 
 // Phase B1 — define an arbitrary, ordered stage timeline for a contest. Empty ⇒
 // the contest uses the synthesized standard flow (Submissions → Judging → Results),
 // so this editor is opt-in. `kind` drives display + how the stage maps to the coarse
 // status; `name`/dates are arbitrary. Used by both create.vue and edit.vue.
+//
+// This component is the LIST orchestrator: it owns the stages array + the
+// add/move/remove/duplicate/reset operations (pure helpers in utils/contestStages.ts)
+// and renders one ContestStageCard per stage, applying the card's emitted intents.
 
 const stages = defineModel<ContestStage[]>({ required: true });
 // Local name `currentId` avoids colliding with the auto-imported `currentStageId`
@@ -18,81 +23,27 @@ const props = defineProps<{
   judgingEndDate?: string | null;
 }>();
 
-const KINDS: ContestStage['kind'][] = ['submission', 'review', 'interim', 'results', 'event', 'custom'];
-
-// datetime-local <-> ISO via the shared, offset-correct helpers (utils/datetime).
+// Whole-array reassign on every edit (pure ops); keeps the parent v-model reactive.
 function commit(next: ContestStage[]): void {
   stages.value = next;
 }
 
 function setField(i: number, patch: Partial<ContestStage>): void {
-  const next = stages.value.map((s, idx) => (idx === i ? { ...s, ...patch } : s));
-  commit(next);
-}
-
-// Per-round rubric (review stages) is edited by the shared ContestCriteriaEditor
-// (same component as the contest-level Judging tab — one rubric editor, no dup).
-function advanceCountInput(i: number, e: Event): void {
-  const v = (e.target as HTMLInputElement).value;
-  setField(i, { advanceCount: v === '' ? undefined : Math.max(1, Math.round(Number(v))) });
+  commit(stages.value.map((s, idx) => (idx === i ? { ...s, ...patch } : s)));
 }
 
-// Per-stage submission template (submission stages): what entrants fill for
-// THIS stage's artifact (proposal vs prototype). Array ops live as pure
-// functions in utils/contestStages.ts (unit-tested). Flag-gated (rule #2).
-const { features } = useFeatures();
-const templatesEnabled = computed(() => features.value.contestStageSubmissions !== false);
-// Phase 4: the PII flag offers the agreement/address types + the per-field PII
-// toggle; the proposals flag offers per-stage submission mode (attach vs proposal).
-const piiEnabled = computed(() => features.value.contestPii === true);
-const proposalsEnabled = computed(() => features.value.contestProposals === true);
-const FIELD_TYPES = computed<ContestSubmissionTemplateField['type'][]>(() => {
-  const base: ContestSubmissionTemplateField['type'][] = ['text', 'textarea', 'url', 'email', 'number', 'select', 'checkbox', 'date'];
-  if (piiEnabled.value) base.push('agreement', 'address');
-  return base;
-});
-
-function addTemplateField(i: number): void {
-  commit(withTemplateFieldAdded(stages.value, i));
-}
-function setTemplateField(i: number, fi: number, patch: Partial<ContestSubmissionTemplateField>): void {
-  commit(withTemplateFieldSet(stages.value, i, fi, patch));
-}
-function changeTemplateFieldType(i: number, fi: number, type: ContestSubmissionTemplateField['type']): void {
-  commit(withTemplateFieldTypeChanged(stages.value, i, fi, type));
-}
-function templateFieldLabelInput(i: number, fi: number, e: Event): void {
-  commit(withTemplateFieldLabelChanged(stages.value, i, fi, (e.target as HTMLInputElement).value));
-}
-function removeTemplateField(i: number, fi: number): void {
-  commit(withTemplateFieldRemoved(stages.value, i, fi));
-}
-// Select-option ops (pure helpers in utils/contestStages.ts).
-function addOption(i: number, fi: number): void {
-  commit(withTemplateOptionAdded(stages.value, i, fi));
-}
-function setOption(i: number, fi: number, oi: number, patch: Partial<{ value: string; label: string }>): void {
-  commit(withTemplateOptionSet(stages.value, i, fi, oi, patch));
-}
-function removeOption(i: number, fi: number, oi: number): void {
-  commit(withTemplateOptionRemoved(stages.value, i, fi, oi));
-}
-
-// Array operations live as pure functions in utils/contestStages.ts (unit-tested).
+// Stage-array operations live as pure functions in utils/contestStages.ts (unit-tested).
 function addStage(): void {
   commit(withStageAdded(stages.value));
 }
-
 function duplicateStage(i: number): void {
   commit(withStageDuplicated(stages.value, i));
 }
-
 function removeStage(i: number): void {
   const removed = stages.value[i];
   commit(withStageRemoved(stages.value, i));
   if (removed && currentId.value === removed.id) currentId.value = null;
 }
-
 function move(i: number, dir: -1 | 1): void {
   commit(withStageMoved(stages.value, i, dir));
 }
@@ -101,7 +52,6 @@ function move(i: number, dir: -1 | 1): void {
 function customize(): void {
   commit(seedStandardStages(props));
 }
-
 function resetToStandard(): void {
   currentId.value = null;
   commit([]);
@@ -137,235 +87,20 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
       </p>
 
       <ol class="cpub-stage-list">
-        <li v-for="(stage, i) in stages" :key="stage.id" class="cpub-stage-row">
-          <div class="cpub-stage-row-head">
-            <span class="cpub-stage-num">{{ i + 1 }}</span>
-            <label class="cpub-stage-current" :title="currentId === stage.id ? 'This is the current stage' : 'Mark as the current stage'">
-              <input
-                type="radio"
-                name="cpub-current-stage"
-                :checked="currentId === stage.id"
-                @change="currentId = stage.id"
-              />
-              <span>Current</span>
-            </label>
-            <div class="cpub-stage-row-actions">
-              <button type="button" class="cpub-stage-iconbtn" :disabled="i === 0" aria-label="Move up" @click="move(i, -1)"><i class="fa-solid fa-arrow-up"></i></button>
-              <button type="button" class="cpub-stage-iconbtn" :disabled="i === stages.length - 1" aria-label="Move down" @click="move(i, 1)"><i class="fa-solid fa-arrow-down"></i></button>
-              <button type="button" class="cpub-stage-iconbtn" aria-label="Duplicate stage" @click="duplicateStage(i)"><i class="fa-solid fa-clone"></i></button>
-              <button type="button" class="cpub-stage-iconbtn cpub-stage-del" aria-label="Remove stage" @click="removeStage(i)"><i class="fa-solid fa-xmark"></i></button>
-            </div>
-          </div>
-
-          <div class="cpub-form-row">
-            <div class="cpub-form-field" style="flex: 2;">
-              <label :for="`stage-name-${i}`" class="cpub-form-label">Stage name</label>
-              <input
-                :id="`stage-name-${i}`"
-                :value="stage.name"
-                type="text"
-                class="cpub-form-input"
-                placeholder="e.g. Proposals Open"
-                @input="setField(i, { name: ($event.target as HTMLInputElement).value })"
-              />
-            </div>
-            <div class="cpub-form-field" style="flex: 1;">
-              <label :for="`stage-type-${i}`" class="cpub-form-label">Type</label>
-              <select
-                :id="`stage-type-${i}`"
-                :value="stage.kind"
-                class="cpub-form-input"
-                @change="setField(i, { kind: ($event.target as HTMLSelectElement).value as ContestStage['kind'] })"
-              >
-                <option v-for="k in KINDS" :key="k" :value="k">{{ STAGE_KIND_LABEL[k] }}</option>
-              </select>
-            </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">
-            <CpubDateTimeField
-              label="Starts"
-              :model-value="stage.startsAt"
-              :max="stage.endsAt"
-              @update:model-value="setField(i, { startsAt: $event })"
-            />
-            <CpubDateTimeField
-              label="Ends (countdown target)"
-              :model-value="stage.endsAt"
-              :min="stage.startsAt"
-              @update:model-value="setField(i, { endsAt: $event })"
-            />
-          </div>
-
-          <div class="cpub-form-field">
-            <label :for="`stage-desc-${i}`" class="cpub-form-label">Description (optional)</label>
-            <input
-              :id="`stage-desc-${i}`"
-              :value="stage.description ?? ''"
-              type="text"
-              class="cpub-form-input"
-              placeholder="What happens, or what to submit/refine, this stage"
-              @input="setField(i, { description: ($event.target as HTMLInputElement).value || undefined })"
-            />
-          </div>
-
-          <!-- Per-round config (review stages): how many advance + the rubric -->
-          <div v-if="stage.kind === 'review'" class="cpub-stage-criteria">
-            <div class="cpub-form-field" style="margin-bottom: 10px;">
-              <label :for="`stage-advance-${i}`" class="cpub-form-label">Advance the top N to the next stage</label>
-              <input :id="`stage-advance-${i}`" :value="stage.advanceCount ?? ''" type="number" min="1" class="cpub-form-input cpub-stage-advn" placeholder="e.g. 50, leave blank to decide at advance time" @input="advanceCountInput(i, $event)" />
-            </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>
-            <ContestCriteriaEditor
-              :model-value="(stage.criteria ?? [])"
-              label="Judging criteria, this round"
-              :show-total="false"
-              @update:model-value="setField(i, { criteria: ($event as ContestStage['criteria']) })"
-            />
-          </div>
-
-          <!-- Submission mode (Phase 4): attach an existing project, or collect a
-               form-first proposal that seeds a draft placeholder project. -->
-          <div v-if="stage.kind === 'submission' && proposalsEnabled" class="cpub-form-field">
-            <label :for="`stage-mode-${i}`" class="cpub-form-label">How entrants submit</label>
-            <select
-              :id="`stage-mode-${i}`"
-              :value="stage.submissionMode ?? 'attach'"
-              class="cpub-form-input"
-              @change="setField(i, { submissionMode: (($event.target as HTMLSelectElement).value as 'attach' | 'proposal') })"
-            >
-              <option value="attach">Attach an existing published project</option>
-              <option value="proposal">Proposal form (creates a draft project)</option>
-            </select>
-            <p class="cpub-form-hint" style="margin: 4px 0;">Proposal mode lets entrants apply with just this form. The server creates a draft project they develop for later rounds.</p>
-          </div>
-
-          <!-- Per-stage submission template (submission stages): the artifact
-               fields entrants fill for THIS stage (proposal vs prototype). -->
-          <div v-if="stage.kind === 'submission' && templatesEnabled" 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="addTemplateField(i)"><i class="fa-solid fa-plus"></i> Add field</button>
-            </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>
-            <div v-for="(tf, fi) in (stage.submissionTemplate ?? [])" :key="fi" class="cpub-stage-tfield">
-              <div class="cpub-stage-tfield-main">
-                <input
-                  :value="tf.label"
-                  type="text"
-                  class="cpub-form-input"
-                  placeholder="Field label (e.g. Repository URL)"
-                  :aria-label="`Field ${fi + 1} label`"
-                  @input="templateFieldLabelInput(i, fi, $event)"
-                />
-                <select
-                  :value="tf.type"
-                  class="cpub-form-input cpub-stage-tfield-type"
-                  :aria-label="`Field ${fi + 1} type`"
-                  @change="changeTemplateFieldType(i, fi, ($event.target as HTMLSelectElement).value as ContestSubmissionTemplateField['type'])"
-                >
-                  <option v-for="t in FIELD_TYPES" :key="t" :value="t">{{ TEMPLATE_FIELD_TYPE_LABEL[t] }}</option>
-                </select>
-                <label class="cpub-stage-tfield-req">
-                  <input
-                    type="checkbox"
-                    :checked="tf.required"
-                    :aria-label="`Field ${fi + 1} required`"
-                    @change="setTemplateField(i, fi, { required: ($event.target as HTMLInputElement).checked })"
-                  />
-                  <span>Required</span>
-                </label>
-                <button type="button" class="cpub-stage-iconbtn cpub-stage-del" aria-label="Remove field" @click="removeTemplateField(i, fi)"><i class="fa-solid fa-xmark"></i></button>
-              </div>
-              <input
-                :value="tf.help ?? ''"
-                type="text"
-                class="cpub-form-input cpub-stage-tfield-help"
-                placeholder="Hint shown under the input (optional)"
-                :aria-label="`Field ${fi + 1} hint`"
-                @input="setTemplateField(i, fi, { help: ($event.target as HTMLInputElement).value || undefined })"
-              />
-
-              <!-- select: the allowed options -->
-              <div v-if="tf.type === 'select'" class="cpub-stage-tfield-extra">
-                <span class="cpub-form-hint" style="margin: 0;">Choices</span>
-                <div v-for="(opt, oi) in (tf.options ?? [])" :key="oi" class="cpub-stage-opt-row">
-                  <input
-                    :value="opt.label"
-                    type="text"
-                    class="cpub-form-input"
-                    placeholder="Label (shown to entrants)"
-                    :aria-label="`Field ${fi + 1} option ${oi + 1} label`"
-                    @input="setOption(i, fi, oi, { label: ($event.target as HTMLInputElement).value })"
-                  />
-                  <input
-                    :value="opt.value"
-                    type="text"
-                    class="cpub-form-input"
-                    placeholder="Value (stored)"
-                    :aria-label="`Field ${fi + 1} option ${oi + 1} value`"
-                    @input="setOption(i, fi, oi, { value: ($event.target as HTMLInputElement).value })"
-                  />
-                  <button type="button" class="cpub-stage-iconbtn cpub-stage-del" aria-label="Remove option" @click="removeOption(i, fi, oi)"><i class="fa-solid fa-xmark"></i></button>
-                </div>
-                <button type="button" class="cpub-btn cpub-btn-sm" @click="addOption(i, fi)"><i class="fa-solid fa-plus"></i> Add choice</button>
-              </div>
-
-              <!-- agreement: terms the entrant must accept -->
-              <div v-if="tf.type === 'agreement'" class="cpub-stage-tfield-extra">
-                <textarea
-                  :value="tf.terms ?? ''"
-                  class="cpub-form-input cpub-form-textarea"
-                  rows="3"
-                  placeholder="Terms the entrant must accept (e.g. shipping the hardware to winners)"
-                  :aria-label="`Field ${fi + 1} agreement terms`"
-                  @input="setTemplateField(i, fi, { terms: ($event.target as HTMLTextAreaElement).value || undefined })"
-                ></textarea>
-                <label class="cpub-stage-tfield-req">
-                  <input
-                    type="checkbox"
-                    :checked="tf.mustAccept !== false"
-                    :aria-label="`Field ${fi + 1} must accept`"
-                    @change="setTemplateField(i, fi, { mustAccept: ($event.target as HTMLInputElement).checked })"
-                  />
-                  <span>Must accept to submit</span>
-                </label>
-              </div>
-
-              <!-- address: structured + always personal data -->
-              <p v-if="tf.type === 'address'" class="cpub-form-hint" style="margin: 4px 0;">
-                Collected as a structured mailing address and stored as personal data. Visible only to staff with PII access and the entrant.
-              </p>
-
-              <!-- PII toggle (non-address, non-agreement scalar fields) -->
-              <label
-                v-if="piiEnabled && tf.type !== 'address' && tf.type !== 'agreement'"
-                class="cpub-stage-tfield-req cpub-stage-tfield-pii"
-              >
-                <input
-                  type="checkbox"
-                  :checked="tf.pii === true"
-                  :aria-label="`Field ${fi + 1} is personal data`"
-                  @change="setTemplateField(i, fi, { pii: ($event.target as HTMLInputElement).checked || undefined })"
-                />
-                <span>Personal data (store privately, hide from the public listing)</span>
-              </label>
-            </div>
-          </div>
-
-          <div v-if="stage.kind === 'event'" class="cpub-form-row">
-            <div class="cpub-form-field">
-              <label :for="`stage-location-${i}`" class="cpub-form-label">Location</label>
-              <input :id="`stage-location-${i}`" :value="stage.location ?? ''" type="text" class="cpub-form-input" placeholder="e.g. Washington, D.C." @input="setField(i, { location: ($event.target as HTMLInputElement).value || undefined })" />
-            </div>
-            <div class="cpub-form-field">
-              <label :for="`stage-url-${i}`" class="cpub-form-label">Link</label>
-              <input :id="`stage-url-${i}`" :value="stage.url ?? ''" type="url" class="cpub-form-input" placeholder="https://…" @input="setField(i, { url: ($event.target as HTMLInputElement).value || undefined })" />
-            </div>
-          </div>
-        </li>
+        <ContestStageCard
+          v-for="(stage, i) in stages"
+          :key="stage.id"
+          :stage="stage"
+          :index="i"
+          :is-current="currentId === stage.id"
+          :is-first="i === 0"
+          :is-last="i === stages.length - 1"
+          @patch="setField(i, $event)"
+          @move="move(i, $event)"
+          @duplicate="duplicateStage(i)"
+          @remove="removeStage(i)"
+          @set-current="currentId = stage.id"
+        />
       </ol>
 
       <div class="cpub-stage-toolbar">
@@ -376,47 +111,12 @@ 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); }
-
+/* Only the list/orchestrator chrome lives here; the per-stage form controls travel
+   with ContestStageCard / ContestStageTemplateEditor (scoped CSS is per-component). */
 .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; }
-.cpub-stage-num { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--font-mono); background: var(--accent-bg); color: var(--accent); border: var(--border-width-default) solid var(--accent-border); }
-.cpub-stage-current { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); cursor: pointer; }
-.cpub-stage-current input { width: 13px; height: 13px; }
-.cpub-stage-row-actions { margin-left: auto; display: flex; gap: 4px; }
-.cpub-stage-iconbtn { background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text-dim); cursor: pointer; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
-.cpub-stage-iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
-.cpub-stage-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
-.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-advn { max-width: 320px; }
-.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; }
-.cpub-stage-tfield-main .cpub-form-input { flex: 2; min-width: 140px; margin: 0; }
-.cpub-stage-tfield-type { flex: 1 !important; min-width: 110px !important; max-width: 150px; }
-.cpub-stage-tfield-req { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); cursor: pointer; flex-shrink: 0; }
-.cpub-stage-tfield-req input { width: 13px; height: 13px; }
-.cpub-stage-tfield-help { margin-top: 6px !important; font-size: var(--text-xs) !important; }
-.cpub-stage-tfield-extra { margin-top: 6px; padding: 8px; border: var(--border-width-default) dashed var(--border2); background: var(--surface2); display: flex; flex-direction: column; gap: 6px; }
-.cpub-stage-opt-row { display: flex; align-items: center; gap: 6px; }
-.cpub-stage-opt-row .cpub-form-input { flex: 1; min-width: 100px; margin: 0; }
-.cpub-stage-tfield-pii { margin-top: 6px; }
 </style>

package/composables/useContestEditor.ts

@@ -15,6 +15,7 @@
  */
 import { ref, computed, watch, nextTick, type Ref, type ComputedRef } from 'vue';
 import type { ContestStage } from '@commonpub/schema';
+import type { ContestTemplateSeed } from '../utils/contestTemplates';
 
 export type ContestFormat = 'markdown' | 'html';
 export type ContestVisibility = 'public' | 'unlisted' | 'private';
@@ -133,6 +134,9 @@ export interface UseContestEditor {
   prizeLabel: (prize: ContestPrizeRow) => string;
   // lifecycle
   hydrate: (c: ContestEditorSource) => void;
+  /** Seed a starter template (create mode) into the stage/rubric/body refs without
+   *  marking the form dirty. Only the provided fields are applied. */
+  applyTemplate: (seed: ContestTemplateSeed) => void;
   buildPayload: () => Record<string, unknown>;
   /** Persist the form. `silent` (autosave) skips the success toast + navigation +
    *  refresh, renames in place via `onRenamed`, and rethrows on failure so the
@@ -279,6 +283,27 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
     void nextTick(() => { hydrating = false; });
   }
 
+  // Seed a starter template into the stage/rubric/body refs (create mode). Guarded
+  // by `hydrating` so an untouched template doesn't flip `formDirty` — a freshly
+  // seeded create page should read "no unsaved changes". The orchestrator reseeds
+  // the body block editors afterward (their own `syncingBodies` guard suppresses the
+  // write-back), so seeding the body refs here is enough.
+  function applyTemplate(seed: ContestTemplateSeed): void {
+    hydrating = true;
+    stages.value = seed.stages;
+    currentStageId.value = seed.currentStageId;
+    criteria.value = seed.judgingCriteria.map((cr) => ({
+      label: cr.label,
+      weight: cr.weight ?? undefined,
+      description: cr.description ?? undefined,
+    }));
+    descriptionBlocks.value = seed.descriptionBlocks;
+    rulesBlocks.value = seed.rulesBlocks;
+    prizesBlocks.value = seed.prizesBlocks;
+    formDirty.value = false;
+    void nextTick(() => { hydrating = false; });
+  }
+
   function buildPayload(): Record<string, unknown> {
     const prizeData = prizes.value
       .filter((p) => p.title.trim() || p.description.trim() || p.category.trim() || (typeof p.place === 'number' && p.place > 0))
@@ -383,6 +408,6 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
     visibility, visibleToRoles, showPrizes, prizesDescription, prizes, criteria, stages, currentStageId,
     saving, formDirty, dateError, canSubmit,
     slugify: slugifyContest, toggleType, toggleRole, addPrize, removePrize, prizeLabel,
-    hydrate, buildPayload, save,
+    hydrate, applyTemplate, buildPayload, save,
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.83.1",
+  "version": "0.84.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,16 +55,16 @@
     "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/learning": "0.5.2",
     "@commonpub/protocol": "0.14.0",
-    "@commonpub/auth": "0.8.0",
+    "@commonpub/server": "2.90.0",
     "@commonpub/docs": "0.6.3",
     "@commonpub/schema": "0.46.0",
     "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/server": "2.90.0",
-    "@commonpub/editor": "0.8.0",
     "@commonpub/ui": "0.13.1",
-    "@commonpub/explainer": "0.8.0"
+    "@commonpub/auth": "0.8.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",