@commonpub/layer 0.83.2 → 0.85.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/components/contest/blocks/JudgesShowcaseBlock.vue

@@ -2,14 +2,29 @@
 /**
  * Edit component for the `judgesShowcase` contest block (avatar + name + title +
  * bio cards). Provided to BlockCanvas via BLOCK_COMPONENTS_KEY by the contest
- * editor (2e). Follows the house block-edit contract: `content` in, `update` out,
- * immutable list ops. Avatars are URLs here; 2e can swap to <ImageUpload>.
+ * editor. Follows the house block-edit contract: `content` in, `update` out,
+ * immutable list ops.
+ *
+ * P6 de-friction: avatars now upload via the contest editor's UPLOAD_HANDLER_KEY
+ * (URL still accepted), rows reorder, and "Import panel judges" seeds rows from
+ * the real scoring panel (CONTEST_JUDGES_KEY) in one click. The Judges Showcase
+ * is the curated PUBLIC face (custom photos/titles); the scoring panel (People
+ * rail) is the real accounts who score — two distinct concepts, hence the note.
  */
+import { inject, ref } from 'vue';
+import { UPLOAD_HANDLER_KEY } from '@commonpub/editor/vue';
+import { CONTEST_JUDGES_KEY } from '../../../utils/contestBlocks';
 import type { JudgeShowcaseEntry, JudgesShowcaseContent } from '../../../types/contestBlocks';
 
 const props = defineProps<{ content: Record<string, unknown> }>();
 const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
 
+const uploadHandler = inject(UPLOAD_HANDLER_KEY, undefined);
+const loadPanelJudges = inject(CONTEST_JUDGES_KEY, null);
+const uploadingIndex = ref<number | null>(null);
+const importing = ref(false);
+const importNote = ref('');
+
 const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading : ''));
 const judges = computed<JudgeShowcaseEntry[]>(() =>
   Array.isArray(props.content.judges) ? (props.content.judges as JudgeShowcaseEntry[]) : [],
@@ -30,6 +45,50 @@ function setJudge(i: number, field: keyof JudgeShowcaseEntry, v: string): void {
 function removeJudge(i: number): void {
   commit({ judges: judges.value.filter((_, idx) => idx !== i) });
 }
+function moveJudge(i: number, dir: -1 | 1): void {
+  const j = i + dir;
+  if (j < 0 || j >= judges.value.length) return;
+  const next = [...judges.value];
+  [next[i], next[j]] = [next[j]!, next[i]!];
+  commit({ judges: next });
+}
+
+async function onFile(i: number, event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (!file || !uploadHandler) return;
+  uploadingIndex.value = i;
+  try {
+    const res = await uploadHandler(file);
+    setJudge(i, 'avatarUrl', res.url);
+  } finally {
+    uploadingIndex.value = null;
+  }
+}
+
+async function importPanelJudges(): Promise<void> {
+  if (!loadPanelJudges || importing.value) return;
+  importing.value = true;
+  importNote.value = '';
+  try {
+    const panel = await loadPanelJudges();
+    const have = new Set(judges.value.map((j) => (j.name ?? '').trim().toLowerCase()).filter(Boolean));
+    const additions: JudgeShowcaseEntry[] = panel
+      .filter((p) => p.name.trim() && !have.has(p.name.trim().toLowerCase()))
+      .map((p) => ({ name: p.name, avatarUrl: p.avatarUrl, title: p.title, link: p.link }));
+    if (!additions.length) {
+      importNote.value = panel.length ? 'All panel judges are already shown.' : 'No panel judges to import yet.';
+      return;
+    }
+    commit({ judges: [...judges.value, ...additions] });
+    importNote.value = `Imported ${additions.length} judge${additions.length === 1 ? '' : 's'}. Add photos and titles below.`;
+  } catch {
+    importNote.value = 'Could not load the judges panel.';
+  } finally {
+    importing.value = false;
+  }
+}
 </script>
 
 <template>
@@ -38,10 +97,25 @@ function removeJudge(i: number): void {
       <div class="cpub-jedit-icon"><i class="fa-solid fa-user-group"></i></div>
       <span class="cpub-jedit-title">Judges Showcase</span>
       <span class="cpub-jedit-count">{{ judges.length }} {{ judges.length === 1 ? 'person' : 'people' }}</span>
+      <button
+        v-if="loadPanelJudges"
+        type="button"
+        class="cpub-jedit-add"
+        :disabled="importing"
+        @click="importPanelJudges"
+      >
+        <i class="fa-solid fa-user-plus"></i> {{ importing ? 'Importing...' : 'Import panel judges' }}
+      </button>
       <button type="button" class="cpub-jedit-add" @click="addJudge"><i class="fa-solid fa-plus"></i> Add person</button>
     </div>
 
     <div class="cpub-jedit-body">
+      <p class="cpub-jedit-explain">
+        <i class="fa-solid fa-circle-info"></i>
+        These are the curated public faces (custom photos and titles). The scoring panel, who actually
+        rate entries, is managed under People. Use Import panel judges to start from that list.
+      </p>
+
       <input
         class="cpub-jedit-input cpub-jedit-heading"
         type="text"
@@ -51,13 +125,30 @@ function removeJudge(i: number): void {
         @input="setHeading(($event.target as HTMLInputElement).value)"
       />
 
+      <p v-if="importNote" class="cpub-jedit-note" role="status">{{ importNote }}</p>
+
       <div v-for="(j, i) in judges" :key="i" class="cpub-jedit-row">
         <div class="cpub-jedit-row-main">
           <input class="cpub-jedit-input" type="text" :value="j.name" placeholder="Name" :aria-label="`Person ${i + 1} name`" @input="setJudge(i, 'name', ($event.target as HTMLInputElement).value)" />
           <input class="cpub-jedit-input" type="text" :value="j.title ?? ''" placeholder="Title / affiliation" :aria-label="`Person ${i + 1} title`" @input="setJudge(i, 'title', ($event.target as HTMLInputElement).value)" />
+          <button type="button" class="cpub-jedit-iconbtn" :disabled="i === 0" :aria-label="`Move person ${i + 1} up`" @click="moveJudge(i, -1)"><i class="fa-solid fa-arrow-up"></i></button>
+          <button type="button" class="cpub-jedit-iconbtn" :disabled="i === judges.length - 1" :aria-label="`Move person ${i + 1} down`" @click="moveJudge(i, 1)"><i class="fa-solid fa-arrow-down"></i></button>
           <button type="button" class="cpub-jedit-remove" :aria-label="`Remove person ${i + 1}`" @click="removeJudge(i)"><i class="fa-solid fa-xmark"></i></button>
         </div>
-        <input class="cpub-jedit-input" type="url" :value="j.avatarUrl ?? ''" placeholder="Avatar image URL (https://…)" :aria-label="`Person ${i + 1} avatar URL`" @input="setJudge(i, 'avatarUrl', ($event.target as HTMLInputElement).value)" />
+
+        <div class="cpub-jedit-avatar-row">
+          <span class="cpub-jedit-avatar-prev">
+            <img v-if="j.avatarUrl" :src="j.avatarUrl" :alt="`${j.name || 'Judge'} photo`" />
+            <i v-else class="fa-solid fa-user"></i>
+          </span>
+          <input class="cpub-jedit-input" type="url" :value="j.avatarUrl ?? ''" placeholder="Photo URL (https://…)" :aria-label="`Person ${i + 1} photo URL`" @input="setJudge(i, 'avatarUrl', ($event.target as HTMLInputElement).value)" />
+          <label v-if="uploadHandler" class="cpub-jedit-upload" :class="{ 'cpub-jedit-upload-busy': uploadingIndex === i }">
+            <i class="fa-solid" :class="uploadingIndex === i ? 'fa-spinner fa-spin' : 'fa-arrow-up-from-bracket'"></i>
+            <span>{{ uploadingIndex === i ? 'Uploading' : 'Upload' }}</span>
+            <input type="file" accept="image/*" class="cpub-jedit-file" :aria-label="`Upload photo for person ${i + 1}`" @change="onFile(i, $event)" />
+          </label>
+        </div>
+
         <input class="cpub-jedit-input" type="url" :value="j.link ?? ''" placeholder="Profile / link (https://…, optional)" :aria-label="`Person ${i + 1} link`" @input="setJudge(i, 'link', ($event.target as HTMLInputElement).value)" />
         <textarea class="cpub-jedit-input cpub-jedit-bio" rows="2" :value="j.bio ?? ''" placeholder="Short bio (optional)" :aria-label="`Person ${i + 1} bio`" @input="setJudge(i, 'bio', ($event.target as HTMLTextAreaElement).value)" />
       </div>
@@ -71,14 +162,18 @@ function removeJudge(i: number): void {
 
 <style scoped>
 .cpub-jedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
-.cpub-jedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-jedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); flex-wrap: wrap; }
 .cpub-jedit-icon { font-size: 12px; color: var(--accent); }
 .cpub-jedit-title { font-size: 12px; font-weight: 600; }
 .cpub-jedit-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
 .cpub-jedit-add { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; background: transparent; border: var(--border-width-default) solid var(--border2); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 4px; margin-left: 8px; }
-.cpub-jedit-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+.cpub-jedit-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+.cpub-jedit-add:disabled { opacity: .5; cursor: default; }
 
 .cpub-jedit-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-jedit-explain { margin: 0; font-size: 11px; color: var(--text-faint); line-height: 1.5; display: flex; gap: 6px; }
+.cpub-jedit-explain i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
+.cpub-jedit-note { margin: 0; font-size: 11px; color: var(--accent); font-family: var(--font-mono); }
 .cpub-jedit-input { width: 100%; padding: 6px 8px; font-size: 12px; background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text); outline: none; }
 .cpub-jedit-input:focus { border-color: var(--accent); }
 .cpub-jedit-input::placeholder { color: var(--text-faint); }
@@ -86,11 +181,23 @@ function removeJudge(i: number): void {
 .cpub-jedit-bio { resize: vertical; font-family: inherit; }
 
 .cpub-jedit-row { border: var(--border-width-default) dashed var(--border2); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
-.cpub-jedit-row-main { display: flex; gap: 6px; }
+.cpub-jedit-row-main { display: flex; gap: 6px; align-items: center; }
 .cpub-jedit-row-main .cpub-jedit-input { flex: 1; }
+.cpub-jedit-iconbtn { background: none; border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 11px; width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
+.cpub-jedit-iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.cpub-jedit-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
 .cpub-jedit-remove { background: none; border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 0 8px; flex-shrink: 0; }
 .cpub-jedit-remove:hover { border-color: var(--red-border); color: var(--red); }
 
+.cpub-jedit-avatar-row { display: flex; gap: 6px; align-items: center; }
+.cpub-jedit-avatar-row .cpub-jedit-input { flex: 1; }
+.cpub-jedit-avatar-prev { width: 30px; height: 30px; flex-shrink: 0; border: var(--border-width-default) solid var(--border); background: var(--surface2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 12px; overflow: hidden; }
+.cpub-jedit-avatar-prev img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-jedit-upload { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border: var(--border-width-default) solid var(--border2); color: var(--text-dim); cursor: pointer; flex-shrink: 0; white-space: nowrap; }
+.cpub-jedit-upload:hover { border-color: var(--accent); color: var(--accent); }
+.cpub-jedit-upload-busy { opacity: .7; cursor: default; }
+.cpub-jedit-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+
 .cpub-jedit-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; border: var(--border-width-default) dashed var(--border2); }
 .cpub-jedit-empty:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
 </style>