@commonpub/layer 0.82.0 → 0.83.0

package/components/ShareToHubModal.vue

@@ -42,6 +42,7 @@ async function handleShare(): Promise<void> {
 </script>
 
 <template>
+  <Teleport to="body">
   <div class="cpub-modal-backdrop" @click.self="emit('close')">
     <div ref="contentRef" class="cpub-modal-content" role="dialog" aria-modal="true" aria-labelledby="cpub-share-hub-title">
       <div class="cpub-modal-header">
@@ -83,6 +84,7 @@ async function handleShare(): Promise<void> {
       </template>
     </div>
   </div>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -90,7 +92,7 @@ async function handleShare(): Promise<void> {
   position: fixed;
   inset: 0;
   background: var(--color-surface-scrim, rgba(0,0,0,0.5));
-  z-index: 1000;
+  z-index: var(--z-modal-backdrop);
   display: flex;
   align-items: center;
   justify-content: center;

package/components/admin/layouts/AdminLayoutsPalette.vue

@@ -13,9 +13,12 @@
  */
 import { computed } from 'vue';
 import { useSectionRegistry } from '../../../sections/registry';
-import type { SectionCategory } from '@commonpub/ui';
+import type { SectionCategory, SectionDefinition } from '@commonpub/ui';
 import AdminLayoutsPaletteTile from './AdminLayoutsPaletteTile.vue';
 
+// Forward a tile's keyboard-insert request up to the editor page.
+const emit = defineEmits<{ insert: [SectionDefinition] }>();
+
 const CATEGORY_LABELS: Record<SectionCategory, string> = {
   layout: 'Layout',
   content: 'Content',
@@ -65,6 +68,7 @@ const grouped = computed(() => {
           v-for="section in group.sections"
           :key="section.type"
           :section="section"
+          @insert="emit('insert', $event)"
         />
       </ul>
     </div>

package/components/admin/layouts/AdminLayoutsPaletteTile.vue

@@ -28,6 +28,10 @@ const props = defineProps<{
   section: SectionDefinition;
 }>();
 
+// Keyboard alternative to drag (WCAG 2.1.1): Enter/Space inserts the section.
+// Mouse/touch users drag; keyboard users press to insert into the layout.
+const emit = defineEmits<{ insert: [SectionDefinition] }>();
+
 const tileRef = ref<HTMLElement | null>(null);
 
 // dnd-kit's payload factory takes [index, items]. A palette tile is
@@ -52,8 +56,10 @@ makeDraggable(
     class="cpub-admin-layouts-palette-tile"
     :data-section-type="section.type"
     :data-section-status="section.status ?? 'stable'"
-    :aria-label="`Drag to insert ${section.name} (${section.type}) section`"
+    :aria-label="`Insert ${section.name} (${section.type}) section. Drag onto a row, or press Enter.`"
     tabindex="0"
+    @keydown.enter.prevent="emit('insert', section)"
+    @keydown.space.prevent="emit('insert', section)"
   >
     <i :class="['cpub-admin-layouts-palette-tile-icon', section.icon]"></i>
     <div class="cpub-admin-layouts-palette-tile-body">

package/components/admin/layouts/AdminLayoutsToolbar.vue

@@ -182,7 +182,7 @@ const VIEWPORTS: Array<{ value: 'mobile' | 'tablet' | 'desktop'; icon: string; l
     -->
     <div
       class="cpub-admin-layouts-toolbar-viewport"
-      role="radiogroup"
+      role="group"
       aria-label="Preview viewport"
     >
       <button

package/components/blocks/BlockCompareColumnsView.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * Read-side renderer for the `compareColumns` block — side-by-side guidance
+ * columns (the "Encouraged / Out of scope" do-vs-don't pattern). Each column is
+ * tinted by its tone (positive=green, negative=red, neutral=accent) with a matching
+ * header + per-item icon, plus an optional eyebrow, heading, and footer note.
+ * Registered in BlockContentRenderer's map. All colors via var(--*).
+ */
+import type { CompareColumn, CompareTone } from '../../types/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const eyebrow = computed(() => (typeof props.content.eyebrow === 'string' ? props.content.eyebrow.trim() : ''));
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading.trim() : ''));
+const note = computed(() => (typeof props.content.note === 'string' ? props.content.note.trim() : ''));
+const columns = computed<CompareColumn[]>(() =>
+  Array.isArray(props.content.columns)
+    ? (props.content.columns as CompareColumn[])
+        .filter((c) => c && (c.title?.trim() || (c.items ?? []).some((i) => (i ?? '').trim())))
+        .map((c) => ({ tone: c.tone ?? 'neutral', title: (c.title ?? '').trim(), items: (c.items ?? []).filter((i) => (i ?? '').trim()) }))
+    : [],
+);
+
+const toneIcon = (tone: CompareTone): string =>
+  tone === 'positive' ? 'fa-circle-check' : tone === 'negative' ? 'fa-circle-xmark' : 'fa-circle-info';
+</script>
+
+<template>
+  <section v-if="columns.length" class="cpub-cmp">
+    <p v-if="eyebrow" class="cpub-cmp-eyebrow"><i class="fa-solid fa-circle-dot" aria-hidden="true"></i> {{ eyebrow }}</p>
+    <h3 v-if="heading" class="cpub-cmp-heading">{{ heading }}</h3>
+
+    <div class="cpub-cmp-grid" :style="{ '--cpub-cmp-cols': Math.min(columns.length, 3) }">
+      <div v-for="(c, ci) in columns" :key="ci" class="cpub-cmp-col" :class="`cpub-cmp-${c.tone}`">
+        <p class="cpub-cmp-col-head"><i class="fa-solid" :class="toneIcon(c.tone)" aria-hidden="true"></i> {{ c.title }}</p>
+        <ul class="cpub-cmp-list">
+          <li v-for="(item, ii) in c.items" :key="ii" class="cpub-cmp-item">
+            <i class="fa-solid cpub-cmp-item-icon" :class="toneIcon(c.tone)" aria-hidden="true"></i>
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <p v-if="note" class="cpub-cmp-note"><i class="fa-regular fa-circle-question" aria-hidden="true"></i> {{ note }}</p>
+  </section>
+</template>
+
+<style scoped>
+.cpub-cmp { margin: var(--space-4) 0; }
+.cpub-cmp-eyebrow {
+  font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--accent); margin: 0 0 8px; display: flex; align-items: center; gap: 7px;
+}
+.cpub-cmp-eyebrow i { font-size: 8px; }
+.cpub-cmp-heading { font-size: var(--text-lg); font-weight: 700; color: var(--text); margin: 0 0 16px; line-height: 1.3; }
+
+.cpub-cmp-grid { display: grid; grid-template-columns: repeat(var(--cpub-cmp-cols, 2), 1fr); gap: 16px; }
+
+.cpub-cmp-col {
+  border: var(--border-width-default) solid var(--border); border-radius: var(--radius);
+  padding: 16px 18px; background: var(--surface);
+}
+/* Tone tints — left accent edge + tinted surface, mirroring the callout family. */
+.cpub-cmp-positive { background: var(--green-bg); border-color: var(--green-border); }
+.cpub-cmp-negative { background: var(--red-bg); border-color: var(--red-border); }
+.cpub-cmp-neutral { background: var(--accent-bg); border-color: var(--accent-border); }
+
+.cpub-cmp-col-head {
+  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
+  font-size: var(--text-sm); font-weight: 700;
+}
+.cpub-cmp-positive .cpub-cmp-col-head { color: var(--green); }
+.cpub-cmp-negative .cpub-cmp-col-head { color: var(--red); }
+.cpub-cmp-neutral .cpub-cmp-col-head { color: var(--accent); }
+
+.cpub-cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.cpub-cmp-item { display: flex; gap: 9px; font-size: var(--text-sm); line-height: 1.55; color: var(--text-dim); }
+.cpub-cmp-item-icon { flex-shrink: 0; margin-top: 3px; font-size: 12px; }
+.cpub-cmp-positive .cpub-cmp-item-icon { color: var(--green); }
+.cpub-cmp-negative .cpub-cmp-item-icon { color: var(--red); }
+.cpub-cmp-neutral .cpub-cmp-item-icon { color: var(--accent); }
+
+.cpub-cmp-note {
+  margin: 16px 0 0; padding: 12px 14px; font-size: var(--text-sm); color: var(--text-dim); line-height: 1.55;
+  background: var(--surface2); border: var(--border-width-default) solid var(--border);
+  border-radius: var(--radius); display: flex; gap: 9px; align-items: baseline;
+}
+.cpub-cmp-note i { color: var(--text-faint); flex-shrink: 0; }
+
+@media (max-width: 640px) { .cpub-cmp-grid { grid-template-columns: 1fr; } }
+</style>

package/components/blocks/BlockContentRenderer.vue

@@ -26,6 +26,14 @@ import BlockMathView from './BlockMathView.vue';
 import BlockGalleryView from './BlockGalleryView.vue';
 import BlockSectionHeaderView from './BlockSectionHeaderView.vue';
 import BlockMarkdownView from './BlockMarkdownView.vue';
+import BlockHtmlView from './BlockHtmlView.vue';
+import BlockCriteriaBarView from './BlockCriteriaBarView.vue';
+import BlockTableView from './BlockTableView.vue';
+import BlockTabsView from './BlockTabsView.vue';
+import BlockJudgesShowcaseView from './BlockJudgesShowcaseView.vue';
+import BlockSponsorsView from './BlockSponsorsView.vue';
+import BlockCompareColumnsView from './BlockCompareColumnsView.vue';
+import BlockRoadmapView from './BlockRoadmapView.vue';
 import type { BlockTuple } from '@commonpub/editor';
 
 const props = defineProps<{
@@ -52,6 +60,7 @@ const componentMap: Record<string, unknown> = {
   callout: BlockCalloutView,
   divider: BlockDividerView,
   horizontalRule: BlockDividerView,
+  horizontal_rule: BlockDividerView,
   video: BlockVideoView,
   embed: BlockEmbedView,
   partsList: BlockPartsListView,
@@ -67,6 +76,14 @@ const componentMap: Record<string, unknown> = {
   gallery: BlockGalleryView,
   sectionHeader: BlockSectionHeaderView,
   markdown: BlockMarkdownView,
+  html: BlockHtmlView,
+  criteriaBar: BlockCriteriaBarView,
+  table: BlockTableView,
+  tabs: BlockTabsView,
+  judgesShowcase: BlockJudgesShowcaseView,
+  sponsors: BlockSponsorsView,
+  compareColumns: BlockCompareColumnsView,
+  roadmap: BlockRoadmapView,
 };
 
 const visibleBlocks = computed(() => {

package/components/blocks/BlockCriteriaBarView.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+/**
+ * Read-only view for the `criteriaBar` block — judging criteria as one stacked
+ * weighted bar + legend. Thin wrapper over the shared CpubCriteriaBar so the block,
+ * the editor preview, and the public Judging Criteria section all render identically.
+ */
+import type { CriteriaBarItem } from '../../utils/contestBlocks';
+
+defineProps<{
+  content: { heading?: string; items?: CriteriaBarItem[]; showLegend?: boolean };
+}>();
+</script>
+
+<template>
+  <CpubCriteriaBar
+    :items="content.items"
+    :heading="content.heading"
+    :show-legend="content.showLegend !== false"
+    class="cpub-block-cbar"
+  />
+</template>
+
+<style scoped>
+.cpub-block-cbar { margin: 0 0 18px; }
+</style>

package/components/blocks/BlockGalleryView.vue

@@ -46,6 +46,11 @@ const images = computed<GalleryImage[]>(() => {
   object-fit: cover;
   display: block;
   border: var(--border-width-default) solid var(--border);
+  /* Defend against the global `.cpub-prose img` rule (prose.css) leaking its
+     box-shadow + margin into this scoped block when rendered inside prose
+     (the margin would otherwise disrupt the gallery grid). */
+  box-shadow: none;
+  margin: 0;
 }
 
 .cpub-gallery-caption {

package/components/blocks/BlockHtmlView.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * Read-only view for the `html` block — author-supplied raw HTML rendered through
+ * the rich-HTML sanitizer (allowlist; scripts, event handlers, and unsafe URLs are
+ * stripped) with color neutralization so a pasted light-mode snippet stays readable
+ * in dark mode. Same security + theming path as the contest "Full HTML" fields and
+ * CustomHtmlSection; replaces the renderer's anonymous `content.html` fallback for
+ * this block type.
+ */
+import { sanitizeRichHtml } from '../../composables/useSanitize';
+
+const props = defineProps<{ content: { html?: string } }>();
+
+const safeHtml = computed(() =>
+  typeof props.content.html === 'string' ? sanitizeRichHtml(props.content.html, { neutralizeColors: true }) : '',
+);
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html — sanitizeRichHtml is the XSS barrier -->
+  <div v-if="safeHtml" class="cpub-md-html cpub-block-html" v-html="safeHtml" />
+</template>
+
+<style scoped>
+.cpub-block-html { margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
+</style>

package/components/blocks/BlockImageView.vue

@@ -53,6 +53,10 @@ const size = computed<ImageSize>(() => {
   height: auto;
   display: block;
   border: var(--border-width-default) solid var(--border);
+  /* Defend against the global `.cpub-prose img` rule (prose.css) leaking its
+     box-shadow + margin into this scoped block when rendered inside prose. */
+  box-shadow: none;
+  margin: 0;
 }
 
 .cpub-image-caption {

package/components/blocks/BlockJudgesShowcaseView.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+/**
+ * Read-side renderer for the `judgesShowcase` contest block — avatar + name +
+ * title + bio cards for the contest overview. Registered in BlockContentRenderer's
+ * map; receives the block content object as `content`. All colors via var(--*).
+ */
+import type { JudgesShowcaseContent, JudgeShowcaseEntry } from '../../types/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading.trim() : ''));
+const judges = computed<JudgeShowcaseEntry[]>(() =>
+  Array.isArray(props.content.judges) ? (props.content.judges as JudgeShowcaseEntry[]).filter((j) => j && j.name) : [],
+);
+
+const initial = (name: string): string => (name || '?').charAt(0).toUpperCase();
+const safeLink = (link?: string): string | undefined => (link && /^https?:\/\//i.test(link) ? link : undefined);
+</script>
+
+<template>
+  <div v-if="judges.length" class="cpub-jshow">
+    <h3 v-if="heading" class="cpub-jshow-heading">{{ heading }}</h3>
+    <div class="cpub-jshow-grid">
+      <div v-for="(j, i) in judges" :key="i" class="cpub-jshow-card">
+        <div class="cpub-jshow-av">
+          <img v-if="j.avatarUrl" :src="j.avatarUrl" :alt="j.name" class="cpub-jshow-av-img" />
+          <span v-else>{{ initial(j.name) }}</span>
+        </div>
+        <a v-if="safeLink(j.link)" :href="safeLink(j.link)" target="_blank" rel="noopener noreferrer" class="cpub-jshow-name">{{ j.name }}</a>
+        <span v-else class="cpub-jshow-name">{{ j.name }}</span>
+        <div v-if="j.title" class="cpub-jshow-title">{{ j.title }}</div>
+        <p v-if="j.bio" class="cpub-jshow-bio">{{ j.bio }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-jshow { margin: var(--space-4) 0; }
+.cpub-jshow-heading { font-size: var(--text-md); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-3); color: var(--text); }
+.cpub-jshow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
+.cpub-jshow-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: var(--space-4); text-align: center; box-shadow: var(--shadow-md); }
+.cpub-jshow-av { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-2); display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: 700; font-family: var(--font-mono); border: var(--border-width-default) solid var(--border); background: var(--surface3); color: var(--text-dim); overflow: hidden; }
+.cpub-jshow-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-jshow-name { font-size: var(--text-sm); font-weight: 600; color: var(--text); text-decoration: none; display: block; }
+a.cpub-jshow-name:hover { color: var(--accent); }
+.cpub-jshow-title { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-top: 3px; }
+.cpub-jshow-bio { font-size: var(--text-sm); color: var(--text-dim); line-height: 1.6; margin: var(--space-2) 0 0; }
+
+@media (max-width: 768px) { .cpub-jshow-grid { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 480px) { .cpub-jshow-grid { grid-template-columns: 1fr; } }
+</style>

package/components/blocks/BlockRoadmapView.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * Read-side renderer for the `roadmap` block — a vertical schedule timeline with a
+ * connector line + nodes. Each milestone shows a date, an optional badge, a title,
+ * and a blurb; node + date color follow the item's tone (default=hollow accent
+ * ring, accent=filled accent, highlight=filled warm "finale"). Registered in
+ * BlockContentRenderer's map. All colors via var(--*).
+ */
+import type { RoadmapItem, RoadmapTone } from '../../types/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const eyebrow = computed(() => (typeof props.content.eyebrow === 'string' ? props.content.eyebrow.trim() : ''));
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading.trim() : ''));
+const items = computed<RoadmapItem[]>(() =>
+  Array.isArray(props.content.items)
+    ? (props.content.items as RoadmapItem[]).filter((i) => i && ((i.title ?? '').trim() || (i.date ?? '').trim()))
+    : [],
+);
+
+const nodeColor = (tone?: RoadmapTone): string => (tone === 'highlight' ? 'var(--yellow)' : 'var(--accent)');
+const filled = (tone?: RoadmapTone): boolean => tone === 'accent' || tone === 'highlight';
+</script>
+
+<template>
+  <section v-if="items.length" class="cpub-rmap">
+    <p v-if="eyebrow" class="cpub-rmap-eyebrow"><i class="fa-regular fa-calendar" aria-hidden="true"></i> {{ eyebrow }}</p>
+    <h3 v-if="heading" class="cpub-rmap-heading">{{ heading }}</h3>
+
+    <ol class="cpub-rmap-list">
+      <li v-for="(item, i) in items" :key="i" class="cpub-rmap-item" :class="`cpub-rmap-${item.tone ?? 'default'}`">
+        <div class="cpub-rmap-rail" aria-hidden="true">
+          <span class="cpub-rmap-dot" :style="{ borderColor: nodeColor(item.tone), background: filled(item.tone) ? nodeColor(item.tone) : 'var(--bg)' }" />
+        </div>
+        <div class="cpub-rmap-body">
+          <div v-if="(item.date ?? '').trim() || (item.badge ?? '').trim()" class="cpub-rmap-meta">
+            <span v-if="(item.date ?? '').trim()" class="cpub-rmap-date" :style="{ color: nodeColor(item.tone) }">{{ item.date }}</span>
+            <span v-if="(item.badge ?? '').trim()" class="cpub-rmap-badge">{{ item.badge }}</span>
+          </div>
+          <p v-if="(item.title ?? '').trim()" class="cpub-rmap-title">{{ item.title }}</p>
+          <p v-if="(item.description ?? '').trim()" class="cpub-rmap-desc">{{ item.description }}</p>
+        </div>
+      </li>
+    </ol>
+  </section>
+</template>
+
+<style scoped>
+.cpub-rmap { margin: var(--space-4) 0; }
+.cpub-rmap-eyebrow {
+  font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--accent); margin: 0 0 8px; display: flex; align-items: center; gap: 7px;
+}
+.cpub-rmap-eyebrow i { font-size: 11px; }
+.cpub-rmap-heading { font-size: var(--text-lg); font-weight: 700; color: var(--text); margin: 0 0 18px; line-height: 1.3; }
+
+.cpub-rmap-list { list-style: none; margin: 0; padding: 0; }
+.cpub-rmap-item { display: grid; grid-template-columns: 18px 1fr; gap: 14px; }
+/* The connector line lives on the rail column; it runs from each node down into
+   the gap to meet the next, and is trimmed on the last item. */
+.cpub-rmap-rail { position: relative; display: flex; justify-content: center; }
+.cpub-rmap-rail::before {
+  content: ''; position: absolute; top: 4px; bottom: -8px; left: 50%; width: 2px;
+  transform: translateX(-50%); background: var(--border);
+}
+.cpub-rmap-item:last-child .cpub-rmap-rail::before { display: none; }
+.cpub-rmap-dot {
+  position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 3px; border-radius: 50%;
+  border: 2px solid var(--accent); background: var(--bg); box-sizing: border-box; flex-shrink: 0;
+}
+.cpub-rmap-body { padding-bottom: 22px; min-width: 0; }
+.cpub-rmap-item:last-child .cpub-rmap-body { padding-bottom: 0; }
+.cpub-rmap-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
+.cpub-rmap-date { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+.cpub-rmap-badge {
+  font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-dim); background: var(--surface2); border: var(--border-width-default) solid var(--border2);
+  padding: 1px 6px;
+}
+.cpub-rmap-title { font-size: var(--text-md); font-weight: 700; color: var(--text); margin: 0; line-height: 1.35; }
+.cpub-rmap-desc { font-size: var(--text-sm); color: var(--text-dim); line-height: 1.55; margin: 4px 0 0; }
+
+.cpub-rmap-highlight .cpub-rmap-title { color: var(--text); }
+</style>

package/components/blocks/BlockSponsorsView.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+/**
+ * Read-side renderer for the `sponsors` block — a logo wall in a card with an
+ * optional eyebrow heading. Logos that share a `tier` group together (tier labels
+ * show only when at least one logo is tiered). Registered in BlockContentRenderer's
+ * map. All colors via var(--*).
+ */
+import type { SponsorLogo } from '../../types/contestBlocks';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const heading = computed(() => (typeof props.content.heading === 'string' ? props.content.heading.trim() : ''));
+const logos = computed<SponsorLogo[]>(() =>
+  Array.isArray(props.content.logos) ? (props.content.logos as SponsorLogo[]).filter((l) => l && l.src) : [],
+);
+const safeLink = (url?: string): string | undefined => (url && /^https?:\/\//i.test(url) ? url : undefined);
+
+// Group by tier, preserving first-seen order; untiered logos collect under ''.
+const tiers = computed(() => {
+  const order: string[] = [];
+  const map = new Map<string, SponsorLogo[]>();
+  for (const l of logos.value) {
+    const key = (l.tier ?? '').trim();
+    if (!map.has(key)) { map.set(key, []); order.push(key); }
+    map.get(key)!.push(l);
+  }
+  return order.map((label) => ({ label, logos: map.get(label)! }));
+});
+const hasTiers = computed(() => tiers.value.some((t) => t.label));
+</script>
+
+<template>
+  <section v-if="logos.length" class="cpub-spon">
+    <p v-if="heading" class="cpub-spon-eyebrow">{{ heading }}</p>
+    <div class="cpub-spon-card">
+      <div v-for="(t, ti) in tiers" :key="ti" class="cpub-spon-tier">
+        <p v-if="hasTiers && t.label" class="cpub-spon-tier-label">{{ t.label }}</p>
+        <ul class="cpub-spon-row">
+          <li v-for="(l, i) in t.logos" :key="i" class="cpub-spon-item">
+            <a
+              v-if="safeLink(l.url)"
+              :href="safeLink(l.url)"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="cpub-spon-link"
+              :aria-label="l.alt || 'Sponsor'"
+            >
+              <img :src="l.src" :alt="l.alt || 'Sponsor'" class="cpub-spon-img" loading="lazy" />
+            </a>
+            <img v-else :src="l.src" :alt="l.alt || 'Sponsor'" class="cpub-spon-img" loading="lazy" />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-spon { margin: var(--space-4) 0; }
+.cpub-spon-eyebrow {
+  text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint); margin: 0 0 12px;
+}
+.cpub-spon-card {
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  border-radius: var(--radius); box-shadow: var(--shadow-md);
+  padding: 24px 28px; display: flex; flex-direction: column; gap: 20px;
+}
+.cpub-spon-tier { display: flex; flex-direction: column; gap: 10px; }
+.cpub-spon-tier-label {
+  text-align: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); margin: 0;
+}
+.cpub-spon-row {
+  list-style: none; margin: 0; padding: 0;
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 44px;
+}
+.cpub-spon-item { display: flex; align-items: center; }
+/* Neutralize the .cpub-prose a/img leak (border-bottom underline, border box, shadow, margin). */
+.cpub-spon-link { display: flex; align-items: center; transition: opacity 0.15s; border-bottom: 0; text-decoration: none; }
+.cpub-spon-link:hover { opacity: 0.7; border-bottom: 0; }
+.cpub-spon-img { max-height: 48px; max-width: 180px; width: auto; height: auto; object-fit: contain; display: block; border: 0; box-shadow: none; margin: 0; }
+
+@media (max-width: 768px) {
+  .cpub-spon-card { padding: 18px; }
+  .cpub-spon-row { gap: 18px 28px; }
+  .cpub-spon-img { max-height: 38px; max-width: 130px; }
+}
+</style>

package/components/blocks/BlockTableView.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * Read-only view for the `table` block — a responsive data table (header row +
+ * body rows). Cells are plain text (rendered via `{{ }}`, so HTML is escaped — no
+ * injection surface). Horizontally scrolls on narrow viewports.
+ */
+const props = defineProps<{
+  content: { caption?: string; header?: string[]; rows?: string[][] };
+}>();
+
+const header = computed<string[]>(() => (Array.isArray(props.content.header) ? props.content.header : []));
+const rows = computed<string[][]>(() => (Array.isArray(props.content.rows) ? props.content.rows : []));
+const cols = computed(() => Math.max(header.value.length, ...rows.value.map((r) => r.length), 0));
+const hasContent = computed(() => header.value.some((h) => (h ?? '').trim()) || rows.value.length > 0);
+</script>
+
+<template>
+  <figure v-if="hasContent" class="cpub-tbl">
+    <figcaption v-if="content.caption" class="cpub-tbl-caption">{{ content.caption }}</figcaption>
+    <div class="cpub-tbl-scroll">
+      <table>
+        <thead v-if="header.length">
+          <tr>
+            <th v-for="(h, i) in header" :key="i" scope="col">{{ h }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, r) in rows" :key="r">
+            <td v-for="c in cols" :key="c">{{ row[c - 1] ?? '' }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </figure>
+</template>
+
+<style scoped>
+.cpub-tbl { margin: 0 0 18px; }
+.cpub-tbl-caption { font-size: 12px; color: var(--text-faint); margin-bottom: 8px; font-style: italic; }
+.cpub-tbl-scroll { overflow-x: auto; border: var(--border-width-default) solid var(--border); }
+.cpub-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; }
+.cpub-tbl thead th {
+  text-align: left; background: var(--surface2); color: var(--text); font-weight: 700;
+  font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
+  padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border); vertical-align: top;
+}
+.cpub-tbl tbody td { padding: 10px 14px; border-top: var(--border-width-default) solid var(--border); color: var(--text-dim); vertical-align: top; }
+.cpub-tbl tbody tr:first-child td { border-top: none; }
+</style>