@commonpub/layer 0.81.0 → 0.83.0

package/components/contest/ContestStakeholderManager.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ContestStakeholderItem } from '@commonpub/server';
+import type { StakeholderRole } from '@commonpub/schema';
 
 const props = defineProps<{ contestSlug: string }>();
 
@@ -12,17 +13,22 @@ const searchQuery = ref('');
 const searchResults = ref<Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>>([]);
 const searching = ref(false);
 const adding = ref(false);
+// Role applied to the next person added.
+const addRole = ref<StakeholderRole>('reviewer');
 let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
+const roleLabel = (r: StakeholderRole): string => (r === 'editor' ? 'Editor' : 'Reviewer');
+
 function handleSearch(): void {
   if (searchTimeout) clearTimeout(searchTimeout);
   if (!searchQuery.value || searchQuery.value.length < 2) { searchResults.value = []; return; }
   searchTimeout = setTimeout(async () => {
     searching.value = true;
     try {
-      const data = await ($fetch as Function)('/api/admin/users', { query: { search: searchQuery.value, limit: 8 } }) as { items: Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }> };
+      // Contest-scoped, non-admin user search (public fields only).
+      const data = await ($fetch as Function)(`/api/contests/${props.contestSlug}/user-search`, { query: { q: searchQuery.value, limit: 8 } }) as Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>;
       const existing = new Set((stakeholders.value ?? []).map((s) => s.userId));
-      searchResults.value = data.items.filter((u) => !existing.has(u.id));
+      searchResults.value = data.filter((u) => !existing.has(u.id));
     } catch {
       searchResults.value = [];
     } finally {
@@ -31,36 +37,46 @@ function handleSearch(): void {
   }, 300);
 }
 
-async function addStakeholder(userId: string): Promise<void> {
+async function grant(userId: string, role: StakeholderRole): Promise<void> {
   adding.value = true;
   try {
-    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId } });
-    toast.success('Reviewer added');
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId, role } });
+    toast.success(`${roleLabel(role)} added`);
     searchQuery.value = '';
     searchResults.value = [];
     await refresh();
   } catch {
-    toast.error('Failed to add reviewer');
+    toast.error(`Failed to add ${roleLabel(role).toLowerCase()}`);
   } finally {
     adding.value = false;
   }
 }
 
+async function changeRole(userId: string, role: StakeholderRole): Promise<void> {
+  try {
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId, role } });
+    toast.success(`Role changed to ${roleLabel(role)}`);
+    await refresh();
+  } catch {
+    toast.error('Failed to change role');
+  }
+}
+
 async function removeStakeholder(userId: string): Promise<void> {
-  if (!confirm('Remove this reviewer’s access?')) return;
+  if (!confirm('Remove this person’s access to the contest?')) return;
   try {
     await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders/${userId}`, { method: 'DELETE' });
-    toast.success('Reviewer removed');
+    toast.success('Access removed');
     await refresh();
   } catch {
-    toast.error('Failed to remove reviewer');
+    toast.error('Failed to remove access');
   }
 }
 </script>
 
 <template>
   <div class="cpub-sh">
-    <p class="cpub-sh-hint">Reviewers can view this contest (even while private/unpublished) but can't edit it or judge.</p>
+    <p class="cpub-sh-hint">Reviewers can view this contest (even while private/unpublished) but can't edit or judge. Editors can fully edit this contest. Neither gets any access to the rest of the site.</p>
     <div v-if="stakeholders?.length" class="cpub-sh-list">
       <div v-for="s in stakeholders" :key="s.id" class="cpub-sh-row">
         <NuxtLink :to="`/u/${s.userUsername}`" class="cpub-sh-link">
@@ -70,23 +86,38 @@ async function removeStakeholder(userId: string): Promise<void> {
           </span>
           <span class="cpub-sh-name">{{ s.userName }}</span>
         </NuxtLink>
+        <select
+          class="cpub-sh-role"
+          :value="s.role"
+          :aria-label="`Role for ${s.userName}`"
+          @change="changeRole(s.userId, ($event.target as HTMLSelectElement).value as StakeholderRole)"
+        >
+          <option value="reviewer">Reviewer</option>
+          <option value="editor">Editor</option>
+        </select>
         <button class="cpub-sh-remove" :aria-label="`Remove ${s.userName}`" @click="removeStakeholder(s.userId)">
           <i class="fa-solid fa-xmark"></i>
         </button>
       </div>
     </div>
-    <p v-else class="cpub-sh-empty">No reviewers yet.</p>
+    <p v-else class="cpub-sh-empty">No collaborators yet.</p>
 
     <div class="cpub-sh-search">
-      <input
-        v-model="searchQuery"
-        class="cpub-sh-input"
-        placeholder="Search users by name or username..."
-        aria-label="Search users to add as reviewers"
-        @input="handleSearch"
-      />
+      <div class="cpub-sh-search-row">
+        <input
+          v-model="searchQuery"
+          class="cpub-sh-input"
+          placeholder="Search users by name or username..."
+          aria-label="Search users to add as a collaborator"
+          @input="handleSearch"
+        />
+        <select v-model="addRole" class="cpub-sh-role" aria-label="Role to grant">
+          <option value="reviewer">Reviewer</option>
+          <option value="editor">Editor</option>
+        </select>
+      </div>
       <div v-if="searchResults.length" class="cpub-sh-dropdown">
-        <button v-for="u in searchResults" :key="u.id" class="cpub-sh-option" :disabled="adding" @click="addStakeholder(u.id)">
+        <button v-for="u in searchResults" :key="u.id" class="cpub-sh-option" :disabled="adding" @click="grant(u.id, addRole)">
           <span class="cpub-sh-av cpub-sh-av-sm">
             <img v-if="u.avatarUrl" :src="u.avatarUrl" :alt="u.displayName || u.username" />
             <span v-else>{{ (u.displayName || u.username).charAt(0) }}</span>
@@ -110,11 +141,14 @@ async function removeStakeholder(userId: string): Promise<void> {
 .cpub-sh-av img { width: 100%; height: 100%; object-fit: cover; }
 .cpub-sh-av-sm { width: 20px; height: 20px; font-size: 8px; }
 .cpub-sh-name { font-size: 12px; font-weight: 600; }
+.cpub-sh-role { font-size: 11px; padding: 4px 6px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; flex-shrink: 0; }
+.cpub-sh-role:focus { border-color: var(--accent); }
 .cpub-sh-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 6px; min-height: 28px; }
 .cpub-sh-remove:hover { color: var(--red); }
 .cpub-sh-empty { font-size: 12px; color: var(--text-faint); font-style: italic; margin-bottom: 12px; }
 .cpub-sh-search { position: relative; }
-.cpub-sh-input { font-size: 12px; padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; width: 100%; }
+.cpub-sh-search-row { display: flex; gap: 8px; }
+.cpub-sh-input { font-size: 12px; padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; flex: 1; min-width: 0; }
 .cpub-sh-input:focus { border-color: var(--accent); }
 .cpub-sh-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); margin-top: 2px; max-height: 200px; overflow-y: auto; }
 .cpub-sh-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: none; border: none; width: 100%; text-align: left; cursor: pointer; }

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>