@commonpub/layer 0.82.0 → 0.83.0

package/components/contest/blocks/RoadmapBlock.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * Edit component for the `roadmap` block — a schedule timeline. House block-edit
+ * contract: `content` in, `update` out, immutable list ops. The contest editor
+ * provides a roadmap derived from the live stages/schedule under CONTEST_SCHEDULE_KEY,
+ * so this offers a one-click "Pull from schedule" seed; from there each milestone
+ * (date, title, blurb, badge, tone) is freely edited and reordered. Provided via
+ * BLOCK_COMPONENTS_KEY.
+ */
+import { inject } from 'vue';
+import { CONTEST_SCHEDULE_KEY } from '../../../utils/contestBlocks';
+import type { RoadmapItem, RoadmapContent, RoadmapTone } from '../../../types/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+const TONES: { value: RoadmapTone; label: string }[] = [
+  { value: 'default', label: 'Default' },
+  { value: 'accent', label: 'Accent' },
+  { value: 'highlight', label: 'Highlight' },
+];
+
+// The contest editor's live schedule (custom stages, else the core flow).
+const schedule = inject(CONTEST_SCHEDULE_KEY, null);
+const canPull = computed(() => !!schedule?.value?.length);
+
+const eyebrow = computed(() => (typeof props.content.eyebrow === 'string' ? props.content.eyebrow : ''));
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading : ''));
+const items = computed<RoadmapItem[]>(() => (Array.isArray(props.content.items) ? (props.content.items as RoadmapItem[]) : []));
+
+function commit(next: Partial<RoadmapContent>): void {
+  emit('update', { eyebrow: eyebrow.value || undefined, heading: heading.value || undefined, items: items.value, ...next });
+}
+function addItem(): void {
+  commit({ items: [...items.value, { title: '', tone: 'default' }] });
+}
+function setItem(i: number, field: keyof RoadmapItem, value: string): void {
+  commit({ items: items.value.map((it, idx) => (idx === i ? { ...it, [field]: value || undefined } : it)) });
+}
+function removeItem(i: number): void {
+  commit({ items: items.value.filter((_, idx) => idx !== i) });
+}
+function move(i: number, dir: -1 | 1): void {
+  const j = i + dir;
+  if (j < 0 || j >= items.value.length) return;
+  const next = [...items.value];
+  [next[i], next[j]] = [next[j]!, next[i]!];
+  commit({ items: next });
+}
+function pullFromSchedule(): void {
+  commit({ items: (schedule?.value ?? []).map((it) => ({ ...it })) });
+}
+</script>
+
+<template>
+  <div class="cpub-rmedit">
+    <div class="cpub-rmedit-header">
+      <div class="cpub-rmedit-icon"><i class="fa-solid fa-timeline"></i></div>
+      <span class="cpub-rmedit-title">Roadmap</span>
+      <span class="cpub-rmedit-count">{{ items.length }} {{ items.length === 1 ? 'milestone' : 'milestones' }}</span>
+      <button v-if="canPull" type="button" class="cpub-rmedit-add" title="Seed from this contest's stages / schedule" @click="pullFromSchedule"><i class="fa-solid fa-wand-magic-sparkles"></i> Pull from schedule</button>
+      <button type="button" class="cpub-rmedit-add" @click="addItem"><i class="fa-solid fa-plus"></i> Add milestone</button>
+    </div>
+
+    <div class="cpub-rmedit-body">
+      <input class="cpub-rmedit-input" type="text" :value="eyebrow" placeholder="Eyebrow (optional), e.g. Key dates, 2026" aria-label="Roadmap eyebrow" @input="commit({ eyebrow: ($event.target as HTMLInputElement).value || undefined })" />
+      <input class="cpub-rmedit-input cpub-rmedit-heading" type="text" :value="heading" placeholder="Heading (optional), e.g. The 18-week roadmap" aria-label="Roadmap heading" @input="commit({ heading: ($event.target as HTMLInputElement).value || undefined })" />
+
+      <div v-for="(it, i) in items" :key="i" class="cpub-rmedit-row" :class="`cpub-rmedit-${it.tone ?? 'default'}`">
+        <div class="cpub-rmedit-rowtop">
+          <input class="cpub-rmedit-input cpub-rmedit-date" type="text" :value="it.date ?? ''" placeholder="Date, e.g. Jun 30" :aria-label="`Milestone ${i + 1} date`" @input="setItem(i, 'date', ($event.target as HTMLInputElement).value)" />
+          <input class="cpub-rmedit-input cpub-rmedit-badge" type="text" :value="it.badge ?? ''" placeholder="Badge (optional)" :aria-label="`Milestone ${i + 1} badge`" @input="setItem(i, 'badge', ($event.target as HTMLInputElement).value)" />
+          <select class="cpub-rmedit-input cpub-rmedit-tone" :value="it.tone ?? 'default'" :aria-label="`Milestone ${i + 1} style`" @change="setItem(i, 'tone', ($event.target as HTMLSelectElement).value)">
+            <option v-for="t in TONES" :key="t.value" :value="t.value">{{ t.label }}</option>
+          </select>
+          <div class="cpub-rmedit-moves">
+            <button type="button" class="cpub-rmedit-move" :disabled="i === 0" :aria-label="`Move milestone ${i + 1} up`" @click="move(i, -1)"><i class="fa-solid fa-chevron-up"></i></button>
+            <button type="button" class="cpub-rmedit-move" :disabled="i === items.length - 1" :aria-label="`Move milestone ${i + 1} down`" @click="move(i, 1)"><i class="fa-solid fa-chevron-down"></i></button>
+          </div>
+          <button type="button" class="cpub-rmedit-remove" :aria-label="`Remove milestone ${i + 1}`" @click="removeItem(i)"><i class="fa-solid fa-xmark"></i></button>
+        </div>
+        <input class="cpub-rmedit-input" type="text" :value="it.title" placeholder="Title" :aria-label="`Milestone ${i + 1} title`" @input="setItem(i, 'title', ($event.target as HTMLInputElement).value)" />
+        <textarea class="cpub-rmedit-input cpub-rmedit-desc" rows="2" :value="it.description ?? ''" placeholder="Description (optional)" :aria-label="`Milestone ${i + 1} description`" @input="setItem(i, 'description', ($event.target as HTMLTextAreaElement).value)" />
+      </div>
+
+      <div v-if="!items.length" class="cpub-rmedit-empty" @click="canPull ? pullFromSchedule() : addItem()">
+        <i class="fa-solid fa-plus"></i> {{ canPull ? 'Pull milestones from the schedule' : 'Add the first milestone' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-rmedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-rmedit-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-rmedit-icon { font-size: 12px; color: var(--accent); }
+.cpub-rmedit-title { font-size: 12px; font-weight: 600; }
+.cpub-rmedit-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+.cpub-rmedit-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; }
+.cpub-rmedit-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+
+.cpub-rmedit-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-rmedit-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-rmedit-input:focus { border-color: var(--accent); }
+.cpub-rmedit-input::placeholder { color: var(--text-faint); }
+.cpub-rmedit-heading { font-weight: 600; }
+.cpub-rmedit-desc { resize: vertical; font-family: inherit; }
+
+.cpub-rmedit-row { border: var(--border-width-default) solid var(--border2); border-left-width: 3px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
+.cpub-rmedit-default { border-left-color: var(--border2); }
+.cpub-rmedit-accent { border-left-color: var(--accent); }
+.cpub-rmedit-highlight { border-left-color: var(--yellow); }
+.cpub-rmedit-rowtop { display: flex; gap: 6px; align-items: center; }
+.cpub-rmedit-date { width: 110px; flex-shrink: 0; }
+.cpub-rmedit-badge { flex: 1; min-width: 0; }
+.cpub-rmedit-tone { width: 100px; flex-shrink: 0; }
+.cpub-rmedit-moves { display: inline-flex; flex-shrink: 0; }
+.cpub-rmedit-move { background: none; border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 9px; padding: 0 6px; }
+.cpub-rmedit-move:first-child { border-right: 0; }
+.cpub-rmedit-move:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.cpub-rmedit-move:disabled { opacity: 0.4; cursor: not-allowed; }
+.cpub-rmedit-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-rmedit-remove:hover { border-color: var(--red-border); color: var(--red); }
+
+.cpub-rmedit-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; border: var(--border-width-default) dashed var(--border2); }
+.cpub-rmedit-empty:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+</style>

package/components/contest/blocks/SponsorsBlock.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * Edit component for the `sponsors` block — a logo wall. House block-edit contract:
+ * `content` in, `update` out, immutable list ops. Each logo can be uploaded (via
+ * the contest editor's UPLOAD_HANDLER_KEY) or pasted as a URL, with an alt name,
+ * an optional outbound link, and an optional tier label. Provided via
+ * BLOCK_COMPONENTS_KEY.
+ */
+import { inject, ref } from 'vue';
+import { UPLOAD_HANDLER_KEY } from '@commonpub/editor/vue';
+import type { SponsorLogo, SponsorsContent } 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 uploadingIndex = ref<number | null>(null);
+
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading : ''));
+const logos = computed<SponsorLogo[]>(() => (Array.isArray(props.content.logos) ? (props.content.logos as SponsorLogo[]) : []));
+
+function commit(next: Partial<SponsorsContent>): void {
+  emit('update', { heading: heading.value || undefined, logos: logos.value, ...next });
+}
+function addLogo(): void {
+  commit({ logos: [...logos.value, { src: '', alt: '' }] });
+}
+function setLogo(i: number, field: keyof SponsorLogo, value: string): void {
+  commit({ logos: logos.value.map((l, idx) => (idx === i ? { ...l, [field]: value } : l)) });
+}
+function removeLogo(i: number): void {
+  commit({ logos: logos.value.filter((_, idx) => idx !== i) });
+}
+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);
+    setLogo(i, 'src', res.url);
+  } finally {
+    uploadingIndex.value = null;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-spedit">
+    <div class="cpub-spedit-header">
+      <div class="cpub-spedit-icon"><i class="fa-solid fa-handshake-angle"></i></div>
+      <span class="cpub-spedit-title">Sponsors</span>
+      <span class="cpub-spedit-count">{{ logos.length }} {{ logos.length === 1 ? 'logo' : 'logos' }}</span>
+      <button type="button" class="cpub-spedit-add" @click="addLogo"><i class="fa-solid fa-plus"></i> Add logo</button>
+    </div>
+
+    <div class="cpub-spedit-body">
+      <input
+        class="cpub-spedit-input cpub-spedit-heading"
+        type="text"
+        :value="heading"
+        placeholder="Eyebrow heading (optional), e.g. Sponsors"
+        aria-label="Sponsors heading"
+        @input="commit({ heading: ($event.target as HTMLInputElement).value || undefined })"
+      />
+
+      <div v-for="(l, i) in logos" :key="i" class="cpub-spedit-row">
+        <div class="cpub-spedit-thumb" :class="{ 'is-empty': !l.src }">
+          <img v-if="l.src" :src="l.src" :alt="l.alt || 'Sponsor logo'" />
+          <i v-else class="fa-regular fa-image"></i>
+        </div>
+        <div class="cpub-spedit-fields">
+          <div class="cpub-spedit-srcrow">
+            <input class="cpub-spedit-input" type="url" :value="l.src" placeholder="Logo image URL (https://…)" :aria-label="`Logo ${i + 1} image URL`" @input="setLogo(i, 'src', ($event.target as HTMLInputElement).value)" />
+            <label v-if="uploadHandler" class="cpub-spedit-upload" :title="`Upload logo ${i + 1}`">
+              <i class="fa-solid" :class="uploadingIndex === i ? 'fa-circle-notch fa-spin' : 'fa-arrow-up-from-bracket'"></i>
+              <input type="file" accept="image/*" class="cpub-sr-only" :aria-label="`Upload logo ${i + 1}`" @change="onFile(i, $event)" />
+            </label>
+          </div>
+          <div class="cpub-spedit-metarow">
+            <input class="cpub-spedit-input" type="text" :value="l.alt" placeholder="Name (alt text)" :aria-label="`Logo ${i + 1} name`" @input="setLogo(i, 'alt', ($event.target as HTMLInputElement).value)" />
+            <input class="cpub-spedit-input" type="text" :value="l.tier ?? ''" placeholder="Tier (optional)" :aria-label="`Logo ${i + 1} tier`" @input="setLogo(i, 'tier', ($event.target as HTMLInputElement).value)" />
+          </div>
+          <input class="cpub-spedit-input" type="url" :value="l.url ?? ''" placeholder="Link (https://…, optional)" :aria-label="`Logo ${i + 1} link`" @input="setLogo(i, 'url', ($event.target as HTMLInputElement).value)" />
+        </div>
+        <button type="button" class="cpub-spedit-remove" :aria-label="`Remove logo ${i + 1}`" @click="removeLogo(i)"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+
+      <div v-if="!logos.length" class="cpub-spedit-empty" @click="addLogo"><i class="fa-solid fa-plus"></i> Add the first sponsor logo</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-spedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-spedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-spedit-icon { font-size: 12px; color: var(--accent); }
+.cpub-spedit-title { font-size: 12px; font-weight: 600; }
+.cpub-spedit-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+.cpub-spedit-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-spedit-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+
+.cpub-spedit-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-spedit-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-spedit-input:focus { border-color: var(--accent); }
+.cpub-spedit-input::placeholder { color: var(--text-faint); }
+.cpub-spedit-heading { font-weight: 600; }
+
+.cpub-spedit-row { display: flex; gap: 8px; align-items: flex-start; border: var(--border-width-default) dashed var(--border2); padding: 8px; }
+.cpub-spedit-thumb { width: 56px; height: 56px; flex-shrink: 0; border: var(--border-width-default) solid var(--border); background: var(--surface2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
+.cpub-spedit-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.cpub-spedit-thumb.is-empty { color: var(--text-faint); font-size: 16px; }
+.cpub-spedit-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.cpub-spedit-srcrow { display: flex; gap: 6px; }
+.cpub-spedit-srcrow .cpub-spedit-input { flex: 1; }
+.cpub-spedit-metarow { display: flex; gap: 6px; }
+.cpub-spedit-metarow .cpub-spedit-input { flex: 1; }
+.cpub-spedit-upload { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; border: var(--border-width-default) solid var(--border); background: var(--surface2); color: var(--text-dim); cursor: pointer; }
+.cpub-spedit-upload:hover { border-color: var(--accent); color: var(--accent); }
+.cpub-spedit-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; align-self: stretch; }
+.cpub-spedit-remove:hover { border-color: var(--red-border); color: var(--red); }
+
+.cpub-spedit-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; border: var(--border-width-default) dashed var(--border2); }
+.cpub-spedit-empty:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+.cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
+</style>

package/components/contest/blocks/TableBlock.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * Edit component for the `table` block — an editable grid (header row + body
+ * rows) with add/remove row + column. Cells are plain strings (rendered as text
+ * in the view, so no HTML injection). House block-edit contract: `content` in,
+ * `update` out. Provided via BLOCK_COMPONENTS_KEY.
+ */
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+const caption = computed(() => (typeof props.content.caption === 'string' ? props.content.caption : ''));
+const header = computed<string[]>(() => (Array.isArray(props.content.header) ? (props.content.header as string[]) : ['Column 1', 'Column 2']));
+const rows = computed<string[][]>(() => (Array.isArray(props.content.rows) ? (props.content.rows as string[][]) : [['', '']]));
+
+function commit(next: Partial<{ caption: string; header: string[]; rows: string[][] }>): void {
+  emit('update', { caption: caption.value || undefined, header: header.value, rows: rows.value, ...next });
+}
+function setHeader(c: number, v: string): void {
+  commit({ header: header.value.map((h, i) => (i === c ? v : h)) });
+}
+function setCell(r: number, c: number, v: string): void {
+  commit({ rows: rows.value.map((row, ri) => (ri === r ? row.map((cell, ci) => (ci === c ? v : cell)) : row)) });
+}
+function addColumn(): void {
+  commit({ header: [...header.value, `Column ${header.value.length + 1}`], rows: rows.value.map((row) => [...row, '']) });
+}
+function removeColumn(c: number): void {
+  if (header.value.length <= 1) return;
+  commit({ header: header.value.filter((_, i) => i !== c), rows: rows.value.map((row) => row.filter((_, i) => i !== c)) });
+}
+function addRow(): void {
+  commit({ rows: [...rows.value, header.value.map(() => '')] });
+}
+function removeRow(r: number): void {
+  commit({ rows: rows.value.filter((_, i) => i !== r) });
+}
+</script>
+
+<template>
+  <div class="cpub-tedit">
+    <div class="cpub-tedit-header">
+      <div class="cpub-tedit-icon"><i class="fa-solid fa-table"></i></div>
+      <span class="cpub-tedit-title">Table</span>
+      <button type="button" class="cpub-tedit-act" @click="addColumn"><i class="fa-solid fa-plus"></i> Column</button>
+      <button type="button" class="cpub-tedit-act" @click="addRow"><i class="fa-solid fa-plus"></i> Row</button>
+    </div>
+
+    <div class="cpub-tedit-body">
+      <input class="cpub-tedit-input cpub-tedit-caption" type="text" :value="caption" placeholder="Caption (optional)" aria-label="Table caption" @input="commit({ caption: ($event.target as HTMLInputElement).value || undefined })" />
+
+      <div class="cpub-tedit-scroll">
+        <table class="cpub-tedit-grid">
+          <thead>
+            <tr>
+              <th v-for="(h, c) in header" :key="c" class="cpub-tedit-th">
+                <input class="cpub-tedit-input cpub-tedit-hcell" type="text" :value="h" :placeholder="`Column ${c + 1}`" :aria-label="`Header ${c + 1}`" @input="setHeader(c, ($event.target as HTMLInputElement).value)" />
+                <button type="button" class="cpub-tedit-del" :disabled="header.length <= 1" :aria-label="`Remove column ${c + 1}`" title="Remove column" @click="removeColumn(c)"><i class="fa-solid fa-xmark"></i></button>
+              </th>
+              <th class="cpub-tedit-rowspacer" aria-hidden="true"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, r) in rows" :key="r">
+              <td v-for="(_, c) in header" :key="c">
+                <input class="cpub-tedit-input" type="text" :value="row[c] ?? ''" :aria-label="`Row ${r + 1} column ${c + 1}`" @input="setCell(r, c, ($event.target as HTMLInputElement).value)" />
+              </td>
+              <td class="cpub-tedit-rowdel">
+                <button type="button" class="cpub-tedit-del" :aria-label="`Remove row ${r + 1}`" title="Remove row" @click="removeRow(r)"><i class="fa-solid fa-xmark"></i></button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-tedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-tedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-tedit-icon { font-size: 12px; color: var(--accent); }
+.cpub-tedit-title { font-size: 12px; font-weight: 600; margin-right: auto; }
+.cpub-tedit-act { 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: inline-flex; align-items: center; gap: 4px; }
+.cpub-tedit-act:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+.cpub-tedit-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+.cpub-tedit-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-tedit-input:focus { border-color: var(--accent); }
+.cpub-tedit-input::placeholder { color: var(--text-faint); }
+.cpub-tedit-caption { font-style: italic; }
+.cpub-tedit-scroll { overflow-x: auto; }
+.cpub-tedit-grid { border-collapse: collapse; }
+.cpub-tedit-th { padding: 0 4px 6px 0; vertical-align: bottom; }
+.cpub-tedit-hcell { font-weight: 700; min-width: 120px; }
+.cpub-tedit-grid td { padding: 0 4px 4px 0; }
+.cpub-tedit-grid td .cpub-tedit-input { min-width: 120px; }
+.cpub-tedit-del { background: none; border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 4px 6px; margin-top: 3px; }
+.cpub-tedit-del:hover:not(:disabled) { border-color: var(--red-border); color: var(--red); }
+.cpub-tedit-del:disabled { opacity: 0.35; cursor: not-allowed; }
+.cpub-tedit-rowspacer { width: 28px; }
+.cpub-tedit-rowdel { width: 28px; text-align: center; }
+</style>

package/components/contest/blocks/TabsBlock.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+/**
+ * Edit component for the `tabs` block — a tabbed container whose panels each hold
+ * nested blocks (the buildStep pattern, generalized). Solves tabbed / multiple
+ * rule sets (e.g. Track A vs Track B), each panel a full rich body. House
+ * block-edit contract: `content` in, `update` out. Provided via
+ * BLOCK_COMPONENTS_KEY. The nested palette (`PANEL_GROUPS`) deliberately omits
+ * container blocks so you can't nest tabs-in-tabs.
+ */
+import type { BlockTuple } from '@commonpub/editor';
+import type { BlockTypeGroup } from '@commonpub/editor/vue';
+import ContestTabPanel from './ContestTabPanel.vue';
+
+interface TabDef { label: string; blocks: BlockTuple[] }
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+// Blocks offered inside a panel — rich content, but NO container blocks (tabs,
+// buildStep) so nesting can't recurse.
+const PANEL_GROUPS: BlockTypeGroup[] = [
+  { name: 'Basic', blocks: [
+    { type: 'paragraph', label: 'Text', icon: 'fa-align-left', description: 'Body text' },
+    { type: 'heading', label: 'Heading', icon: 'fa-heading', description: 'Section header' },
+    { type: 'image', label: 'Image', icon: 'fa-image', description: 'Upload or embed' },
+    { type: 'code_block', label: 'Code', icon: 'fa-code', description: 'Code block' },
+  ] },
+  { name: 'Rich', blocks: [
+    { type: 'callout', label: 'Tip', icon: 'fa-lightbulb', description: 'Tip callout', attrs: { variant: 'tip' } },
+    { type: 'callout', label: 'Warning', icon: 'fa-triangle-exclamation', description: 'Warning callout', attrs: { variant: 'warning' } },
+    { type: 'blockquote', label: 'Quote', icon: 'fa-quote-left', description: 'Blockquote' },
+    { type: 'horizontal_rule', label: 'Divider', icon: 'fa-minus', description: 'Visual separator' },
+    { type: 'table', label: 'Table', icon: 'fa-table', description: 'Responsive data table' },
+    { type: 'criteriaBar', label: 'Criteria Bar', icon: 'fa-chart-simple', description: 'Weighted criteria bar' },
+    { type: 'markdown', label: 'Markdown', icon: 'fa-brands fa-markdown', description: 'Raw markdown block' },
+    { type: 'html', label: 'HTML', icon: 'fa-code', description: 'Raw HTML (sanitized on render)' },
+  ] },
+];
+
+const tabs = computed<TabDef[]>(() =>
+  Array.isArray(props.content.tabs)
+    ? (props.content.tabs as TabDef[]).map((t) => ({ label: t?.label ?? '', blocks: Array.isArray(t?.blocks) ? t.blocks : [] }))
+    : [],
+);
+const active = ref(0);
+watchEffect(() => { if (active.value >= tabs.value.length) active.value = Math.max(0, tabs.value.length - 1); });
+
+const urlKey = computed(() => (typeof props.content.urlKey === 'string' ? props.content.urlKey : ''));
+function commit(next: TabDef[]): void {
+  emit('update', { tabs: next, urlKey: urlKey.value || undefined });
+}
+function setUrlKey(v: string): void {
+  emit('update', { tabs: tabs.value, urlKey: v.trim() || undefined });
+}
+function setLabel(i: number, label: string): void {
+  commit(tabs.value.map((t, idx) => (idx === i ? { ...t, label } : t)));
+}
+function setBlocks(i: number, blocks: BlockTuple[]): void {
+  commit(tabs.value.map((t, idx) => (idx === i ? { ...t, blocks } : t)));
+}
+function addTab(): void {
+  commit([...tabs.value, { label: `Tab ${tabs.value.length + 1}`, blocks: [] }]);
+  void nextTick(() => { active.value = tabs.value.length - 1; });
+}
+function removeTab(i: number): void {
+  commit(tabs.value.filter((_, idx) => idx !== i));
+}
+function moveTab(i: number, dir: -1 | 1): void {
+  const j = i + dir;
+  if (j < 0 || j >= tabs.value.length) return;
+  const next = [...tabs.value];
+  [next[i], next[j]] = [next[j]!, next[i]!];
+  commit(next);
+  active.value = j;
+}
+</script>
+
+<template>
+  <div class="cpub-tabsedit">
+    <div class="cpub-tabsedit-header">
+      <div class="cpub-tabsedit-icon"><i class="fa-solid fa-folder-tree"></i></div>
+      <span class="cpub-tabsedit-title">Tabs</span>
+      <span class="cpub-tabsedit-count">{{ tabs.length }} {{ tabs.length === 1 ? 'tab' : 'tabs' }}</span>
+      <button type="button" class="cpub-tabsedit-add" @click="addTab"><i class="fa-solid fa-plus"></i> Add tab</button>
+    </div>
+
+    <div v-if="tabs.length" class="cpub-tabsedit-urlkey">
+      <input
+        class="cpub-tabsedit-keyinput"
+        type="text"
+        :value="urlKey"
+        placeholder="Deep-link key (optional), e.g. track"
+        aria-label="Deep-link URL key"
+        @input="setUrlKey(($event.target as HTMLInputElement).value)"
+      />
+      <span class="cpub-tabsedit-keyhint">Shareable: <code>?{{ urlKey || 'key' }}=&lt;tab&gt;</code> opens that tab.</span>
+    </div>
+
+    <div v-if="tabs.length" class="cpub-tabsedit-bar" role="group" aria-label="Select a tab to edit">
+      <div v-for="(t, i) in tabs" :key="i" class="cpub-tabsedit-tab" :class="{ 'cpub-tabsedit-tab-on': active === i }">
+        <button type="button" class="cpub-tabsedit-select" :aria-pressed="active === i" @click="active = i">
+          {{ t.label || `Tab ${i + 1}` }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="tabs.length" class="cpub-tabsedit-panel">
+      <div class="cpub-tabsedit-meta">
+        <input
+          class="cpub-tabsedit-label"
+          type="text"
+          :value="tabs[active]?.label"
+          :placeholder="`Tab ${active + 1} label`"
+          aria-label="Active tab label"
+          @input="setLabel(active, ($event.target as HTMLInputElement).value)"
+        />
+        <div class="cpub-tabsedit-meta-actions">
+          <button type="button" class="cpub-tabsedit-mbtn" :disabled="active === 0" aria-label="Move tab left" title="Move left" @click="moveTab(active, -1)"><i class="fa-solid fa-arrow-left"></i></button>
+          <button type="button" class="cpub-tabsedit-mbtn" :disabled="active === tabs.length - 1" aria-label="Move tab right" title="Move right" @click="moveTab(active, 1)"><i class="fa-solid fa-arrow-right"></i></button>
+          <button type="button" class="cpub-tabsedit-mbtn cpub-tabsedit-mbtn--danger" aria-label="Remove this tab" title="Remove tab" @click="removeTab(active)"><i class="fa-solid fa-trash"></i></button>
+        </div>
+      </div>
+      <!-- One panel editor at a time, keyed by tab so each gets a clean editor;
+           parent content persists across switches. -->
+      <ContestTabPanel
+        :key="active"
+        :blocks="tabs[active]?.blocks ?? []"
+        :groups="PANEL_GROUPS"
+        @update:blocks="setBlocks(active, $event)"
+      />
+    </div>
+
+    <div v-else class="cpub-tabsedit-empty" @click="addTab"><i class="fa-solid fa-plus"></i> Add the first tab (e.g. Track A, Track B)</div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-tabsedit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-tabsedit-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
+.cpub-tabsedit-icon { font-size: 12px; color: var(--accent); }
+.cpub-tabsedit-title { font-size: 12px; font-weight: 600; }
+.cpub-tabsedit-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+.cpub-tabsedit-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-tabsedit-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+
+.cpub-tabsedit-urlkey { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px 0; }
+.cpub-tabsedit-keyinput { padding: 5px 8px; font-size: 11px; font-family: var(--font-mono); background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text); outline: none; min-width: 220px; }
+.cpub-tabsedit-keyinput:focus { border-color: var(--accent); }
+.cpub-tabsedit-keyhint { font-size: 10px; color: var(--text-faint); }
+.cpub-tabsedit-keyhint code { font-family: var(--font-mono); color: var(--text-dim); }
+
+.cpub-tabsedit-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px 0; }
+.cpub-tabsedit-tab { display: inline-flex; }
+.cpub-tabsedit-select { font-size: 12px; font-weight: 600; padding: 6px 12px; background: transparent; border: var(--border-width-default) solid var(--border2); border-bottom: none; color: var(--text-dim); cursor: pointer; }
+.cpub-tabsedit-tab-on .cpub-tabsedit-select { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); }
+
+.cpub-tabsedit-panel { padding: 12px 14px; border-top: var(--border-width-default) solid var(--border2); }
+.cpub-tabsedit-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.cpub-tabsedit-label { flex: 1; padding: 6px 8px; font-size: 12px; font-weight: 600; background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text); outline: none; }
+.cpub-tabsedit-label:focus { border-color: var(--accent); }
+.cpub-tabsedit-meta-actions { display: inline-flex; gap: 3px; }
+.cpub-tabsedit-mbtn { width: 26px; height: 26px; background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-faint); cursor: pointer; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
+.cpub-tabsedit-mbtn:hover:not(:disabled) { color: var(--text); }
+.cpub-tabsedit-mbtn:disabled { opacity: 0.35; cursor: not-allowed; }
+.cpub-tabsedit-mbtn--danger:hover:not(:disabled) { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+.cpub-tabsedit-empty { padding: 18px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; margin: 12px 14px; border: var(--border-width-default) dashed var(--border2); }
+.cpub-tabsedit-empty:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+</style>

package/components/editors/ArticleEditor.vue

@@ -14,6 +14,8 @@ function updateMeta(key: string, value: unknown): void {
   emit('update:metadata', { ...props.metadata, [key]: value });
 }
 
+const { uploadFile } = useFileUpload();
+
 const blockTypes: BlockTypeGroup[] = [
   {
     name: 'Text',
@@ -130,10 +132,7 @@ function onAssetUpload(event: Event): void {
   }
 
   uploading.value = true;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'content');
-  $fetch<{ url: string; originalName: string; sizeBytes: number; mimeType: string }>('/api/files/upload', { method: 'POST', body: formData })
+  uploadFile<{ url: string; originalName: string; sizeBytes: number; mimeType: string }>(file, 'content')
     .then((res) => {
       uploadedFiles.value.unshift({
         name: res.originalName || file.name,
@@ -181,12 +180,9 @@ function onCoverUpload(event: Event): void {
   if (!input.files?.length) return;
   const file = input.files[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'cover');
-  $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData })
-    .then((res) => { updateMeta('coverImageUrl', res.url); })
-    .catch(() => { /* silent fallback */ });
+  uploadFile(file, 'cover')
+    .then((res) => { updateMeta('coverImageUrl', res.url); uploadError.value = ''; })
+    .catch((err) => { uploadError.value = err?.data?.statusMessage || 'Cover image upload failed'; });
 }
 
 function onCoverUrl(): void {
@@ -206,12 +202,9 @@ function onBannerUpload(event: Event): void {
   if (!input.files?.length) return;
   const file = input.files[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'cover');
-  $fetch<{ url: string }>('/api/files/upload', { method: 'POST', body: formData })
-    .then((res) => { updateMeta('bannerUrl', res.url); })
-    .catch(() => {});
+  uploadFile(file, 'cover')
+    .then((res) => { updateMeta('bannerUrl', res.url); uploadError.value = ''; })
+    .catch((err) => { uploadError.value = err?.data?.statusMessage || 'Banner image upload failed'; });
 }
 
 function removeBanner(): void {

package/components/editors/ExplainerEditor.vue

@@ -14,6 +14,9 @@ function updateMeta(key: string, value: unknown): void {
   emit('update:metadata', { ...props.metadata, [key]: value });
 }
 
+const { uploadFile } = useFileUpload();
+const toast = useToast();
+
 const activeLeftTab = ref<'modules' | 'structure' | 'assets'>('modules');
 
 // Interactive blocks FIRST — they're the core of an explainer
@@ -118,10 +121,7 @@ function onAssetUpload(event: Event): void {
   if (!input.files?.length) return;
   const file = input.files[0];
   if (!file) return;
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('purpose', 'content');
-  $fetch<{ url: string; originalName: string; size: number }>('/api/files/upload', { method: 'POST', body: formData })
+  uploadFile<{ url: string; originalName: string; size: number }>(file, 'content')
     .then((res) => {
       uploadedFiles.value.unshift({
         name: res.originalName || file.name,
@@ -129,7 +129,10 @@ function onAssetUpload(event: Event): void {
         type: file.type.startsWith('image/') ? 'image' : 'file',
       });
     })
-    .catch(() => { /* silent */ });
+    .catch((err: unknown) => {
+      const msg = (err as { data?: { statusMessage?: string } })?.data?.statusMessage;
+      toast.error(msg || 'Upload failed');
+    });
 }
 
 const openSections = ref<Record<string, boolean>>({