@commonpub/layer 0.85.0 → 0.86.1

package/components/blocks/BlockEmbedView.vue

@@ -2,10 +2,16 @@
 const props = defineProps<{ content: Record<string, unknown> }>();
 
 const embedUrl = computed(() => toEmbedUrl(props.content.url as string));
+
+type EmbedSize = 's' | 'm' | 'l' | 'full';
+const size = computed<EmbedSize>(() => {
+  const v = props.content.size;
+  return v === 's' || v === 'm' || v === 'l' || v === 'full' ? v : 'l';
+});
 </script>
 
 <template>
-  <div v-if="embedUrl" class="cpub-block-embed">
+  <div v-if="embedUrl" class="cpub-block-embed" :class="`cpub-embed-size-${size}`">
     <div class="cpub-embed-label">
       <i class="fa-solid fa-globe"></i> Embed
     </div>
@@ -17,11 +23,17 @@ const embedUrl = computed(() => toEmbedUrl(props.content.url as string));
 
 <style scoped>
 .cpub-block-embed {
-  margin: 24px 0;
+  /* width:100% so max-width caps + margin:auto centers in the flex-column renderer. */
+  width: 100%;
+  margin: 24px auto;
   border: var(--border-width-default) solid var(--border);
   overflow: hidden;
   box-shadow: var(--shadow-md);
 }
+.cpub-embed-size-s { max-width: 320px; }
+.cpub-embed-size-m { max-width: 540px; }
+.cpub-embed-size-l { max-width: 760px; }
+.cpub-embed-size-full { max-width: 100%; }
 
 .cpub-embed-label {
   padding: 6px 12px;
@@ -44,17 +56,20 @@ const embedUrl = computed(() => toEmbedUrl(props.content.url as string));
 .cpub-embed-label i { color: var(--accent); }
 
 .cpub-embed-wrap {
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
+  display: block;
+  line-height: 0;
   border-radius: 0;
 }
 
+/* 16:9 via aspect-ratio so a prose `iframe { height: auto }` rule cooperates with
+   the ratio rather than collapsing the iframe (see BlockVideoView). */
 .cpub-embed-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: block;
   width: 100%;
-  height: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  border: 0;
+  background: var(--text);
+  border-radius: 0;
 }
 </style>

package/components/blocks/BlockVideoView.vue

@@ -4,6 +4,14 @@ const props = defineProps<{ content: Record<string, unknown> }>();
 const url = computed(() => (props.content.url as string) || '');
 const embedUrl = computed(() => toEmbedUrl(url.value));
 
+// Rendered-width preset (mirrors images). Missing ⇒ 'l' (760px, reading width),
+// so a video doesn't stretch full-bleed and dominate the column.
+type VideoSize = 's' | 'm' | 'l' | 'full';
+const size = computed<VideoSize>(() => {
+  const v = props.content.size;
+  return v === 's' || v === 'm' || v === 'l' || v === 'full' ? v : 'l';
+});
+
 const platform = computed(() => {
   const u = url.value;
   if (u.includes('youtube') || u.includes('youtu.be')) return 'YouTube';
@@ -13,7 +21,7 @@ const platform = computed(() => {
 </script>
 
 <template>
-  <div v-if="embedUrl" class="cpub-block-video">
+  <div v-if="embedUrl" class="cpub-block-video" :class="`cpub-video-size-${size}`">
     <div class="cpub-video-label">
       <i class="fa-solid fa-film"></i> {{ platform }}
     </div>
@@ -33,11 +41,20 @@ const platform = computed(() => {
 
 <style scoped>
 .cpub-block-video {
-  margin: 24px 0;
+  /* width:100% is required so max-width caps + margin:auto centers even inside the
+     flex-column block renderer (without it, an auto-margin flex item with no
+     intrinsic width shrinks to its label). */
+  width: 100%;
+  margin: 24px auto;
   border: var(--border-width-default) solid var(--border);
   overflow: hidden;
   box-shadow: var(--shadow-md);
 }
+/* Width presets (centered via margin:auto). Match the image-block caps. */
+.cpub-video-size-s { max-width: 320px; }
+.cpub-video-size-m { max-width: 540px; }
+.cpub-video-size-l { max-width: 760px; }
+.cpub-video-size-full { max-width: 100%; }
 
 .cpub-video-label {
   padding: 6px 12px;
@@ -61,18 +78,22 @@ const platform = computed(() => {
 .cpub-video-label i { color: var(--accent); }
 
 .cpub-video-wrap {
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
-  background: var(--text);
+  display: block;
+  line-height: 0;
   border-radius: 0;
 }
 
+/* 16:9 via aspect-ratio on the iframe (not the legacy padding-bottom hack), so a
+   prose `iframe { height: auto }` rule (ProjectView/ArticleView/ExplainerView)
+   COOPERATES with the ratio instead of collapsing the iframe inside a 0-height
+   wrap and leaving black space below it. */
 .cpub-video-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: block;
   width: 100%;
-  height: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  border: 0;
+  background: var(--text);
+  border-radius: 0;
 }
 </style>

package/components/contest/ContestBannerAdjust.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
 /**
  * ContestBannerAdjust — non-destructive framing control for a contest banner or
- * cover (P4). A live preview at the target aspect ratio + a zoom slider (0 = fit/
- * contain) + drag-to-reposition. Writes a `ContestImageMeta` ({ zoom, x, y })
- * v-model; the original image is never re-cropped. Render parity with the public
- * hero is guaranteed by sharing `imageFramingStyle` (utils/contestImage.ts).
+ * cover (P4). Three explicit modes so the choice (and what persists) is never
+ * ambiguous:
+ *   • Fill (default)  → meta = null  → object-fit: cover (fills the band, crops).
+ *   • Fit (whole)     → meta = {zoom:0} → the WHOLE image shows (no crop). On the
+ *                        public hero the band grows to the image; here it previews
+ *                        contained.
+ *   • Zoom            → meta = {zoom>0, x, y} → cover + scale + drag-to-reposition.
+ *
+ * The earlier single slider defaulted a null banner to the "Fit" position without
+ * persisting it (moving the slider to where it already sat emitted nothing), so a
+ * banner that looked "set to Fit" stayed null → cover → cropped. Explicit mode
+ * buttons each emit a concrete value, which fixes that. Render parity with the
+ * public hero is via the shared `imageFramingStyle` / `isWholeImage`.
  */
 import type { ContestImageMeta } from '@commonpub/schema';
-import { imageFramingStyle, defaultImageMeta } from '../../utils/contestImage';
+import { imageFramingStyle } from '../../utils/contestImage';
 
 defineProps<{
   imageUrl: string;
@@ -17,21 +26,36 @@ defineProps<{
 }>();
 const meta = defineModel<ContestImageMeta | null>({ default: null });
 
+const ZOOM_MIN = 0.1;
 const ZOOM_MAX = 1.5;
-const current = computed<ContestImageMeta>(() => meta.value ?? defaultImageMeta());
+const ZOOM_DEFAULT = 0.3;
+
+type Mode = 'fill' | 'fit' | 'zoom';
+const mode = computed<Mode>(() => {
+  if (!meta.value) return 'fill';
+  return meta.value.zoom <= 0 ? 'fit' : 'zoom';
+});
 const framing = computed(() => imageFramingStyle(meta.value));
+const pos = computed(() => ({ x: meta.value?.x ?? 50, y: meta.value?.y ?? 50 }));
 
-function patch(p: Partial<ContestImageMeta>): void {
-  meta.value = { ...current.value, ...p };
+function setMode(next: Mode): void {
+  if (next === 'fill') meta.value = null;
+  else if (next === 'fit') meta.value = { zoom: 0, x: pos.value.x, y: pos.value.y };
+  else meta.value = { zoom: meta.value && meta.value.zoom > 0 ? meta.value.zoom : ZOOM_DEFAULT, x: pos.value.x, y: pos.value.y };
 }
 function onZoom(e: Event): void {
-  patch({ zoom: Number((e.target as HTMLInputElement).value) });
-}
-function reset(): void {
-  meta.value = null;
+  const zoom = Math.max(ZOOM_MIN, Number((e.target as HTMLInputElement).value));
+  meta.value = { zoom, x: pos.value.x, y: pos.value.y };
 }
 
-// ─── Drag to reposition (sets x/y as percent) ───
+const MODES: { key: Mode; label: string; icon: string; hint: string }[] = [
+  { key: 'fill', label: 'Fill', icon: 'fa-expand', hint: 'Fills the banner and crops the edges.' },
+  { key: 'fit', label: 'Fit', icon: 'fa-compress', hint: 'Shows the whole image, never cropped.' },
+  { key: 'zoom', label: 'Zoom', icon: 'fa-magnifying-glass-plus', hint: 'Zoom in and drag to choose what shows.' },
+];
+const activeHint = computed(() => MODES.find((m) => m.key === mode.value)?.hint ?? '');
+
+// ─── Drag to reposition (Zoom mode only) ───
 const boxRef = ref<HTMLElement | null>(null);
 const dragging = ref(false);
 let startX = 0;
@@ -40,22 +64,21 @@ let startPosX = 50;
 let startPosY = 50;
 
 function onPointerDown(e: PointerEvent): void {
-  if (!boxRef.value) return;
+  if (mode.value !== 'zoom' || !boxRef.value) return;
   dragging.value = true;
   startX = e.clientX;
   startY = e.clientY;
-  startPosX = current.value.x;
-  startPosY = current.value.y;
+  startPosX = pos.value.x;
+  startPosY = pos.value.y;
   document.addEventListener('pointermove', onPointerMove);
   document.addEventListener('pointerup', onPointerUp);
 }
 function onPointerMove(e: PointerEvent): void {
-  if (!dragging.value || !boxRef.value) return;
+  if (!dragging.value || !boxRef.value || !meta.value) return;
   const rect = boxRef.value.getBoundingClientRect();
-  // Drag right reveals the LEFT of the image (object-position decreases), so invert.
   const dx = ((e.clientX - startX) / Math.max(1, rect.width)) * 100;
   const dy = ((e.clientY - startY) / Math.max(1, rect.height)) * 100;
-  patch({ x: clamp(startPosX - dx), y: clamp(startPosY - dy) });
+  meta.value = { zoom: meta.value.zoom, x: clamp(startPosX - dx), y: clamp(startPosY - dy) };
 }
 function onPointerUp(): void {
   dragging.value = false;
@@ -69,53 +92,66 @@ onUnmounted(() => {
   document.removeEventListener('pointermove', onPointerMove);
   document.removeEventListener('pointerup', onPointerUp);
 });
-
-const zoomLabel = computed(() => (current.value.zoom <= 0 ? 'Fit' : `${Math.round(current.value.zoom * 100)}%`));
 </script>
 
 <template>
   <div class="cpub-ba">
+    <div class="cpub-ba-modes" role="group" :aria-label="`${label ?? 'Image'} framing`">
+      <button
+        v-for="m in MODES"
+        :key="m.key"
+        type="button"
+        class="cpub-ba-mode"
+        :class="{ 'cpub-ba-mode-active': mode === m.key }"
+        :aria-pressed="mode === m.key"
+        @click="setMode(m.key)"
+      >
+        <i class="fa-solid" :class="m.icon"></i> {{ m.label }}
+      </button>
+    </div>
+
     <div
       ref="boxRef"
       class="cpub-ba-box"
-      :class="{ 'cpub-ba-drag': dragging }"
+      :class="{ 'cpub-ba-drag': mode === 'zoom', 'cpub-ba-dragging': dragging }"
       :style="{ aspectRatio: aspect ?? '4 / 1' }"
       @pointerdown="onPointerDown"
     >
       <img :src="imageUrl" :alt="label ?? 'Image preview'" class="cpub-ba-img" :style="framing" draggable="false" />
-      <span class="cpub-ba-hint"><i class="fa-solid fa-up-down-left-right"></i> Drag to reposition</span>
-    </div>
-    <div class="cpub-ba-controls">
-      <label class="cpub-ba-zoom">
-        <span class="cpub-ba-zoom-label">Zoom <strong>{{ zoomLabel }}</strong></span>
-        <input
-          type="range"
-          min="0"
-          :max="ZOOM_MAX"
-          step="0.05"
-          :value="current.zoom"
-          :aria-label="`${label ?? 'Image'} zoom (0 is fit)`"
-          @input="onZoom"
-        />
-      </label>
-      <button type="button" class="cpub-btn cpub-btn-sm cpub-ba-reset" :disabled="!meta" @click="reset">
-        <i class="fa-solid fa-rotate-left"></i> Reset
-      </button>
+      <span v-if="mode === 'zoom'" class="cpub-ba-hint"><i class="fa-solid fa-up-down-left-right"></i> Drag to reposition</span>
     </div>
-    <p class="cpub-ba-help">Zoom 0 fits the whole image. Increase to fill and crop; drag the preview to choose what shows.</p>
+
+    <label v-if="mode === 'zoom'" class="cpub-ba-zoom">
+      <span class="cpub-ba-zoom-label">Zoom</span>
+      <input
+        type="range"
+        :min="ZOOM_MIN"
+        :max="ZOOM_MAX"
+        step="0.05"
+        :value="meta?.zoom ?? ZOOM_DEFAULT"
+        :aria-label="`${label ?? 'Image'} zoom level`"
+        @input="onZoom"
+      />
+    </label>
+
+    <p class="cpub-ba-help">{{ activeHint }}</p>
   </div>
 </template>
 
 <style scoped>
 .cpub-ba { display: flex; flex-direction: column; gap: 8px; }
-.cpub-ba-box { position: relative; width: 100%; overflow: hidden; border: var(--border-width-default) solid var(--border); background: var(--surface2); cursor: grab; touch-action: none; }
-.cpub-ba-drag { cursor: grabbing; }
+.cpub-ba-modes { display: inline-flex; border: var(--border-width-default) solid var(--border); align-self: flex-start; }
+.cpub-ba-mode { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; background: transparent; border: none; border-right: var(--border-width-default) solid var(--border); cursor: pointer; font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
+.cpub-ba-mode:last-child { border-right: none; }
+.cpub-ba-mode:hover { background: var(--surface2); color: var(--text-dim); }
+.cpub-ba-mode-active { background: var(--accent-bg); color: var(--accent); }
+.cpub-ba-box { position: relative; width: 100%; overflow: hidden; border: var(--border-width-default) solid var(--border); background: var(--surface2); touch-action: none; }
+.cpub-ba-drag { cursor: grab; }
+.cpub-ba-dragging { cursor: grabbing; }
 .cpub-ba-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
 .cpub-ba-hint { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text); background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 3px 7px; display: inline-flex; align-items: center; gap: 5px; opacity: .85; pointer-events: none; }
-.cpub-ba-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
-.cpub-ba-zoom { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
+.cpub-ba-zoom { display: flex; align-items: center; gap: 8px; }
 .cpub-ba-zoom-label { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); white-space: nowrap; }
 .cpub-ba-zoom input[type='range'] { flex: 1; accent-color: var(--accent); }
-.cpub-ba-reset { flex-shrink: 0; }
 .cpub-ba-help { margin: 0; font-size: 11px; color: var(--text-faint); line-height: 1.5; }
 </style>

package/components/contest/ContestEditor.vue

@@ -64,7 +64,7 @@ const editor = useContestEditor({
 const {
   title, slugInput, slugTouched, subheading, descriptionBlocks, rulesBlocks, prizesBlocks,
   description, descriptionFormat, rules, rulesFormat, prizesDescription, prizesDescriptionFormat,
-  bannerUrl, coverImageUrl, bannerMeta, coverMeta, startDate, endDate, judgingEndDate, communityVotingEnabled,
+  bannerUrl, coverImageUrl, bannerMeta, coverMeta, coverPlacement, startDate, endDate, judgingEndDate, communityVotingEnabled,
   judgingVisibility, eligibleContentTypes, maxEntriesPerUser, visibility, visibleToRoles,
   showPrizes, prizes, criteria, stages, currentStageId,
   saving, formDirty, dateError, canSubmit, slugify, toggleType, toggleRole, addPrize, removePrize, prizeLabel, save,
@@ -262,6 +262,8 @@ const showBannerAdjust = ref(false);
 const showCoverAdjust = ref(false);
 const bannerPreviewStyle = computed(() => imageFramingStyle(bannerMeta.value));
 const coverPreviewStyle = computed(() => imageFramingStyle(coverMeta.value));
+const bannerPreviewWhole = computed(() => isWholeImage(bannerMeta.value));
+const coverPreviewWhole = computed(() => isWholeImage(coverMeta.value));
 
 // --- Right-rail collapsible sections ---
 const openSections = ref<Record<string, boolean>>({
@@ -486,8 +488,8 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
           <!-- Banner + cover render inline at the top of the Overview body only. -->
           <template #overview-lead>
             <div class="cpub-ce-media">
-              <div class="cpub-ce-banner" :class="{ 'has-image': !!bannerUrl }">
-                <img v-if="bannerUrl" :src="bannerUrl" alt="Contest banner" class="cpub-ce-banner-img" :style="bannerPreviewStyle" />
+              <div class="cpub-ce-banner" :class="{ 'has-image': !!bannerUrl, 'cpub-ce-banner--whole': bannerPreviewWhole }">
+                <img v-if="bannerUrl" :src="bannerUrl" alt="Contest banner" class="cpub-ce-banner-img" :style="bannerPreviewWhole ? undefined : bannerPreviewStyle" />
                 <div v-else class="cpub-ce-media-placeholder">
                   <i class="fa-regular fa-image"></i>
                   <span>Banner image</span>
@@ -503,8 +505,8 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
                 </div>
 
                 <!-- Cover thumbnail, inset over the banner's lower-left (mirrors the public hero). -->
-                <div class="cpub-ce-cover" :class="{ 'has-image': !!coverImageUrl }">
-                  <img v-if="coverImageUrl" :src="coverImageUrl" alt="Contest cover" class="cpub-ce-cover-img" :style="coverPreviewStyle" />
+                <div class="cpub-ce-cover" :class="{ 'has-image': !!coverImageUrl, 'cpub-ce-cover--whole': coverPreviewWhole }">
+                  <img v-if="coverImageUrl" :src="coverImageUrl" alt="Contest cover" class="cpub-ce-cover-img" :style="coverPreviewWhole ? undefined : coverPreviewStyle" />
                   <div v-else class="cpub-ce-media-placeholder cpub-ce-media-placeholder-sm">
                     <i class="fa-regular fa-image"></i>
                     <span>Cover</span>
@@ -524,7 +526,16 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
               <ContestBannerAdjust v-if="bannerUrl && showBannerAdjust" v-model="bannerMeta" :image-url="bannerUrl" aspect="4 / 1" label="Banner" class="cpub-ce-adjust" />
               <ContestBannerAdjust v-if="coverImageUrl && showCoverAdjust" v-model="coverMeta" :image-url="coverImageUrl" aspect="4 / 3" label="Cover" class="cpub-ce-adjust" />
 
-              <p class="cpub-form-hint cpub-ce-media-hint">Banner is the wide hero (~4:1). Cover is the card thumbnail in listings (~4:3); it falls back to the banner if unset. Use Adjust to zoom and reposition without re-cropping.</p>
+              <!-- Where the cover image shows on the public page. -->
+              <label v-if="coverImageUrl" class="cpub-ce-cover-place">
+                <span class="cpub-form-label" style="margin: 0;">Show cover</span>
+                <select :value="coverPlacement ?? 'about'" class="cpub-form-input" @change="coverPlacement = (($event.target as HTMLSelectElement).value as 'about' | 'hero')">
+                  <option value="about">In the Overview "About" section</option>
+                  <option value="hero">In the hero, under the subheading</option>
+                </select>
+              </label>
+
+              <p class="cpub-form-hint cpub-ce-media-hint">Banner is the wide hero (~4:1). Cover is the card thumbnail in listings (~4:3); it falls back to the banner if unset. Use Adjust to set Fill, Fit (whole image), or Zoom without re-cropping.</p>
             </div>
           </template>
 
@@ -890,6 +901,12 @@ const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) =>
 .cpub-ce-media-btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
 .cpub-ce-media-hint { margin: 0; }
 .cpub-ce-adjust { margin-top: 8px; padding: 10px; border: var(--border-width-default) solid var(--border); background: var(--surface2); }
+.cpub-ce-cover-place { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+.cpub-ce-cover-place .cpub-form-input { width: auto; flex: 1; min-width: 220px; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-sans); }
+/* Fit (whole image) previews: let the box grow to the image, no crop. */
+.cpub-ce-banner--whole { aspect-ratio: auto; max-height: 300px; }
+.cpub-ce-banner--whole .cpub-ce-banner-img { height: auto; max-height: 300px; object-fit: contain; }
+.cpub-ce-cover--whole .cpub-ce-cover-img { object-fit: contain; }
 .cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
 
 /* --- Responsive: stack the rail under the body on narrow viewports --- */

package/components/contest/ContestHero.vue

@@ -19,6 +19,15 @@ const c = computed(() => props.contest);
 // Non-destructive banner framing (P4). null/absent ⇒ the legacy cover fit, so
 // existing contests look identical until an organiser adjusts framing.
 const bannerStyle = computed(() => imageFramingStyle(c.value?.bannerMeta ?? null));
+// Fit (zoom 0) shows the WHOLE banner: the band grows to the image (no crop, no
+// letterbox bars). Cover/zoom keep the slim fixed band.
+const bannerWhole = computed(() => isWholeImage(c.value?.bannerMeta ?? null));
+
+// Cover placement: `hero` renders the cover under the subheading here; otherwise it
+// stays in the Overview "About" section on the public page (default).
+const coverInHero = computed(() => c.value?.coverPlacement === 'hero' && !!c.value?.coverImageUrl);
+const coverStyle = computed(() => imageFramingStyle(c.value?.coverMeta ?? null));
+const coverWhole = computed(() => isWholeImage(c.value?.coverMeta ?? null));
 
 // Local wall-clock formatting (dates) and the live countdown are timezone- and
 // clock-dependent, so they would mismatch between the server's TZ and the viewer's
@@ -145,8 +154,8 @@ const entryCount = computed<number>(() => c.value?.entryCount ?? 0);
 <template>
   <div class="cpub-hero">
     <!-- Slim banner band (constrained) — the hero image, not a tall block. -->
-    <div v-if="c?.bannerUrl" class="cpub-hero-banner">
-      <img :src="c.bannerUrl" :alt="`${c?.title || 'Contest'} banner`" :style="bannerStyle" />
+    <div v-if="c?.bannerUrl" class="cpub-hero-banner" :class="{ 'cpub-hero-banner--whole': bannerWhole }">
+      <img :src="c.bannerUrl" :alt="`${c?.title || 'Contest'} banner`" :style="bannerWhole ? undefined : bannerStyle" />
     </div>
 
     <!-- Compact bar — title + status + meta + actions in one tight, clean band
@@ -173,6 +182,14 @@ const entryCount = computed<number>(() => c.value?.entryCount ?? 0);
 
         <h1 class="cpub-hero-title">{{ c?.title || 'Contest' }}</h1>
         <p v-if="tagline" class="cpub-hero-tagline">{{ tagline }}</p>
+        <img
+          v-if="coverInHero"
+          :src="c!.coverImageUrl!"
+          :alt="`${c?.title || 'Contest'} cover`"
+          class="cpub-hero-cover"
+          :class="{ 'cpub-hero-cover--whole': coverWhole }"
+          :style="coverWhole ? undefined : coverStyle"
+        />
 
         <div class="cpub-hero-foot">
           <div class="cpub-hero-meta">
@@ -213,6 +230,13 @@ const entryCount = computed<number>(() => c.value?.entryCount ?? 0);
   overflow: hidden;
 }
 .cpub-hero-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
+/* Fit (whole image): let the band grow to the image so nothing is cropped and there
+   are no letterbox bars (full width, natural height, capped for very tall images). */
+.cpub-hero-banner--whole { aspect-ratio: auto; max-height: none; background: transparent; }
+.cpub-hero-banner--whole img { height: auto; max-height: 70vh; object-fit: contain; }
+/* Cover image placed in the hero (under the subheading) when coverPlacement=hero. */
+.cpub-hero-cover { display: block; width: 100%; max-width: 680px; max-height: 320px; object-fit: cover; border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); margin: 0 0 14px; }
+.cpub-hero-cover--whole { height: auto; max-height: 420px; object-fit: contain; }
 
 /* ── COMPACT BAR ── one tight, clean band on a surface background. */
 .cpub-hero-bar { background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); }
@@ -240,7 +264,7 @@ const entryCount = computed<number>(() => c.value?.entryCount ?? 0);
 .cpub-countdown-chip-muted i { color: var(--text-faint); }
 
 .cpub-hero-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; color: var(--text); }
-.cpub-hero-tagline { font-size: 13px; color: var(--text-dim); line-height: 1.55; max-width: 680px; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.cpub-hero-tagline { font-size: 14px; color: var(--text-dim); line-height: 1.6; max-width: 760px; margin: 0 0 14px; }
 
 .cpub-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
 .cpub-hero-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }

package/composables/useContestEditor.ts

@@ -14,7 +14,7 @@
  * round-trip bug and no per-field re-conversion at save (the Phase 1 datetime fix).
  */
 import { ref, computed, watch, nextTick, type Ref, type ComputedRef } from 'vue';
-import type { ContestStage, ContestImageMeta } from '@commonpub/schema';
+import type { ContestStage, ContestImageMeta, ContestCoverPlacement } from '@commonpub/schema';
 import type { ContestTemplateSeed } from '../utils/contestTemplates';
 
 export type ContestFormat = 'markdown' | 'html';
@@ -54,6 +54,7 @@ export interface ContestEditorSource {
   coverImageUrl?: string | null;
   bannerMeta?: ContestImageMeta | null;
   coverMeta?: ContestImageMeta | null;
+  coverPlacement?: ContestCoverPlacement | null;
   startDate?: string | null;
   endDate?: string | null;
   judgingEndDate?: string | null;
@@ -109,6 +110,7 @@ export interface UseContestEditor {
   coverImageUrl: Ref<string>;
   bannerMeta: Ref<ContestImageMeta | null>;
   coverMeta: Ref<ContestImageMeta | null>;
+  coverPlacement: Ref<ContestCoverPlacement | null>;
   startDate: Ref<string>;
   endDate: Ref<string>;
   judgingEndDate: Ref<string>;
@@ -178,6 +180,7 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
   const coverImageUrl = ref('');
   const bannerMeta = ref<ContestImageMeta | null>(null);
   const coverMeta = ref<ContestImageMeta | null>(null);
+  const coverPlacement = ref<ContestCoverPlacement | null>(null);
   const startDate = ref('');
   const endDate = ref('');
   const judgingEndDate = ref('');
@@ -260,6 +263,7 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
     coverImageUrl.value = c.coverImageUrl ?? '';
     bannerMeta.value = c.bannerMeta ?? null;
     coverMeta.value = c.coverMeta ?? null;
+    coverPlacement.value = c.coverPlacement ?? null;
     // ISO instants stored verbatim; CpubDateTimeField renders them in local time.
     startDate.value = c.startDate ?? '';
     endDate.value = c.endDate ?? '';
@@ -346,6 +350,7 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
       // Clear the framing when the image is removed; else send it (or leave as-is).
       bannerMeta: bannerUrl.value ? (bannerMeta.value ?? undefined) : null,
       coverMeta: coverImageUrl.value ? (coverMeta.value ?? undefined) : null,
+      coverPlacement: coverImageUrl.value ? (coverPlacement.value ?? undefined) : null,
       startDate: startDate.value || undefined,
       endDate: endDate.value || undefined,
       judgingEndDate: judgingEndDate.value || undefined,
@@ -400,7 +405,7 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
   // Any post-hydration edit flips the dirty flag (drives the topbar "unsaved" cue).
   watch(
     [title, slugInput, subheading, description, descriptionBlocks, rulesBlocks, prizesBlocks, rules,
-      descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, bannerMeta, coverMeta, startDate, endDate,
+      descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, bannerMeta, coverMeta, coverPlacement, startDate, endDate,
       judgingEndDate, communityVotingEnabled, judgingVisibility, eligibleContentTypes, maxEntriesPerUser,
       visibility, visibleToRoles, showPrizes, prizesDescription, prizes, criteria, stages, currentStageId],
     () => { if (!hydrating) formDirty.value = true; },
@@ -414,7 +419,7 @@ export function useContestEditor(opts: UseContestEditorOptions): UseContestEdito
 
   return {
     title, slugInput, slugTouched, subheading, description, descriptionBlocks, rulesBlocks, prizesBlocks,
-    rules, descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, bannerMeta, coverMeta, startDate,
+    rules, descriptionFormat, rulesFormat, prizesDescriptionFormat, bannerUrl, coverImageUrl, bannerMeta, coverMeta, coverPlacement, startDate,
     endDate, judgingEndDate, communityVotingEnabled, judgingVisibility, eligibleContentTypes, maxEntriesPerUser,
     visibility, visibleToRoles, showPrizes, prizesDescription, prizes, criteria, stages, currentStageId,
     saving, formDirty, dateError, canSubmit,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.85.0",
+  "version": "0.86.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,17 +54,17 @@
     "vue-advanced-cropper": "^2.8.9",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.23.0",
-    "@commonpub/editor": "0.8.0",
     "@commonpub/auth": "0.8.0",
+    "@commonpub/config": "0.23.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/theme-studio": "0.6.1",
     "@commonpub/protocol": "0.14.0",
-    "@commonpub/schema": "0.47.0",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/server": "2.91.0",
     "@commonpub/explainer": "0.8.0",
-    "@commonpub/ui": "0.13.1"
+    "@commonpub/theme-studio": "0.6.1",
+    "@commonpub/server": "2.92.0",
+    "@commonpub/editor": "0.9.0",
+    "@commonpub/ui": "0.13.1",
+    "@commonpub/schema": "0.48.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/contests/[slug]/index.vue

@@ -267,6 +267,30 @@ async function withdrawEntry(entryId: string): Promise<void> {
       @copy-link="copyLink"
     />
 
+    <!-- Section tabs — a prominent centered band directly under the hero. -->
+    <nav class="cpub-ctabs" aria-label="Contest sections">
+      <div class="cpub-ctabs-inner" role="tablist">
+        <button
+          v-for="tab in tabs"
+          :id="`cpub-tab-${tab.key}`"
+          :key="tab.key"
+          role="tab"
+          type="button"
+          class="cpub-ctab"
+          :class="{ 'cpub-ctab-active': activeTab === tab.key }"
+          :aria-selected="activeTab === tab.key"
+          :aria-controls="`cpub-panel-${tab.key}`"
+          :tabindex="activeTab === tab.key ? 0 : -1"
+          @click="activeTab = tab.key"
+          @keydown="onTabKey($event, tab.key)"
+        >
+          <i class="fa-solid" :class="tab.icon"></i>
+          <span class="cpub-ctab-label">{{ tab.label }}</span>
+          <span v-if="tab.count != null" class="cpub-ctab-count">{{ tab.count }}</span>
+        </button>
+      </div>
+    </nav>
+
     <!-- SUBMIT ENTRY DIALOG -->
     <div v-if="showSubmitDialog" class="cpub-submit-overlay" @click.self="showSubmitDialog = false">
       <div ref="submitDialogRef" class="cpub-submit-dialog" role="dialog" aria-modal="true" aria-label="Submit entry">
@@ -340,32 +364,19 @@ async function withdrawEntry(entryId: string): Promise<void> {
             <span>{{ visibilityNote.text }}</span>
           </div>
 
-          <!-- Tab bar -->
-          <div class="cpub-tabbar" role="tablist" aria-label="Contest sections">
-            <button
-              v-for="tab in tabs"
-              :id="`cpub-tab-${tab.key}`"
-              :key="tab.key"
-              role="tab"
-              type="button"
-              class="cpub-tab"
-              :class="{ 'cpub-tab-active': activeTab === tab.key }"
-              :aria-selected="activeTab === tab.key"
-              :aria-controls="`cpub-panel-${tab.key}`"
-              :tabindex="activeTab === tab.key ? 0 : -1"
-              @click="activeTab = tab.key"
-              @keydown="onTabKey($event, tab.key)"
-            >
-              <i class="fa-solid" :class="tab.icon"></i> {{ tab.label }}
-              <span v-if="tab.count != null" class="cpub-tab-count">{{ tab.count }}</span>
-            </button>
-          </div>
 
           <!-- OVERVIEW -->
           <div v-show="activeTab === 'overview'" id="cpub-panel-overview" role="tabpanel" aria-labelledby="cpub-tab-overview" tabindex="0">
             <div class="cpub-about-section">
               <div class="cpub-sec-head"><h2><i class="fa fa-circle-info" style="color: var(--accent);"></i> About This Contest</h2></div>
-              <img v-if="c?.coverImageUrl" :src="c.coverImageUrl" :alt="`${c?.title || 'Contest'} cover`" class="cpub-about-cover" />
+              <img
+                v-if="c?.coverImageUrl && c?.coverPlacement !== 'hero'"
+                :src="c.coverImageUrl"
+                :alt="`${c?.title || 'Contest'} cover`"
+                class="cpub-about-cover"
+                :class="{ 'cpub-about-cover--whole': isWholeImage(c?.coverMeta) }"
+                :style="isWholeImage(c?.coverMeta) ? undefined : imageFramingStyle(c?.coverMeta)"
+              />
               <div class="cpub-about-card">
                 <BlocksBlockContentRenderer
                   v-if="c?.descriptionBlocks?.length"
@@ -525,14 +536,23 @@ async function withdrawEntry(entryId: string): Promise<void> {
 .cpub-invite-text i { color: var(--accent); }
 
 /* TABS */
-.cpub-tabbar { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: var(--border-width-default) solid var(--border); margin-bottom: 20px; }
-.cpub-tabbar::-webkit-scrollbar { display: none; }
-.cpub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 40px; flex-shrink: 0; white-space: nowrap; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); cursor: pointer; }
-.cpub-tab:hover { color: var(--text-dim); }
-.cpub-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
-.cpub-tab i { font-size: 11px; }
-.cpub-tab-count { font-size: 9px; padding: 1px 6px; background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); }
-.cpub-tab-active .cpub-tab-count { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
+/* Section tabs — a prominent centered nav band directly under the hero. Larger
+   bold mono labels; the active tab gets an accent tint + thick accent underline so
+   it clearly reads as selected even when there are only a couple of tabs. */
+.cpub-ctabs { background: var(--surface); border-bottom: 2px solid var(--border); box-shadow: var(--shadow-sm); }
+.cpub-ctabs-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: center; flex-wrap: wrap; }
+.cpub-ctab { display: inline-flex; align-items: center; gap: 9px; padding: 17px 28px; min-height: 58px; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); cursor: pointer; transition: color .12s, background .12s; }
+.cpub-ctab:hover { color: var(--text); background: var(--surface2); }
+.cpub-ctab-active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-bg); }
+.cpub-ctab i { font-size: 14px; }
+.cpub-ctab-count { font-size: 10px; font-weight: 700; padding: 2px 8px; background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); }
+.cpub-ctab-active .cpub-ctab-count { background: var(--surface); border-color: var(--accent-border); color: var(--accent); }
+@media (max-width: 640px) {
+  .cpub-ctabs-inner { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+  .cpub-ctabs-inner::-webkit-scrollbar { display: none; }
+  .cpub-ctab { flex-shrink: 0; padding: 14px 18px; min-height: 50px; font-size: 12px; }
+  .cpub-ctab-label { white-space: nowrap; }
+}
 
 [role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
 
@@ -559,6 +579,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 /* ABOUT */
 .cpub-about-section { margin-bottom: 20px; }
 .cpub-about-cover { width: 100%; max-height: 380px; object-fit: cover; display: block; border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); margin-bottom: 16px; }
+.cpub-about-cover--whole { height: auto; max-height: 480px; object-fit: contain; }
 .cpub-about-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-md); font-size: 12px; color: var(--text-dim); line-height: 1.7; }
 .cpub-about-card p { margin: 0; white-space: pre-line; }
 

package/utils/contestImage.ts

@@ -33,3 +33,13 @@ function clampPct(n: number): number {
 export function defaultImageMeta(): ContestImageMeta {
   return { zoom: 0, x: 50, y: 50 };
 }
+
+/**
+ * True when the framing means "show the WHOLE image" (Fit, zoom 0). Surfaces that
+ * can grow (the hero banner band, the editor preview) render this as a natural-ratio
+ * image (no crop, no letterbox bars) rather than `contain` inside a fixed band.
+ * null/absent = the legacy cover fit, so this is false (existing banners unchanged).
+ */
+export function isWholeImage(meta: ContestImageMeta | null | undefined): boolean {
+  return !!meta && meta.zoom <= 0;
+}