@commonpub/layer 0.84.0 → 0.86.0

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"
@@ -506,7 +517,10 @@ async function withdrawEntry(entryId: string): Promise<void> {
 .cpub-submit-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: var(--border-width-default) solid var(--border); }
 
 /* LAYOUT */
-.cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 32px; }
+/* Top padding intentionally tighter than the sides: the hero bar already sits
+   directly above with its own 20px bottom padding + border, so a full 32px here
+   stacked to a ~52px hero→tabs gap. ~18px lands the tabbar close under the hero. */
+.cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 18px 32px 32px; }
 
 .cpub-entries-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
 .cpub-entries-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
@@ -522,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; }
 
@@ -556,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/pages/contests/index.vue

@@ -65,6 +65,7 @@ const canCreateContest = computed(() => {
             :alt="contest.title"
             class="cpub-contest-cover"
             :class="{ 'cpub-contest-cover--contain': !contest.coverImageUrl && !!contest.bannerUrl }"
+            :style="contest.coverImageUrl ? imageFramingStyle(contest.coverMeta) : undefined"
             loading="lazy"
           />
           <template v-else>

package/utils/contestBlocks.ts

@@ -19,6 +19,16 @@ export const CONTEST_RUBRIC_KEY: InjectionKey<Ref<ContestRubricCriterion[]>> = S
  *  "pull from schedule" seed. Absent (null) outside the contest editor. */
 export const CONTEST_SCHEDULE_KEY: InjectionKey<Ref<RoadmapItem[]>> = Symbol('contestSchedule');
 
+/** A panel judge as the Judges Showcase block cares about it (for "Import panel
+ *  judges": seed showcase rows from the real scoring panel). */
+export interface ContestPanelJudge { name: string; avatarUrl?: string; title?: string; link?: string }
+
+/** ContestEditor `provide`s an async loader for the contest's scoring-panel
+ *  judges under this key, so the Judges Showcase block can offer a one-click
+ *  "import panel judges" seed (name + account avatar). Resolves to [] in create
+ *  mode (no slug yet); absent (null) outside the contest editor. */
+export const CONTEST_JUDGES_KEY: InjectionKey<() => Promise<ContestPanelJudge[]>> = Symbol('contestJudges');
+
 /** A stage as the roadmap cares about it (structural subset of ContestStage). */
 export interface RoadmapStageSource { name: string; kind?: string; startsAt?: string; endsAt?: string; description?: string }
 /** The three core schedule dates, when there are no custom stages. */

package/utils/contestBody.ts

@@ -15,11 +15,11 @@ export function seedBodyBlocks(
   if (Array.isArray(blocks) && blocks.length) return blocks as BlockTuple[];
   const text = (legacy ?? '').trim();
   if (!text) return [];
-  if (legacyFormat === 'html') return [['markdown', { content: text }]];
+  if (legacyFormat === 'html') return [['markdown', { source: text }]];
   try {
     const parsed = markdownToBlockTuples(text);
-    return parsed.length ? parsed : [['markdown', { content: text }]];
+    return parsed.length ? parsed : [['markdown', { source: text }]];
   } catch {
-    return [['markdown', { content: text }]];
+    return [['markdown', { source: text }]];
   }
 }

package/utils/contestImage.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties } from 'vue';
+import type { ContestImageMeta } from '@commonpub/schema';
+
+/**
+ * Map a contest banner/cover `ContestImageMeta` to CSS for the <img> (P4). The
+ * framing is NON-DESTRUCTIVE — the original upload is never re-cropped; this only
+ * drives object-fit / transform / object-position. Shared by ContestHero (public
+ * render), the editor preview, and ContestBannerAdjust so all three agree.
+ *
+ *  - `null`/absent ⇒ `cover` with NO transform — the legacy fit, so existing
+ *    contests look identical until an organiser touches the framing (back-compat).
+ *  - `zoom <= 0`   ⇒ `contain` — perfect fit, the whole image visible (letterboxed).
+ *  - `zoom > 0`    ⇒ `cover` + `scale(1 + zoom)` + `object-position: x% y%`.
+ */
+/** A `:style` object (a Vue CSSProperties subset) for an <img>. */
+export type ImageFraming = CSSProperties;
+
+export function imageFramingStyle(meta: ContestImageMeta | null | undefined): CSSProperties {
+  if (!meta) return { objectFit: 'cover' };
+  const x = clampPct(meta.x);
+  const y = clampPct(meta.y);
+  if (meta.zoom <= 0) return { objectFit: 'contain', objectPosition: `${x}% ${y}%` };
+  const zoom = Math.min(4, meta.zoom);
+  return { objectFit: 'cover', transform: `scale(${1 + zoom})`, objectPosition: `${x}% ${y}%` };
+}
+
+function clampPct(n: number): number {
+  if (!Number.isFinite(n)) return 50;
+  return Math.max(0, Math.min(100, Math.round(n)));
+}
+
+/** The default framing an organiser starts from when they first adjust an image. */
+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;
+}

package/utils/contestSubmissionTemplates.ts

@@ -0,0 +1,165 @@
+import type { ContestSubmissionTemplateField } from '@commonpub/schema';
+import { fieldKeyFromLabel } from './contestStages';
+
+/**
+ * Field presets + whole-form templates for the submission-form builder (P2). Pure
+ * data + helpers so they unit-test in isolation; the builder UI
+ * (ContestStageTemplateEditor) appends a preset or replaces the whole form via the
+ * `templatePreset*`/template builders here. Keys are derived from the label and
+ * uniquified against the existing template so two "Email" fields don't collide
+ * (template field keys must be unique — `contestStageSchema`).
+ *
+ * Address/Agreement presets + the address/shipping templates are PII-gated
+ * (`features.contestPii`): the agreement/address field types are only offered in
+ * the builder when that flag is on, so the UI hides them otherwise. The pure
+ * builders take an explicit `{ pii }` so they degrade the same way in isolation.
+ */
+type TemplateField = ContestSubmissionTemplateField;
+
+/** Default terms an organiser can keep or edit; shared by the preset + template. */
+export const RULES_AGREEMENT_TERMS =
+  'By entering, I confirm this submission is my own original work and I agree to the contest rules and code of conduct.';
+
+/** Make `base` unique within `taken` by appending `_2`, `_3`, … */
+function uniqueKey(taken: Set<string>, base: string): string {
+  if (!taken.has(base)) return base;
+  let n = 2;
+  while (taken.has(`${base}_${n}`)) n += 1;
+  return `${base}_${n}`;
+}
+
+/** Stamp keys on a set of keyless fields, keeping them unique among themselves. */
+function withKeys(fields: Array<Omit<TemplateField, 'key'> & { key?: string }>): TemplateField[] {
+  const taken = new Set<string>();
+  return fields.map((f) => {
+    const key = uniqueKey(taken, f.key || fieldKeyFromLabel(f.label));
+    taken.add(key);
+    return { ...f, key };
+  });
+}
+
+// ─── One-click field presets (the "Add field" menu) ───
+
+export interface FieldPreset {
+  id: string;
+  /** Menu label. */
+  label: string;
+  /** FontAwesome icon (no `fa-solid` prefix). */
+  icon: string;
+  /** Requires `features.contestPii` (agreement/address field types). */
+  pii?: boolean;
+  /** The field this preset seeds (key derived from the label at add time). */
+  field: Omit<TemplateField, 'key'>;
+}
+
+export const FIELD_PRESETS: FieldPreset[] = [
+  { id: 'text', label: 'Short text', icon: 'fa-font', field: { label: 'Short answer', type: 'text', required: false } },
+  { id: 'textarea', label: 'Long text', icon: 'fa-align-left', field: { label: 'Details', type: 'textarea', required: false } },
+  { id: 'url', label: 'Link (URL)', icon: 'fa-link', field: { label: 'Link', type: 'url', required: false, help: 'Include the full https:// address.' } },
+  { id: 'email', label: 'Email', icon: 'fa-envelope', field: { label: 'Email address', type: 'email', required: false } },
+  { id: 'number', label: 'Number', icon: 'fa-hashtag', field: { label: 'Number', type: 'number', required: false } },
+  { id: 'select', label: 'Dropdown', icon: 'fa-list', field: { label: 'Choose one', type: 'select', required: false, options: [{ value: '', label: '' }] } },
+  { id: 'checkbox', label: 'Checkbox', icon: 'fa-square-check', field: { label: 'Confirm', type: 'checkbox', required: false } },
+  { id: 'date', label: 'Date', icon: 'fa-calendar', field: { label: 'Date', type: 'date', required: false } },
+  {
+    id: 'address',
+    label: 'Mailing address',
+    icon: 'fa-location-dot',
+    pii: true,
+    field: { label: 'Mailing address', type: 'address', required: false, pii: true, help: 'Stored privately. Only staff with PII access and the entrant can read it.' },
+  },
+  {
+    id: 'agreement',
+    label: 'Agreement',
+    icon: 'fa-file-signature',
+    pii: true,
+    field: { label: 'Agreement', type: 'agreement', required: true, mustAccept: true, terms: RULES_AGREEMENT_TERMS },
+  },
+];
+
+/** Presets offered for the builder, gated by whether PII field types are enabled. */
+export function availableFieldPresets(pii: boolean): FieldPreset[] {
+  return pii ? FIELD_PRESETS : FIELD_PRESETS.filter((p) => !p.pii);
+}
+
+/** Append a preset field, deriving a unique machine key from its label. */
+export function templatePresetAdded(t: TemplateField[], preset: FieldPreset): TemplateField[] {
+  const taken = new Set(t.map((f) => f.key));
+  const key = uniqueKey(taken, fieldKeyFromLabel(preset.field.label));
+  return [...t, { ...preset.field, key }];
+}
+
+// ─── Whole-form templates (the "Start from template" picker) ───
+
+export interface SubmissionFormTemplate {
+  id: string;
+  label: string;
+  description: string;
+  /** Requires `features.contestPii` to seed its address/agreement fields. */
+  pii?: boolean;
+  /** Build the field array; flag-adaptive so it degrades when PII is off. */
+  build(opts: { pii: boolean }): TemplateField[];
+}
+
+const SHIPPING_AGREEMENT_TERMS =
+  'If selected, I agree to provide a valid shipping address and accept responsibility for any hardware sent to me.';
+
+export const SUBMISSION_FORM_TEMPLATES: SubmissionFormTemplate[] = [
+  {
+    id: 'standard',
+    label: 'Standard proposal',
+    description: 'Name, summary, description, approach (and a rules agreement when PII is on).',
+    build({ pii }): TemplateField[] {
+      const fields: Array<Omit<TemplateField, 'key'>> = [
+        { label: 'Project name', type: 'text', required: true },
+        { label: 'One-line summary', type: 'text', required: true, help: 'A single sentence describing your idea.' },
+        { label: 'Description', type: 'textarea', required: true, help: 'What you are building and the problem it solves.' },
+        { label: 'Approach', type: 'textarea', required: false, help: 'How you plan to build it (optional).' },
+      ];
+      if (pii) fields.push({ label: 'Contest rules', type: 'agreement', required: true, terms: RULES_AGREEMENT_TERMS, mustAccept: true });
+      return withKeys(fields);
+    },
+  },
+  {
+    id: 'hardware',
+    label: 'Hardware / shipping',
+    description: 'Standard proposal plus a mailing address and a shipping agreement (PII).',
+    pii: true,
+    build({ pii }): TemplateField[] {
+      const fields: Array<Omit<TemplateField, 'key'>> = [
+        { label: 'Project name', type: 'text', required: true },
+        { label: 'One-line summary', type: 'text', required: true, help: 'A single sentence describing your idea.' },
+        { label: 'Description', type: 'textarea', required: true, help: 'What you are building and the problem it solves.' },
+      ];
+      if (pii) {
+        fields.push({ label: 'Mailing address', type: 'address', required: true, pii: true, help: 'Stored privately. Only staff with PII access and the entrant can read it.' });
+        fields.push({ label: 'Shipping agreement', type: 'agreement', required: true, terms: SHIPPING_AGREEMENT_TERMS, mustAccept: true });
+      }
+      return withKeys(fields);
+    },
+  },
+  {
+    id: 'minimal',
+    label: 'Minimal',
+    description: 'Just a project name and a link.',
+    build(): TemplateField[] {
+      return withKeys([
+        { label: 'Project name', type: 'text', required: true },
+        { label: 'Link', type: 'url', required: false, help: 'Include the full https:// address.' },
+      ]);
+    },
+  },
+  {
+    id: 'blank',
+    label: 'Blank',
+    description: 'Start with no fields.',
+    build(): TemplateField[] {
+      return [];
+    },
+  },
+];
+
+/** Templates offered for the builder, gated by whether PII field types are enabled. */
+export function availableFormTemplates(pii: boolean): SubmissionFormTemplate[] {
+  return pii ? SUBMISSION_FORM_TEMPLATES : SUBMISSION_FORM_TEMPLATES.filter((t) => !t.pii);
+}

package/utils/contestTemplates.ts

@@ -87,6 +87,9 @@ export function standardContestTemplate(opts: StandardTemplateOptions): ContestT
       description: 'Entrants submit a proposal for review.',
       submissionMode: opts.proposals ? 'proposal' : 'attach',
       submissionTemplate: standardSubmissionTemplate(opts),
+      instructionsBlocks: markdownToBlockTuples(
+        'Tell us about your idea. Be concrete about what you will build and why it matters. You can edit your proposal until the round closes.',
+      ) as ContestStage['instructionsBlocks'],
     },
     {
       id: newStageId(),