@commonpub/layer 0.82.0 → 0.83.1

package/components/contest/ContestSubmissionField.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { ContestSubmissionTemplateField } from '@commonpub/schema';
+import { ADDRESS_SUBFIELDS, parseAddress, serializeAddress, isChecked } from '../../utils/contestSubmission';
+
+// One entrant-facing control for a submission-template field. Renders the right
+// input for the field type (text/textarea/url/email/number/select/checkbox/date/
+// agreement/address). The model is always a string (the wire shape): checkbox/
+// agreement use 'true'/''; address is JSON-encoded. Reused by the per-stage
+// artifact form AND the proposal form, so both surfaces behave identically.
+
+const props = withDefaults(defineProps<{
+  field: ContestSubmissionTemplateField;
+  /** Unique id prefix so multiple forms on a page don't collide. */
+  idPrefix?: string;
+}>(), { idPrefix: 'cpub-subfield' });
+
+const model = defineModel<string>({ default: '' });
+
+const fieldId = computed(() => `${props.idPrefix}-${props.field.key}`);
+const helpId = computed(() => (props.field.help ? `${fieldId.value}-help` : undefined));
+
+// Address: a parsed view-model re-serialized back into the string model on edit.
+const address = computed(() => parseAddress(model.value));
+function setAddressPart(key: string, value: string): void {
+  model.value = serializeAddress({ ...address.value, [key]: value });
+}
+
+const checked = computed(() => isChecked(model.value));
+function setChecked(on: boolean): void {
+  model.value = on ? 'true' : '';
+}
+</script>
+
+<template>
+  <div class="cpub-subfield">
+    <!-- Agreement: terms to read + an explicit accept checkbox. -->
+    <template v-if="field.type === 'agreement'">
+      <span :id="fieldId" class="cpub-subfield-label">
+        {{ field.label }} <span v-if="field.required || field.mustAccept !== false" class="cpub-subfield-req" aria-hidden="true">*</span>
+      </span>
+      <div v-if="field.terms" class="cpub-subfield-terms">{{ field.terms }}</div>
+      <label class="cpub-subfield-check">
+        <input
+          type="checkbox"
+          :checked="checked"
+          :aria-describedby="helpId"
+          @change="setChecked(($event.target as HTMLInputElement).checked)"
+        />
+        <span>I accept{{ field.required || field.mustAccept !== false ? ' (required)' : '' }}</span>
+      </label>
+    </template>
+
+    <!-- Checkbox: a single boolean consent / opt-in. -->
+    <template v-else-if="field.type === 'checkbox'">
+      <label class="cpub-subfield-check">
+        <input
+          :id="fieldId"
+          type="checkbox"
+          :checked="checked"
+          :aria-describedby="helpId"
+          @change="setChecked(($event.target as HTMLInputElement).checked)"
+        />
+        <span>{{ field.label }} <span v-if="field.required" class="cpub-subfield-req" aria-hidden="true">*</span></span>
+      </label>
+    </template>
+
+    <!-- Address: structured subfields, JSON-encoded into the model. -->
+    <template v-else-if="field.type === 'address'">
+      <span :id="fieldId" class="cpub-subfield-label">
+        {{ field.label }} <span v-if="field.required" class="cpub-subfield-req" aria-hidden="true">*</span>
+      </span>
+      <div class="cpub-subfield-address" role="group" :aria-labelledby="fieldId">
+        <input
+          v-for="sub in ADDRESS_SUBFIELDS"
+          :key="sub.key"
+          :value="address[sub.key] ?? ''"
+          type="text"
+          class="cpub-subfield-input"
+          :placeholder="sub.label"
+          :aria-label="`${field.label}: ${sub.label}`"
+          @input="setAddressPart(sub.key, ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </template>
+
+    <!-- Everything else: a labelled single control. -->
+    <template v-else>
+      <label class="cpub-subfield-label" :for="fieldId">
+        {{ field.label }} <span v-if="field.required" class="cpub-subfield-req" aria-hidden="true">*</span>
+        <span v-if="field.required" class="cpub-sr-only">(required)</span>
+      </label>
+      <textarea
+        v-if="field.type === 'textarea'"
+        :id="fieldId"
+        v-model="model"
+        class="cpub-subfield-input cpub-subfield-textarea"
+        rows="4"
+        maxlength="4000"
+        :aria-describedby="helpId"
+      ></textarea>
+      <select
+        v-else-if="field.type === 'select'"
+        :id="fieldId"
+        v-model="model"
+        class="cpub-subfield-input"
+        :aria-describedby="helpId"
+      >
+        <option value="" disabled>Choose…</option>
+        <option v-for="o in (field.options ?? [])" :key="o.value" :value="o.value">{{ o.label }}</option>
+      </select>
+      <input
+        v-else
+        :id="fieldId"
+        v-model="model"
+        :type="field.type === 'url' ? 'url' : field.type === 'email' ? 'email' : field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'"
+        class="cpub-subfield-input"
+        maxlength="4000"
+        :placeholder="field.type === 'url' ? 'https://' : undefined"
+        :aria-describedby="helpId"
+      />
+    </template>
+
+    <p v-if="field.help" :id="helpId" class="cpub-subfield-help">{{ field.help }}</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-subfield { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+.cpub-subfield-label { font-size: 11px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
+.cpub-subfield-req { color: var(--red); }
+.cpub-subfield-input { 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-subfield-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-subfield-textarea { resize: vertical; }
+.cpub-subfield-help { font-size: 11px; color: var(--text-faint); margin: 0; }
+.cpub-subfield-terms { max-height: 160px; overflow-y: auto; white-space: pre-wrap; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border2); background: var(--surface2); color: var(--text-dim); font-size: var(--text-sm); line-height: 1.6; }
+.cpub-subfield-check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--text); cursor: pointer; }
+.cpub-subfield-check input { margin-top: 3px; width: 15px; height: 15px; flex-shrink: 0; }
+.cpub-subfield-address { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.cpub-subfield-address .cpub-subfield-input:first-child, .cpub-subfield-address .cpub-subfield-input:nth-child(2) { grid-column: 1 / -1; }
+.cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+</style>

package/components/contest/blocks/CompareColumnsBlock.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * Edit component for the `compareColumns` block — side-by-side guidance columns
+ * (the "Encouraged / Out of scope" pattern). House block-edit contract: `content`
+ * in, `update` out, immutable list ops. Each column has a tone (color), a title,
+ * and a list of items; the block also carries an optional eyebrow, heading, and
+ * footer note. Provided via BLOCK_COMPONENTS_KEY.
+ */
+import type { CompareColumn, CompareColumnsContent, CompareTone } from '../../../types/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+const TONES: { value: CompareTone; label: string }[] = [
+  { value: 'positive', label: 'Positive (green)' },
+  { value: 'negative', label: 'Negative (red)' },
+  { value: 'neutral', label: 'Neutral (accent)' },
+];
+
+const eyebrow = computed(() => (typeof props.content.eyebrow === 'string' ? props.content.eyebrow : ''));
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading : ''));
+const note = computed(() => (typeof props.content.note === 'string' ? props.content.note : ''));
+const columns = computed<CompareColumn[]>(() => (Array.isArray(props.content.columns) ? (props.content.columns as CompareColumn[]) : []));
+
+function commit(next: Partial<CompareColumnsContent>): void {
+  emit('update', {
+    eyebrow: eyebrow.value || undefined,
+    heading: heading.value || undefined,
+    note: note.value || undefined,
+    columns: columns.value,
+    ...next,
+  });
+}
+function patchColumn(ci: number, patch: Partial<CompareColumn>): void {
+  commit({ columns: columns.value.map((c, idx) => (idx === ci ? { ...c, ...patch } : c)) });
+}
+function addColumn(): void {
+  commit({ columns: [...columns.value, { tone: 'neutral', title: '', items: [''] }] });
+}
+function removeColumn(ci: number): void {
+  commit({ columns: columns.value.filter((_, idx) => idx !== ci) });
+}
+function setItem(ci: number, ii: number, value: string): void {
+  patchColumn(ci, { items: (columns.value[ci]?.items ?? []).map((it, idx) => (idx === ii ? value : it)) });
+}
+function addItem(ci: number): void {
+  patchColumn(ci, { items: [...(columns.value[ci]?.items ?? []), ''] });
+}
+function removeItem(ci: number, ii: number): void {
+  patchColumn(ci, { items: (columns.value[ci]?.items ?? []).filter((_, idx) => idx !== ii) });
+}
+</script>
+
+<template>
+  <div class="cpub-cmpedit">
+    <div class="cpub-cmpedit-header">
+      <div class="cpub-cmpedit-icon"><i class="fa-solid fa-table-columns"></i></div>
+      <span class="cpub-cmpedit-title">Compare Columns</span>
+      <span class="cpub-cmpedit-count">{{ columns.length }} {{ columns.length === 1 ? 'column' : 'columns' }}</span>
+      <button type="button" class="cpub-cmpedit-add" @click="addColumn"><i class="fa-solid fa-plus"></i> Add column</button>
+    </div>
+
+    <div class="cpub-cmpedit-body">
+      <input class="cpub-cmpedit-input" type="text" :value="eyebrow" placeholder="Eyebrow label (optional), e.g. What is in scope" aria-label="Eyebrow label" @input="commit({ eyebrow: ($event.target as HTMLInputElement).value || undefined })" />
+      <input class="cpub-cmpedit-input cpub-cmpedit-heading" type="text" :value="heading" placeholder="Heading (optional), e.g. Build to help, not to harm" aria-label="Heading" @input="commit({ heading: ($event.target as HTMLInputElement).value || undefined })" />
+
+      <div class="cpub-cmpedit-cols">
+        <div v-for="(c, ci) in columns" :key="ci" class="cpub-cmpedit-col" :class="`cpub-cmpedit-${c.tone}`">
+          <div class="cpub-cmpedit-col-head">
+            <input class="cpub-cmpedit-input cpub-cmpedit-coltitle" type="text" :value="c.title" placeholder="Column title" :aria-label="`Column ${ci + 1} title`" @input="patchColumn(ci, { title: ($event.target as HTMLInputElement).value })" />
+            <select class="cpub-cmpedit-input cpub-cmpedit-tone" :value="c.tone" :aria-label="`Column ${ci + 1} tone`" @change="patchColumn(ci, { tone: ($event.target as HTMLSelectElement).value as CompareTone })">
+              <option v-for="t in TONES" :key="t.value" :value="t.value">{{ t.label }}</option>
+            </select>
+            <button type="button" class="cpub-cmpedit-remove" :aria-label="`Remove column ${ci + 1}`" @click="removeColumn(ci)"><i class="fa-solid fa-xmark"></i></button>
+          </div>
+          <div v-for="(item, ii) in c.items" :key="ii" class="cpub-cmpedit-itemrow">
+            <input class="cpub-cmpedit-input" type="text" :value="item" placeholder="Item" :aria-label="`Column ${ci + 1} item ${ii + 1}`" @input="setItem(ci, ii, ($event.target as HTMLInputElement).value)" />
+            <button type="button" class="cpub-cmpedit-itemremove" :aria-label="`Remove item ${ii + 1} from column ${ci + 1}`" @click="removeItem(ci, ii)"><i class="fa-solid fa-xmark"></i></button>
+          </div>
+          <button type="button" class="cpub-cmpedit-itemadd" @click="addItem(ci)"><i class="fa-solid fa-plus"></i> Add item</button>
+        </div>
+      </div>
+
+      <div v-if="!columns.length" class="cpub-cmpedit-empty" @click="addColumn"><i class="fa-solid fa-plus"></i> Add the first column</div>
+
+      <input class="cpub-cmpedit-input" type="text" :value="note" placeholder="Footer note (optional)" aria-label="Footer note" @input="commit({ note: ($event.target as HTMLInputElement).value || undefined })" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-cmpedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-cmpedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-cmpedit-icon { font-size: 12px; color: var(--accent); }
+.cpub-cmpedit-title { font-size: 12px; font-weight: 600; }
+.cpub-cmpedit-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+.cpub-cmpedit-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-cmpedit-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+
+.cpub-cmpedit-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-cmpedit-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-cmpedit-input:focus { border-color: var(--accent); }
+.cpub-cmpedit-input::placeholder { color: var(--text-faint); }
+.cpub-cmpedit-heading { font-weight: 600; }
+
+.cpub-cmpedit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.cpub-cmpedit-col { border: var(--border-width-default) solid var(--border2); border-left-width: 3px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
+.cpub-cmpedit-positive { border-left-color: var(--green); }
+.cpub-cmpedit-negative { border-left-color: var(--red); }
+.cpub-cmpedit-neutral { border-left-color: var(--accent); }
+.cpub-cmpedit-col-head { display: flex; gap: 6px; }
+.cpub-cmpedit-coltitle { flex: 1; font-weight: 600; }
+.cpub-cmpedit-tone { width: 130px; flex-shrink: 0; }
+.cpub-cmpedit-itemrow { display: flex; gap: 6px; }
+.cpub-cmpedit-itemrow .cpub-cmpedit-input { flex: 1; }
+.cpub-cmpedit-remove,
+.cpub-cmpedit-itemremove { 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-cmpedit-remove:hover,
+.cpub-cmpedit-itemremove:hover { border-color: var(--red-border); color: var(--red); }
+.cpub-cmpedit-itemadd { align-self: flex-start; 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; }
+.cpub-cmpedit-itemadd:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+
+.cpub-cmpedit-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; border: var(--border-width-default) dashed var(--border2); }
+.cpub-cmpedit-empty:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+
+@media (max-width: 640px) { .cpub-cmpedit-cols { grid-template-columns: 1fr; } }
+</style>

package/components/contest/blocks/ContestTabPanel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * One editable tab panel for the `tabs` block: a nested BlockCanvas over its own
+ * useBlockEditor, seeded from the panel's BlockTuple[]. Emits the panel's blocks
+ * up on every change (watching a getter of .value so structural inserts are caught
+ * — a bare readonly-ref watch misses push/splice). Mounted one-at-a-time by the
+ * parent (keyed by tab) so each tab gets a clean editor; the parent's content is
+ * the source of truth across tab switches. Inherits BLOCK_COMPONENTS_KEY +
+ * UPLOAD_HANDLER_KEY from the contest editor, so table/criteriaBar/html/image all
+ * edit here too. The `groups` passed in exclude container blocks (no tabs-in-tabs).
+ */
+import { BlockCanvas, useBlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
+import type { BlockTuple } from '@commonpub/editor';
+
+const props = defineProps<{
+  blocks: BlockTuple[];
+  groups: BlockTypeGroup[];
+}>();
+const emit = defineEmits<{ 'update:blocks': [blocks: BlockTuple[]] }>();
+
+const editor = useBlockEditor(Array.isArray(props.blocks) ? props.blocks : []);
+watch(() => editor.blocks.value, () => emit('update:blocks', editor.toBlockTuples()), { deep: true });
+</script>
+
+<template>
+  <BlockCanvas :block-editor="editor" :block-types="groups" />
+</template>

package/components/contest/blocks/CriteriaBarBlock.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+/**
+ * Edit component for the `criteriaBar` block — judging criteria as one stacked
+ * weighted bar. Rows of {label, weight, color}, an optional heading, a legend
+ * toggle, and a live preview of the bar. House block-edit contract: `content`
+ * in, `update` out. Provided via BLOCK_COMPONENTS_KEY.
+ */
+import { inject } from 'vue';
+import { CRITERIA_BAR_PALETTE, CONTEST_RUBRIC_KEY, criteriaBar, type CriteriaBarItem } from '../../../utils/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+// The contest editor provides its live judging rubric; offer a one-click fill.
+const rubric = inject(CONTEST_RUBRIC_KEY, null);
+const canUseRubric = computed(() => !!rubric?.value?.some((c) => (c.label ?? '').trim()));
+
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading : ''));
+const items = computed<CriteriaBarItem[]>(() => (Array.isArray(props.content.items) ? (props.content.items as CriteriaBarItem[]) : []));
+const showLegend = computed(() => props.content.showLegend !== false);
+const preview = computed(() => criteriaBar(items.value));
+
+function commit(next: Partial<{ heading: string; items: CriteriaBarItem[]; showLegend: boolean }>): void {
+  emit('update', { heading: heading.value || undefined, items: items.value, showLegend: showLegend.value, ...next });
+}
+function addItem(): void {
+  commit({ items: [...items.value, { label: '', weight: 10, color: CRITERIA_BAR_PALETTE[items.value.length % CRITERIA_BAR_PALETTE.length]! }] });
+}
+function setItem(i: number, field: keyof CriteriaBarItem, value: string | number): void {
+  commit({ items: items.value.map((it, idx) => (idx === i ? { ...it, [field]: value } : it)) });
+}
+function removeItem(i: number): void {
+  commit({ items: items.value.filter((_, idx) => idx !== i) });
+}
+function useRubric(): void {
+  const src = (rubric?.value ?? []).filter((c) => (c.label ?? '').trim());
+  commit({ items: src.map((c, i) => ({ label: c.label.trim(), weight: Number(c.weight) || 0, color: CRITERIA_BAR_PALETTE[i % CRITERIA_BAR_PALETTE.length]! })) });
+}
+</script>
+
+<template>
+  <div class="cpub-cbedit">
+    <div class="cpub-cbedit-header">
+      <div class="cpub-cbedit-icon"><i class="fa-solid fa-chart-simple"></i></div>
+      <span class="cpub-cbedit-title">Criteria Bar</span>
+      <span class="cpub-cbedit-total">{{ preview.total }} total</span>
+      <button v-if="canUseRubric" type="button" class="cpub-cbedit-add" title="Fill from this contest's judging rubric" @click="useRubric"><i class="fa-solid fa-wand-magic-sparkles"></i> Use rubric</button>
+      <button type="button" class="cpub-cbedit-add" @click="addItem"><i class="fa-solid fa-plus"></i> Add criterion</button>
+    </div>
+
+    <div class="cpub-cbedit-body">
+      <input
+        class="cpub-cbedit-input cpub-cbedit-heading"
+        type="text"
+        :value="heading"
+        placeholder="Heading (optional), e.g. Final evaluation"
+        aria-label="Criteria bar heading"
+        @input="commit({ heading: ($event.target as HTMLInputElement).value || undefined })"
+      />
+
+      <!-- Live preview (the real shared bar — WYSIWYG) -->
+      <div v-if="preview.rows.length" class="cpub-cbedit-preview">
+        <CpubCriteriaBar :items="items" :show-legend="showLegend" />
+      </div>
+
+      <div v-for="(it, i) in items" :key="i" class="cpub-cbedit-row">
+        <input class="cpub-cbedit-input cpub-cbedit-label" type="text" :value="it.label" placeholder="Criterion (e.g. Innovation)" :aria-label="`Criterion ${i + 1} label`" @input="setItem(i, 'label', ($event.target as HTMLInputElement).value)" />
+        <input class="cpub-cbedit-input cpub-cbedit-weight" type="number" min="0" :value="it.weight" :aria-label="`Criterion ${i + 1} weight`" @input="setItem(i, 'weight', Number(($event.target as HTMLInputElement).value))" />
+        <div class="cpub-cbedit-colors" role="group" :aria-label="`Criterion ${i + 1} color`">
+          <button
+            v-for="c in CRITERIA_BAR_PALETTE"
+            :key="c"
+            type="button"
+            class="cpub-cbedit-swatch"
+            :class="{ 'cpub-cbedit-swatch-on': (it.color || '') === c }"
+            :style="{ background: `var(--${c})` }"
+            :title="c"
+            :aria-label="`Use ${c}`"
+            :aria-pressed="(it.color || '') === c"
+            @click="setItem(i, 'color', c)"
+          ></button>
+        </div>
+        <button type="button" class="cpub-cbedit-remove" :aria-label="`Remove criterion ${i + 1}`" @click="removeItem(i)"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+
+      <div v-if="!items.length" class="cpub-cbedit-empty" @click="addItem"><i class="fa-solid fa-plus"></i> Add the first criterion</div>
+
+      <label class="cpub-cbedit-check"><input type="checkbox" :checked="showLegend" @change="commit({ showLegend: ($event.target as HTMLInputElement).checked })" /> <span>Show color legend</span></label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-cbedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-cbedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-cbedit-icon { font-size: 12px; color: var(--accent); }
+.cpub-cbedit-title { font-size: 12px; font-weight: 600; }
+.cpub-cbedit-total { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+.cpub-cbedit-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-cbedit-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+.cpub-cbedit-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-cbedit-input { padding: 6px 8px; font-size: 12px; background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text); outline: none; }
+.cpub-cbedit-input:focus { border-color: var(--accent); }
+.cpub-cbedit-input::placeholder { color: var(--text-faint); }
+.cpub-cbedit-heading { width: 100%; font-weight: 600; }
+.cpub-cbedit-preview { padding: 6px 0 2px; }
+.cpub-cbedit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.cpub-cbedit-label { flex: 1; min-width: 140px; }
+.cpub-cbedit-weight { width: 70px; }
+.cpub-cbedit-colors { display: inline-flex; gap: 3px; }
+.cpub-cbedit-swatch { width: 18px; height: 18px; border: var(--border-width-default) solid var(--border2); cursor: pointer; padding: 0; }
+.cpub-cbedit-swatch-on { outline: 2px solid var(--text); outline-offset: 1px; }
+.cpub-cbedit-remove { background: none; border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 4px 8px; }
+.cpub-cbedit-remove:hover { border-color: var(--red-border); color: var(--red); }
+.cpub-cbedit-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; border: var(--border-width-default) dashed var(--border2); }
+.cpub-cbedit-empty:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+.cpub-cbedit-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
+</style>

package/components/contest/blocks/HtmlBlock.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * Edit component for the `html` block — a raw HTML snippet usable in any contest
+ * body. A monospace textarea plus a live sanitized preview (the same rich-HTML
+ * sanitizer + color neutralization the view uses), so the author sees exactly what
+ * will render and that scripts/event handlers are stripped. House block-edit
+ * contract: `content` in, `update` out. Provided via BLOCK_COMPONENTS_KEY.
+ */
+import { sanitizeRichHtml } from '../../../composables/useSanitize';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+const html = computed(() => (typeof props.content.html === 'string' ? props.content.html : ''));
+const safePreview = computed(() => sanitizeRichHtml(html.value, { neutralizeColors: true }));
+
+function setHtml(v: string): void {
+  emit('update', { html: v });
+}
+</script>
+
+<template>
+  <div class="cpub-htmledit">
+    <div class="cpub-htmledit-header">
+      <div class="cpub-htmledit-icon"><i class="fa-solid fa-code"></i></div>
+      <span class="cpub-htmledit-title">HTML</span>
+      <span class="cpub-htmledit-note">Scripts &amp; event handlers are stripped on render.</span>
+    </div>
+    <textarea
+      class="cpub-htmledit-input"
+      :value="html"
+      rows="6"
+      spellcheck="false"
+      placeholder="<p>Paste or write raw HTML…</p>"
+      aria-label="Raw HTML"
+      @input="setHtml(($event.target as HTMLTextAreaElement).value)"
+    />
+    <div v-if="safePreview" class="cpub-htmledit-preview">
+      <span class="cpub-htmledit-preview-label">Preview</span>
+      <!-- eslint-disable-next-line vue/no-v-html — sanitizeRichHtml is the XSS barrier -->
+      <div class="cpub-md-html" v-html="safePreview" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-htmledit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-htmledit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-htmledit-icon { font-size: 12px; color: var(--accent); }
+.cpub-htmledit-title { font-size: 12px; font-weight: 600; }
+.cpub-htmledit-note { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+.cpub-htmledit-input {
+  width: 100%; padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
+  background: var(--surface); border: none; color: var(--text); outline: none; resize: vertical;
+  white-space: pre; tab-size: 2;
+}
+.cpub-htmledit-input:focus { background: var(--surface2); }
+.cpub-htmledit-input::placeholder { color: var(--text-faint); }
+.cpub-htmledit-preview { border-top: var(--border-width-default) solid var(--border2); padding: 12px 14px; }
+.cpub-htmledit-preview-label { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
+</style>

package/components/contest/blocks/JudgesShowcaseBlock.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/**
+ * 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>.
+ */
+import type { JudgeShowcaseEntry, JudgesShowcaseContent } from '../../../types/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+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[]) : [],
+);
+
+function commit(next: Partial<JudgesShowcaseContent>): void {
+  emit('update', { heading: heading.value || undefined, judges: judges.value, ...next });
+}
+function setHeading(v: string): void {
+  commit({ heading: v || undefined });
+}
+function addJudge(): void {
+  commit({ judges: [...judges.value, { name: '' }] });
+}
+function setJudge(i: number, field: keyof JudgeShowcaseEntry, v: string): void {
+  commit({ judges: judges.value.map((j, idx) => (idx === i ? { ...j, [field]: v || undefined } : j)) });
+}
+function removeJudge(i: number): void {
+  commit({ judges: judges.value.filter((_, idx) => idx !== i) });
+}
+</script>
+
+<template>
+  <div class="cpub-jedit">
+    <div class="cpub-jedit-header">
+      <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 type="button" class="cpub-jedit-add" @click="addJudge"><i class="fa-solid fa-plus"></i> Add person</button>
+    </div>
+
+    <div class="cpub-jedit-body">
+      <input
+        class="cpub-jedit-input cpub-jedit-heading"
+        type="text"
+        :value="heading"
+        placeholder="Section heading (optional), e.g. Meet the Judges"
+        aria-label="Showcase heading"
+        @input="setHeading(($event.target as HTMLInputElement).value)"
+      />
+
+      <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-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)" />
+        <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>
+
+      <div v-if="!judges.length" class="cpub-jedit-empty" @click="addJudge">
+        <i class="fa-solid fa-plus"></i> Add the first judge or mentor
+      </div>
+    </div>
+  </div>
+</template>
+
+<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-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-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
+.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); }
+.cpub-jedit-heading { font-weight: 600; }
+.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 .cpub-jedit-input { flex: 1; }
+.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-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>