@commonpub/layer 0.28.1 → 0.30.0

package/components/ContentCard.vue

@@ -294,6 +294,12 @@ function formatCount(n: number | undefined): string {
   min-width: 0;
 }
 
+/* Two render modes share .cpub-cc-av: <img class="cpub-cc-av cpub-cc-av--img">
+ * (author photo) and <span class="cpub-cc-av"> (initials fallback). `display:flex`
+ * MUST NOT apply to the <img> — a replaced element with display:flex silently
+ * drops `object-fit:cover` in Chromium, squishing portrait avatars into the box
+ * (the recurring deveco.io blog-card bug). Centering is scoped to the span; the
+ * img keeps object-fit only. See ArticleView.vue for the same fix. */
 .cpub-cc-av {
   width: 18px;
   height: 18px;
@@ -303,14 +309,18 @@ function formatCount(n: number | undefined): string {
   font-size: 8px;
   font-weight: 700;
   font-family: var(--font-mono);
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+span.cpub-cc-av {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  border-radius: 50%;
 }
 
-.cpub-cc-av--img {
+.cpub-cc-av--img,
+img.cpub-cc-av {
   object-fit: cover;
 }
 

package/components/CpubMarkdown.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * Renders a Markdown (or HTML-in-Markdown) string as formatted content, reusing
+ * the SAME pipeline articles/docs use: `markdownToBlockTuples` → the block
+ * content renderer. This is why a contest description like `## Mission` +
+ * `- **point**` + `[link](url)` renders as real headings/lists/links instead of
+ * the raw-markdown wall it used to show.
+ *
+ * Source is parsed once (computed) and memoised by Vue. Empty / parse-failure
+ * falls back to plain text so content never disappears.
+ */
+import { markdownToBlockTuples } from '@commonpub/editor';
+import type { BlockTuple } from '@commonpub/editor';
+
+const props = defineProps<{
+  /** Markdown source (may contain inline/block HTML — passed through). */
+  source?: string | null;
+}>();
+
+const trimmed = computed(() => (props.source ?? '').trim());
+
+const blocks = computed<BlockTuple[]>(() => {
+  if (!trimmed.value) return [];
+  try {
+    return markdownToBlockTuples(trimmed.value);
+  } catch {
+    return [];
+  }
+});
+</script>
+
+<template>
+  <BlocksBlockContentRenderer
+    v-if="blocks.length"
+    :blocks="(blocks as [string, Record<string, unknown>][])"
+    class="cpub-prose cpub-md"
+  />
+  <p v-else-if="trimmed" class="cpub-md cpub-md-plain">{{ trimmed }}</p>
+</template>
+
+<style scoped>
+.cpub-md-plain {
+  white-space: pre-wrap;
+  line-height: 1.7;
+}
+</style>

package/components/NotificationItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   notification: {
     id: string;
     type: string;
@@ -13,6 +13,18 @@ defineProps<{
   };
 }>();
 
+const emit = defineEmits<{ read: [id: string] }>();
+
+// The whole row is the click target when there's somewhere to go (previously
+// only the tiny right-hand arrow navigated). When there's a destination the
+// root renders as a NuxtLink so keyboard / middle-click / open-in-new-tab all
+// work; otherwise it stays a plain div.
+const destination = computed(() => props.notification.link || props.notification.targetUrl || null);
+
+function onActivate(): void {
+  if (!props.notification.read) emit('read', props.notification.id);
+}
+
 const iconMap: Record<string, string> = {
   like: 'fa-solid fa-heart',
   comment: 'fa-solid fa-comment',
@@ -28,7 +40,14 @@ const iconMap: Record<string, string> = {
 </script>
 
 <template>
-  <div class="cpub-notif" :class="{ 'cpub-notif-unread': !notification.read }">
+  <component
+    :is="destination ? 'NuxtLink' : 'div'"
+    :to="destination || undefined"
+    class="cpub-notif"
+    :class="{ 'cpub-notif-unread': !notification.read, 'cpub-notif-link-row': destination }"
+    :aria-label="destination ? `${notification.actorName ? notification.actorName + ' ' : ''}${notification.message}` : undefined"
+    @click="onActivate"
+  >
     <div class="cpub-notif-avatar-wrap">
       <img v-if="notification.actorAvatarUrl" :src="notification.actorAvatarUrl" :alt="notification.actorName ?? ''" class="cpub-notif-avatar" />
       <div v-else class="cpub-notif-avatar cpub-notif-avatar-fallback">
@@ -47,10 +66,8 @@ const iconMap: Record<string, string> = {
         {{ new Date(notification.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
       </time>
     </div>
-    <NuxtLink v-if="notification.link || notification.targetUrl" :to="notification.link || notification.targetUrl || '#'" class="cpub-notif-link" :aria-label="`View ${notification.type} notification`">
-      <i class="fa-solid fa-arrow-right"></i>
-    </NuxtLink>
-  </div>
+    <i v-if="destination" class="fa-solid fa-chevron-right cpub-notif-chevron" aria-hidden="true"></i>
+  </component>
 </template>
 
 <style scoped>
@@ -61,6 +78,18 @@ const iconMap: Record<string, string> = {
   padding: 12px;
   border: var(--border-width-default) solid transparent;
   border-bottom: var(--border-width-default) solid var(--border2);
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Whole-row link affordance: the entire item is the click target. */
+.cpub-notif-link-row {
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.cpub-notif-link-row:hover {
+  background: var(--surface2);
 }
 
 .cpub-notif.cpub-notif-unread {
@@ -68,6 +97,10 @@ const iconMap: Record<string, string> = {
   border-color: var(--accent-border);
 }
 
+.cpub-notif-link-row.cpub-notif-unread:hover {
+  background: var(--accent-bg-hover, var(--accent-bg));
+}
+
 .cpub-notif-avatar-wrap {
   position: relative;
   width: 32px;
@@ -126,18 +159,16 @@ const iconMap: Record<string, string> = {
   font-family: var(--font-mono);
 }
 
-.cpub-notif-link {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* Decorative chevron — signals the whole row navigates (the row itself is the
+   link now; this is aria-hidden, not a separate tab stop). */
+.cpub-notif-chevron {
+  align-self: center;
+  flex-shrink: 0;
   color: var(--text-faint);
-  text-decoration: none;
   font-size: 10px;
 }
 
-.cpub-notif-link:hover {
+.cpub-notif-link-row:hover .cpub-notif-chevron {
   color: var(--accent);
 }
 </style>

package/components/contest/ContestEntries.vue

@@ -149,10 +149,13 @@ function confirmWithdraw(entryId: string): void {
 .cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
 .cpub-sec-sub { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
 
-.cpub-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
-.cpub-entry-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
+/* Match the content-card grid: responsive auto-fill columns + a 4:3 cover
+   (was a rigid 2-col grid with a squat fixed 110px strip that over-cropped
+   the cover photo). */
+.cpub-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 12px; }
+.cpub-entry-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
 .cpub-entry-card:hover { box-shadow: var(--shadow-accent); }
-.cpub-entry-thumb { height: 110px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+.cpub-entry-thumb { aspect-ratio: 4 / 3; width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
 .cpub-entry-bg-light { background: var(--surface2); }
 .cpub-entry-bg-dark { background: var(--surface3); }
 .cpub-entry-grid-pat { position: absolute; inset: 0; background-image: linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px); background-size: 20px 20px; opacity: .3; }

package/components/contest/ContestHero.vue

@@ -53,6 +53,27 @@ const countdownLabel = computed(() => {
 });
 
 const isEnded = computed(() => c.value?.status === 'completed' || c.value?.status === 'cancelled');
+
+// The hero shows the short `subheading` (a dedicated tagline field). For older
+// contests without one, fall back to a clean, plain-text, CSS-clamped excerpt of
+// the (possibly long Markdown) description — so the hero never dumps a raw
+// `## ...` wall. The full formatted description renders in the About tab.
+const tagline = computed<string>(() => {
+  const sub = (c.value?.subheading ?? '').trim();
+  if (sub) return sub;
+  const d = (c.value?.description ?? '').trim();
+  if (!d) return 'No description available.';
+  return d
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/`([^`]*)`/g, '$1')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, ' ')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/^#{1,6}\s+/gm, '')
+    .replace(/^\s*[-*+>]\s+/gm, '')
+    .replace(/(\*\*|__|~~|\*|_)/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+});
 </script>
 
 <template>
@@ -72,7 +93,7 @@ const isEnded = computed(() => c.value?.status === 'completed' || c.value?.statu
       </div>
 
       <div class="cpub-hero-title">{{ c?.title || 'Contest' }}</div>
-      <div class="cpub-hero-tagline">{{ c?.description || 'No description available.' }}</div>
+      <div class="cpub-hero-tagline">{{ tagline }}</div>
 
       <div class="cpub-hero-meta">
         <span v-if="c?.startDate || c?.endDate" class="cpub-hero-meta-item">
@@ -158,7 +179,7 @@ const isEnded = computed(() => c.value?.status === 'completed' || c.value?.statu
 .cpub-contest-badge { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); padding: 3px 10px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 5px; }
 .cpub-contest-badge i { font-size: 8px; }
 .cpub-hero-title { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; color: var(--hero-text); }
-.cpub-hero-tagline { font-size: 14px; color: var(--hero-text-dim); line-height: 1.55; max-width: 580px; margin-bottom: 28px; }
+.cpub-hero-tagline { font-size: 14px; color: var(--hero-text-dim); line-height: 1.55; max-width: 580px; margin-bottom: 28px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
 .cpub-hero-meta { display: flex; align-items: center; gap: 20px; font-size: 11px; color: var(--hero-text-dim); font-family: var(--font-mono); margin-bottom: 28px; }
 .cpub-hero-meta-item { display: flex; align-items: center; gap: 5px; }
 .cpub-hero-meta-sep { color: var(--hero-border); }

package/components/contest/ContestPrizes.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-interface Prize { place?: number; category?: string; title: string; description?: string; value?: string }
+interface Prize { place?: number; category?: string; title?: string; description?: string; value?: string }
 defineProps<{
   prizes: Prize[];
 }>();
@@ -45,7 +45,7 @@ function prizeIcon(prize: Prize): string {
         <div class="cpub-prize-rank" :class="`cpub-prize-rank-${prizeColor(prize)}`">{{ prizeLabel(prize) }}</div>
         <div class="cpub-prize-icon" :class="`cpub-prize-icon-${prizeColor(prize)}`"><i class="fa-solid" :class="prizeIcon(prize)"></i></div>
         <div v-if="prize.value" class="cpub-prize-amount" :class="`cpub-prize-amount-${prizeColor(prize)}`">{{ prize.value }}</div>
-        <div class="cpub-prize-title">{{ prize.title }}</div>
+        <div v-if="prize.title" class="cpub-prize-title">{{ prize.title }}</div>
         <div v-if="prize.description" class="cpub-prize-desc">{{ prize.description }}</div>
       </div>
     </div>

package/components/contest/ContestRules.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+/**
+ * Rules are authored as Markdown (and may contain inline HTML) — rendered the
+ * same way as the contest description, so headings/lists/links/HTML all format
+ * properly. Plain prose and plain one-rule-per-line text render fine through the
+ * Markdown pipeline too (as paragraphs / a tight list), so there's no separate
+ * "numbered list" special-case anymore (that produced the odd forced-list look).
+ */
+defineProps<{
   rules: string;
 }>();
-
-const ruleLines = computed(() =>
-  props.rules.split('\n').filter((line) => line.trim().length > 0),
-);
 </script>
 
 <template>
@@ -14,10 +17,7 @@ const ruleLines = computed(() =>
       <h2><i class="fa fa-file-lines" style="color: var(--purple);"></i> Rules</h2>
     </div>
     <div class="cpub-rules-card">
-      <ol v-if="ruleLines.length > 1" class="cpub-rules-list">
-        <li v-for="(line, i) in ruleLines" :key="i" class="cpub-rule-item">{{ line }}</li>
-      </ol>
-      <div v-else class="cpub-rules-text">{{ rules }}</div>
+      <CpubMarkdown :source="rules" />
     </div>
   </div>
 </template>

package/components/contest/ContestStakeholderManager.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { ContestStakeholderItem } from '@commonpub/server';
+
+const props = defineProps<{ contestSlug: string }>();
+
+const toast = useToast();
+const { data: stakeholders, refresh } = useLazyFetch<ContestStakeholderItem[]>(
+  `/api/contests/${props.contestSlug}/stakeholders`,
+);
+
+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);
+let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+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 }> };
+      const existing = new Set((stakeholders.value ?? []).map((s) => s.userId));
+      searchResults.value = data.items.filter((u) => !existing.has(u.id));
+    } catch {
+      searchResults.value = [];
+    } finally {
+      searching.value = false;
+    }
+  }, 300);
+}
+
+async function addStakeholder(userId: string): Promise<void> {
+  adding.value = true;
+  try {
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders`, { method: 'POST', body: { userId } });
+    toast.success('Reviewer added');
+    searchQuery.value = '';
+    searchResults.value = [];
+    await refresh();
+  } catch {
+    toast.error('Failed to add reviewer');
+  } finally {
+    adding.value = false;
+  }
+}
+
+async function removeStakeholder(userId: string): Promise<void> {
+  if (!confirm('Remove this reviewer’s access?')) return;
+  try {
+    await ($fetch as Function)(`/api/contests/${props.contestSlug}/stakeholders/${userId}`, { method: 'DELETE' });
+    toast.success('Reviewer removed');
+    await refresh();
+  } catch {
+    toast.error('Failed to remove reviewer');
+  }
+}
+</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>
+    <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">
+          <span class="cpub-sh-av">
+            <img v-if="s.userAvatar" :src="s.userAvatar" :alt="s.userName" />
+            <span v-else>{{ s.userName.charAt(0) }}</span>
+          </span>
+          <span class="cpub-sh-name">{{ s.userName }}</span>
+        </NuxtLink>
+        <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>
+
+    <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 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)">
+          <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>
+          </span>
+          <span class="cpub-sh-opt-name">{{ u.displayName || u.username }}</span>
+          <span class="cpub-sh-opt-handle">@{{ u.username }}</span>
+        </button>
+      </div>
+      <div v-else-if="searching" class="cpub-sh-dropdown"><span class="cpub-sh-dropdown-empty">Searching...</span></div>
+      <div v-else-if="searchQuery.length >= 2" class="cpub-sh-dropdown"><span class="cpub-sh-dropdown-empty">No users found</span></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sh-hint { font-size: 11px; color: var(--text-faint); margin: 0 0 12px; line-height: 1.5; }
+.cpub-sh-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
+.cpub-sh-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
+.cpub-sh-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
+.cpub-sh-av { width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
+.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-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-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; }
+.cpub-sh-option:hover { background: var(--surface2); }
+.cpub-sh-option:disabled { opacity: 0.5; cursor: default; }
+.cpub-sh-opt-name { font-size: 12px; font-weight: 600; color: var(--text); }
+.cpub-sh-opt-handle { font-size: 11px; color: var(--text-faint); margin-left: auto; }
+.cpub-sh-dropdown-empty { display: block; padding: 8px 12px; font-size: 11px; color: var(--text-faint); }
+</style>

package/composables/useFeatures.ts

@@ -34,6 +34,12 @@ export interface FeatureFlags {
    * a default layout exists at scope ('route', '/'). Added session 158.
    */
   layoutEngine: boolean;
+  /**
+   * Global RBAC (session 175). Client-advisory only — drives `useCan`'s
+   * button-hiding; the server resolver is the enforcement boundary. Default
+   * OFF. See docs/plans/rbac.md.
+   */
+  rbac: boolean;
   /**
    * Cross-instance delegated authorization. All sub-flags default false.
    * Mirrors `@commonpub/config`'s `IdentityFeatures`. Phase 1b+ — see
@@ -55,6 +61,7 @@ export const DEFAULT_FLAGS: FeatureFlags = {
   editorial: true, federation: false, admin: false, emailNotifications: false,
   publicApi: false, contentImport: true,
   layoutEngine: false,
+  rbac: false,
   identity: {
     linkRemoteAccounts: false,
     signInWithRemote: false,
@@ -157,6 +164,7 @@ export function useFeatures() {
     publicApi: computed(() => flags.value.publicApi),
     contentImport: computed(() => flags.value.contentImport),
     layoutEngine: computed(() => flags.value.layoutEngine),
+    rbac: computed(() => flags.value.rbac),
     identity: computed(() => flags.value.identity),
   };
 }

package/nuxt.config.ts

@@ -109,6 +109,7 @@ export default defineNuxtConfig({
         publicApi: false,
         contentImport: true,
         layoutEngine: false,
+        rbac: false,
       },
       contentTypes: 'project,blog,explainer',
       contestCreation: 'admin',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.28.1",
+  "version": "0.30.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,16 +53,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.15.0",
+    "@commonpub/auth": "0.7.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/protocol": "0.12.0",
+    "@commonpub/config": "0.16.0",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/schema": "0.21.0",
-    "@commonpub/ui": "0.9.1",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/server": "2.62.0",
-    "@commonpub/auth": "0.6.0"
+    "@commonpub/schema": "0.23.0",
+    "@commonpub/ui": "0.9.1",
+    "@commonpub/protocol": "0.12.0",
+    "@commonpub/server": "2.64.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",