@commonpub/layer 0.82.0 → 0.83.0

package/components/blocks/BlockTabsView.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+/**
+ * Read-only view for the `tabs` block — tabbed container, each panel a nested
+ * BlockTuple[] rendered recursively (via the auto-import name
+ * `BlocksBlockContentRenderer`, since this view and the renderer are mutually
+ * recursive). Replaces the hand-built CSS radio-tabs (e.g. Track A / Track B
+ * rules) with an accessible WAI-ARIA tablist (roving tabindex + arrow keys).
+ * All panels stay in the DOM (v-show) so nested content is crawlable.
+ */
+import { useId } from 'vue';
+import type { BlockTuple } from '@commonpub/editor';
+
+interface TabDef { label: string; blocks: BlockTuple[] }
+const props = defineProps<{ content: { tabs?: TabDef[]; urlKey?: string } }>();
+
+const tabs = computed<TabDef[]>(() =>
+  (props.content.tabs ?? []).filter((t) => t && Array.isArray(t.blocks)),
+);
+
+// Optional deep-link: when the author sets `urlKey`, the open tab syncs to
+// ?<urlKey>=<slug>. Router access is guarded (try/catch) so the block also works
+// outside a Nuxt route context (tests, isolated render) — it just stays local.
+const urlKey = computed(() => (typeof props.content.urlKey === 'string' ? props.content.urlKey.trim() : ''));
+function safe<T>(fn: () => T): T | null { try { return fn(); } catch { return null; } }
+const route = safe(() => useRoute());
+const router = safe(() => useRouter());
+function slugify(s: string): string {
+  return s.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/(^-+)|(-+$)/g, '');
+}
+function indexFromUrl(): number {
+  if (!urlKey.value || !route) return 0;
+  const v = String(route.query[urlKey.value] ?? '').toLowerCase();
+  if (!v) return 0;
+  const i = tabs.value.findIndex((t, idx) => slugify(t.label) === v || String(idx + 1) === v);
+  return i >= 0 ? i : 0;
+}
+const active = ref(indexFromUrl());
+watchEffect(() => { if (active.value >= tabs.value.length) active.value = 0; });
+
+function setActive(i: number): void {
+  active.value = i;
+  if (urlKey.value && router && route) {
+    const s = slugify(tabs.value[i]?.label ?? '') || String(i + 1);
+    if (String(route.query[urlKey.value] ?? '') !== s) {
+      void router.replace({ query: { ...route.query, [urlKey.value]: s } });
+    }
+  }
+}
+// Honor back/forward + a shared deep link landing on a different tab.
+if (route) {
+  watch(() => route.query[urlKey.value], () => {
+    if (!urlKey.value) return;
+    const i = indexFromUrl();
+    if (i !== active.value) active.value = i;
+  });
+}
+
+const uid = useId();
+const tabId = (i: number): string => `${uid}-tab-${i}`;
+const panelId = (i: number): string => `${uid}-panel-${i}`;
+
+function onKey(e: KeyboardEvent, i: number): void {
+  const n = tabs.value.length;
+  let next: number | null = null;
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (i + 1) % n;
+  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (i - 1 + n) % n;
+  else if (e.key === 'Home') next = 0;
+  else if (e.key === 'End') next = n - 1;
+  if (next === null) return;
+  e.preventDefault();
+  setActive(next);
+  void nextTick(() => { if (typeof document !== 'undefined') document.getElementById(tabId(next!))?.focus(); });
+}
+</script>
+
+<template>
+  <div v-if="tabs.length" class="cpub-tabs">
+    <div class="cpub-tabs-list" role="tablist">
+      <button
+        v-for="(t, i) in tabs"
+        :id="tabId(i)"
+        :key="i"
+        type="button"
+        role="tab"
+        :aria-selected="active === i"
+        :aria-controls="panelId(i)"
+        :tabindex="active === i ? 0 : -1"
+        class="cpub-tabs-tab"
+        :class="{ 'cpub-tabs-tab-active': active === i }"
+        @click="setActive(i)"
+        @keydown="onKey($event, i)"
+      >{{ t.label || `Tab ${i + 1}` }}</button>
+    </div>
+    <div
+      v-for="(t, i) in tabs"
+      v-show="active === i"
+      :id="panelId(i)"
+      :key="i"
+      role="tabpanel"
+      :aria-labelledby="tabId(i)"
+      tabindex="0"
+      class="cpub-tabs-panel"
+    >
+      <BlocksBlockContentRenderer :blocks="t.blocks" class="cpub-prose cpub-md" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-tabs { margin: 0 0 18px; }
+.cpub-tabs-list { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
+.cpub-tabs-tab {
+  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
+  font-weight: 700; font-size: 13px; color: var(--text-faint);
+  background: transparent; border: var(--border-width-default) solid transparent; border-bottom: none;
+  padding: 10px 16px; margin-bottom: -2px;
+}
+.cpub-tabs-tab:hover { color: var(--text); }
+.cpub-tabs-tab-active { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); }
+.cpub-tabs-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+</style>

package/components/contest/ContestBodyCanvas.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+/**
+ * ContestBodyCanvas — the CENTER of the contest editor shell: a tab bar
+ * (Overview / Rules / Prizes) + a Write/Preview/Code switch over a SINGLE shared
+ * BlockCanvas. Presentational only — it owns no block state; the parent
+ * (ContestEditor) holds the three hoisted useBlockEditor instances and passes the
+ * currently-active one as `editor`, so the left palette and this canvas target the
+ * same body. `activeTab` + `mode` are v-modelled back to the parent (the palette
+ * needs `activeTab` to resolve which body it inserts into).
+ *
+ * Write = the canvas · Preview = the same blocks through the public view renderer ·
+ * Code = read-only BlockTuple[] JSON, all derived from the active editor.
+ */
+import { BlockCanvas, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
+
+type BodyTab = 'overview' | 'rules' | 'prizes';
+type BodyMode = 'write' | 'preview' | 'code';
+
+const props = defineProps<{
+  editor: BlockEditor;
+  groups: BlockTypeGroup[];
+  activeTab: BodyTab;
+  mode: BodyMode;
+}>();
+
+const emit = defineEmits<{
+  'update:activeTab': [tab: BodyTab];
+  'update:mode': [mode: BodyMode];
+}>();
+
+const TABS: { key: BodyTab; label: string; icon: string }[] = [
+  { key: 'overview', label: 'Overview', icon: 'fa-circle-info' },
+  { key: 'rules', label: 'Rules', icon: 'fa-file-lines' },
+  { key: 'prizes', label: 'Prizes', icon: 'fa-trophy' },
+];
+const MODES: { key: BodyMode; label: string; icon: string }[] = [
+  { key: 'write', label: 'Write', icon: 'fa-pen' },
+  { key: 'preview', label: 'Preview', icon: 'fa-eye' },
+  { key: 'code', label: 'Code', icon: 'fa-code' },
+];
+
+// Live tuples for Preview/Code — recomputes when the active editor's blocks change
+// or when the editor prop swaps on a tab switch.
+const previewBlocks = computed<[string, Record<string, unknown>][]>(
+  () => props.editor.toBlockTuples() as [string, Record<string, unknown>][],
+);
+const codeJson = computed<string>(() => JSON.stringify(previewBlocks.value, null, 2));
+
+// Roving-arrow keyboard nav for the tablist (WCAG): move selection AND DOM focus
+// together, else focus desyncs from the active tab.
+function focusTab(key: BodyTab): void {
+  void nextTick(() => document.getElementById(`cpub-cbc-tab-${key}`)?.focus());
+}
+function onTabKey(e: KeyboardEvent, key: BodyTab): void {
+  const i = TABS.findIndex((t) => t.key === key);
+  if (i < 0) return;
+  let next: BodyTab | null = null;
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = TABS[(i + 1) % TABS.length]!.key;
+  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = TABS[(i - 1 + TABS.length) % TABS.length]!.key;
+  else if (e.key === 'Home') next = TABS[0]!.key;
+  else if (e.key === 'End') next = TABS[TABS.length - 1]!.key;
+  if (!next) return;
+  e.preventDefault();
+  emit('update:activeTab', next);
+  focusTab(next);
+}
+</script>
+
+<template>
+  <div class="cpub-cbc">
+    <div class="cpub-cbc-bar">
+      <div class="cpub-cbc-tablist" role="tablist" aria-label="Contest body sections">
+        <button
+          v-for="t in TABS"
+          :id="`cpub-cbc-tab-${t.key}`"
+          :key="t.key"
+          type="button"
+          role="tab"
+          :aria-selected="activeTab === t.key"
+          :tabindex="activeTab === t.key ? 0 : -1"
+          class="cpub-cbc-tab"
+          :class="{ 'cpub-cbc-tab-active': activeTab === t.key }"
+          @click="emit('update:activeTab', t.key)"
+          @keydown="onTabKey($event, t.key)"
+        >
+          <i class="fa-solid" :class="t.icon"></i> {{ t.label }}
+        </button>
+      </div>
+      <div class="cpub-cbc-mode" role="group" aria-label="Body view mode">
+        <button
+          v-for="m in MODES"
+          :key="m.key"
+          type="button"
+          class="cpub-cbc-mode-btn"
+          :class="{ 'cpub-cbc-mode-active': mode === m.key }"
+          :aria-pressed="mode === m.key"
+          @click="emit('update:mode', m.key)"
+        >
+          <i class="fa-solid" :class="m.icon"></i> {{ m.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="cpub-cbc-panel" role="tabpanel" tabindex="0" :aria-labelledby="`cpub-cbc-tab-${activeTab}`">
+      <!-- Overview-only lead (inline banner + cover); the parent fills the slot. -->
+      <div v-if="activeTab === 'overview' && mode === 'write'" class="cpub-cbc-lead">
+        <slot name="overview-lead" />
+      </div>
+      <!-- One canvas, keyed by tab so each body gets a clean canvas instance; the
+           underlying block state persists in the parent's hoisted editors. -->
+      <BlockCanvas v-show="mode === 'write'" :key="activeTab" :block-editor="editor" :block-types="groups" />
+      <div v-if="mode === 'preview'" class="cpub-cbc-preview">
+        <BlocksBlockContentRenderer v-if="previewBlocks.length" :blocks="previewBlocks" class="cpub-prose cpub-md" />
+        <p v-else class="cpub-cbc-empty">Nothing to preview yet. Switch to Write and add some blocks.</p>
+      </div>
+      <pre v-else-if="mode === 'code'" class="cpub-cbc-code" aria-label="Block content as JSON"><code>{{ codeJson }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-cbc { display: flex; flex-direction: column; }
+.cpub-cbc-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-cbc-tablist { display: flex; gap: 4px; }
+.cpub-cbc-tab {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 14px; background: transparent; border: none; cursor: pointer;
+  font-size: var(--text-sm); font-weight: 600; color: var(--text-dim);
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+}
+.cpub-cbc-tab:hover { color: var(--text); }
+.cpub-cbc-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.cpub-cbc-mode { display: inline-flex; margin-bottom: 6px; border: var(--border-width-default) solid var(--border); }
+.cpub-cbc-mode-btn {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 5px 10px; background: transparent; border: none; cursor: pointer;
+  font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--text-faint); border-right: var(--border-width-default) solid var(--border);
+}
+.cpub-cbc-mode-btn:last-child { border-right: none; }
+.cpub-cbc-mode-btn:hover { background: var(--surface2); color: var(--text-dim); }
+.cpub-cbc-mode-active { background: var(--accent-bg); color: var(--accent); }
+
+.cpub-cbc-panel { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: var(--space-2); }
+.cpub-cbc-lead { margin-bottom: var(--space-3); }
+.cpub-cbc-preview { padding: var(--space-3); }
+.cpub-cbc-empty { font-size: var(--text-sm); color: var(--text-faint); margin: 0; padding: var(--space-4) 0; text-align: center; }
+.cpub-cbc-code {
+  margin: 0; padding: var(--space-3); overflow: auto; max-height: 60vh;
+  background: var(--surface2); color: var(--text-dim);
+  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6;
+  white-space: pre; tab-size: 2;
+}
+</style>

package/components/contest/ContestCriteriaEditor.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+/**
+ * Reusable judging-rubric editor — ONE component for both the contest-level
+ * criteria (Judging tab) and a review stage's per-round criteria. v-model an array
+ * of `{ label, weight?, description? }`; weight is clamped 0–100 and omitted (not
+ * null) when blank, matching `contestJudgingCriterionSchema`. Pure presentational
+ * + immutable emits — no side effects, so it's trivially testable + drop-in
+ * wherever a rubric is edited (kills the prior duplicate editors).
+ */
+export interface ContestCriterion {
+  label: string;
+  weight?: number;
+  description?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: ContestCriterion[] | null;
+    /** Header label (e.g. "Judging criteria"). */
+    label?: string;
+    /** Show the summed points badge in the header. */
+    showTotal?: boolean;
+  }>(),
+  { modelValue: () => [], label: 'Judging criteria', showTotal: true },
+);
+
+const emit = defineEmits<{ 'update:modelValue': [value: ContestCriterion[]] }>();
+
+const items = computed<ContestCriterion[]>(() => props.modelValue ?? []);
+const total = computed(() => items.value.reduce((s, c) => s + (c.weight ?? 0), 0));
+
+function set(i: number, patch: Partial<ContestCriterion>): void {
+  emit('update:modelValue', items.value.map((c, idx) => (idx === i ? { ...c, ...patch } : c)));
+}
+function setWeight(i: number, raw: string): void {
+  const n = raw === '' ? undefined : Math.max(0, Math.min(100, Math.round(Number(raw))));
+  set(i, { weight: Number.isFinite(n as number) ? n : undefined });
+}
+function add(): void {
+  emit('update:modelValue', [...items.value, { label: '' }]);
+}
+function remove(i: number): void {
+  emit('update:modelValue', items.value.filter((_, idx) => idx !== i));
+}
+</script>
+
+<template>
+  <div class="cpub-criteria-editor">
+    <div class="cpub-criteria-head">
+      <span class="cpub-criteria-title">
+        {{ label }}<span v-if="showTotal && total" class="cpub-criteria-total">{{ total }} pts</span>
+      </span>
+      <button type="button" class="cpub-btn cpub-btn-sm" @click="add"><i class="fa-solid fa-plus"></i> Add</button>
+    </div>
+    <p v-if="!items.length" class="cpub-criteria-empty">No rubric yet. Judges score an overall 1–100 unless you add criteria.</p>
+    <div v-for="(c, i) in items" :key="i" class="cpub-criteria-row">
+      <div class="cpub-criteria-main">
+        <input :value="c.label" type="text" class="cpub-input" :aria-label="`Criterion ${i + 1} label`" placeholder="e.g. Technical merit" @input="set(i, { label: ($event.target as HTMLInputElement).value })" />
+        <input :value="c.weight ?? ''" type="number" min="0" max="100" class="cpub-input cpub-criteria-pts" :aria-label="`Criterion ${i + 1} points`" placeholder="pts" @input="setWeight(i, ($event.target as HTMLInputElement).value)" />
+        <button type="button" class="cpub-criteria-del" :aria-label="`Remove criterion ${i + 1}`" @click="remove(i)"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+      <input :value="c.description ?? ''" type="text" class="cpub-input cpub-criteria-desc" :aria-label="`Criterion ${i + 1} description`" placeholder="What judges look for (optional)" @input="set(i, { description: ($event.target as HTMLInputElement).value || undefined })" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-criteria-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-2); }
+.cpub-criteria-title { font-size: var(--text-xs); font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; }
+.cpub-criteria-total { color: var(--accent); }
+.cpub-criteria-empty { font-size: var(--text-sm); color: var(--text-faint); margin: 0 0 var(--space-2); }
+.cpub-criteria-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
+.cpub-criteria-main { display: flex; align-items: center; gap: 6px; }
+.cpub-criteria-main .cpub-input { flex: 1; }
+.cpub-criteria-pts { max-width: 80px; flex: none !important; text-align: center; }
+.cpub-criteria-del { background: var(--surface); border: var(--border-width-default) solid var(--border); color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 0 9px; flex-shrink: 0; }
+.cpub-criteria-del:hover { border-color: var(--red-border); color: var(--red); }
+.cpub-criteria-desc { font-size: var(--text-xs); }
+</style>