@commonpub/layer 0.52.0 → 0.54.0

package/components/contest/ContestEntries.vue

@@ -91,6 +91,7 @@ function confirmWithdraw(entryId: string): void {
         v-for="(entry, i) in entries"
         :key="entry.id"
         class="cpub-entry-card"
+        :class="{ 'cpub-entry-out': entry.eliminated }"
       >
         <div class="cpub-entry-thumb" :class="i % 2 === 0 ? 'cpub-entry-bg-light' : 'cpub-entry-bg-dark'">
           <img v-if="entry.contentCoverImageUrl" :src="entry.contentCoverImageUrl" :alt="entry.contentTitle" class="cpub-entry-cover-img" />
@@ -99,6 +100,8 @@ function confirmWithdraw(entryId: string): void {
             <div class="cpub-entry-icon"><i class="fa-solid fa-microchip"></i></div>
           </template>
           <span v-if="entry.rank" class="cpub-entry-rank" :class="`cpub-rank-${entry.rank <= 3 ? entry.rank : 'other'}`">#{{ entry.rank }}</span>
+          <span v-if="entry.eliminated" class="cpub-entry-cohort cpub-cohort-out"><i class="fa-solid fa-circle-minus"></i> Not advanced</span>
+          <span v-else-if="entry.stageState && entry.stageState.some((s) => s.status === 'advanced')" class="cpub-entry-cohort cpub-cohort-in"><i class="fa-solid fa-circle-check"></i> Advanced</span>
         </div>
         <div class="cpub-entry-body">
           <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-entry-title">{{ entry.contentTitle || `Entry #${i + 1}` }}</NuxtLink>
@@ -165,6 +168,12 @@ function confirmWithdraw(entryId: string): void {
 .cpub-rank-2 { background: var(--surface2); color: var(--text-faint); border: var(--border-width-default) solid var(--text-faint); }
 .cpub-rank-3 { background: var(--surface2); color: var(--bronze); border: var(--border-width-default) solid var(--bronze); }
 .cpub-rank-other { background: var(--surface2); color: var(--text-dim); border: var(--border-width-default) solid var(--border); }
+.cpub-entry-cohort { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 9px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 4px; }
+.cpub-cohort-in { background: var(--green-bg); color: var(--green); border: var(--border-width-default) solid var(--green-border); }
+.cpub-cohort-out { background: var(--surface2); color: var(--text-faint); border: var(--border-width-default) solid var(--border2); }
+.cpub-entry-cohort i { font-size: 8px; }
+.cpub-entry-out { opacity: .6; }
+.cpub-entry-out:hover { opacity: 1; }
 .cpub-entry-body { padding: 10px 12px; }
 .cpub-entry-title { font-size: 12px; font-weight: 600; margin-bottom: 3px; line-height: 1.3; color: var(--text); text-decoration: none; }
 .cpub-entry-title:hover { color: var(--accent); }

package/components/contest/ContestStagesEditor.vue

@@ -20,11 +20,6 @@ const props = defineProps<{
 
 const KINDS: ContestStage['kind'][] = ['submission', 'review', 'interim', 'results', 'event', 'custom'];
 
-function newId(): string {
-  const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
-  return c?.randomUUID?.() ?? `s-${Date.now()}-${Math.round(Math.random() * 1e6)}`;
-}
-
 // datetime-local <-> ISO (mirrors the rest of the contest forms' convention).
 function toLocal(iso?: string): string {
   if (!iso) return '';
@@ -50,39 +45,28 @@ function onDate(i: number, field: 'startsAt' | 'endsAt', e: Event): void {
   setField(i, { [field]: v } as Partial<ContestStage>);
 }
 
+// Array operations live as pure functions in utils/contestStages.ts (unit-tested).
 function addStage(): void {
-  commit([...stages.value, { id: newId(), name: '', kind: 'custom' }]);
+  commit(withStageAdded(stages.value));
 }
 
 function duplicateStage(i: number): void {
-  const src = stages.value[i];
-  if (!src) return;
-  const copy: ContestStage = { ...src, id: newId(), name: `${src.name} (copy)`, core: false };
-  commit([...stages.value.slice(0, i + 1), copy, ...stages.value.slice(i + 1)]);
+  commit(withStageDuplicated(stages.value, i));
 }
 
 function removeStage(i: number): void {
   const removed = stages.value[i];
-  commit(stages.value.filter((_, idx) => idx !== i));
+  commit(withStageRemoved(stages.value, i));
   if (removed && currentId.value === removed.id) currentId.value = null;
 }
 
 function move(i: number, dir: -1 | 1): void {
-  const j = i + dir;
-  if (j < 0 || j >= stages.value.length) return;
-  const next = [...stages.value];
-  [next[i], next[j]] = [next[j]!, next[i]!];
-  commit(next);
+  commit(withStageMoved(stages.value, i, dir));
 }
 
 // Seed the editor with the standard three stages so the owner has a starting point.
 function customize(): void {
-  const iso = (d?: string | null) => (d ? new Date(d).toISOString() : undefined);
-  commit([
-    { id: newId(), name: 'Submissions', kind: 'submission', startsAt: iso(props.startDate), endsAt: iso(props.endDate) },
-    { id: newId(), name: 'Judging', kind: 'review', endsAt: iso(props.judgingEndDate) ?? iso(props.endDate) },
-    { id: newId(), name: 'Results', kind: 'results' },
-  ]);
+  commit(seedStandardStages(props));
 }
 
 function resetToStandard(): void {
@@ -108,6 +92,13 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
     </div>
 
     <template v-else>
+      <div class="cpub-stage-tophead">
+        <span class="cpub-stage-count">{{ stages.length }} stage{{ stages.length === 1 ? '' : 's' }}</span>
+        <div class="cpub-stage-toolbar">
+          <button type="button" class="cpub-btn cpub-btn-sm" @click="addStage"><i class="fa-solid fa-plus"></i> Add stage</button>
+          <button type="button" class="cpub-btn cpub-btn-sm cpub-stage-reset" @click="resetToStandard"><i class="fa-solid fa-rotate-left"></i> Reset to standard</button>
+        </div>
+      </div>
       <p v-if="missingSubmission" class="cpub-form-error" role="alert" style="margin: 0 0 10px;">
         Add at least one <strong>Submissions</strong> stage, or reset to the standard flow.
       </p>
@@ -193,7 +184,6 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
 
       <div class="cpub-stage-toolbar">
         <button type="button" class="cpub-btn cpub-btn-sm" @click="addStage"><i class="fa-solid fa-plus"></i> Add stage</button>
-        <button type="button" class="cpub-btn cpub-btn-sm cpub-stage-reset" @click="resetToStandard"><i class="fa-solid fa-rotate-left"></i> Reset to standard flow</button>
       </div>
     </template>
   </div>
@@ -201,6 +191,8 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
 
 <style scoped>
 .cpub-stages-standard { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
+.cpub-stage-tophead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
+.cpub-stage-count { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
 .cpub-stage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
 .cpub-stage-row { border: var(--border-width-default) solid var(--border); background: var(--surface2); padding: 12px; }
 .cpub-stage-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.52.0",
+  "version": "0.54.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/editor": "0.7.11",
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.18.0",
+    "@commonpub/editor": "0.7.11",
     "@commonpub/docs": "0.6.3",
     "@commonpub/protocol": "0.13.0",
-    "@commonpub/schema": "0.29.0",
-    "@commonpub/server": "2.76.0",
-    "@commonpub/ui": "0.9.2",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/explainer": "0.7.15"
+    "@commonpub/server": "2.77.0",
+    "@commonpub/ui": "0.9.2",
+    "@commonpub/schema": "0.30.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -216,6 +216,30 @@ async function handleDelete(): Promise<void> {
 const availableTransitions = computed<string[]>(() => contestTransitionsFrom(contest.value?.status));
 const statusAction = contestStatusAction;
 
+// Phase B2 — advancement cuts. Operates on the PERSISTED stages (contest.value),
+// not the editable `stages` ref, since it acts on real entries.
+const advancing = ref<string | null>(null);
+const advanceN = ref<Record<string, number>>({});
+const reviewStages = computed(() => (contest.value?.stages ?? []).filter((s) => s.kind === 'review'));
+async function advanceStage(stageId: string): Promise<void> {
+  const topN = advanceN.value[stageId];
+  if (!topN || topN < 1) { toast.error('Enter how many entries advance.'); return; }
+  if (!confirm(`Advance the top ${topN} entries from this stage? Entries below the cut are marked "not advanced" and drop out of later judging + final results. You can re-run this.`)) return;
+  advancing.value = stageId;
+  try {
+    const r = await $fetch<{ advancedCount: number; eliminatedCount: number }>(`/api/contests/${slug}/advance`, {
+      method: 'POST',
+      body: { reviewStageId: stageId, mode: 'topN', topN },
+    });
+    toast.success(`${r.advancedCount} advanced, ${r.eliminatedCount} not advanced.`);
+    await refresh();
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  } finally {
+    advancing.value = null;
+  }
+}
+
 async function transitionStatus(newStatus: string): Promise<void> {
   // Only the consequential transitions confirm; reversible nudges (pause/resume,
   // go-back) just apply.
@@ -244,6 +268,8 @@ async function transitionStatus(newStatus: string): Promise<void> {
     </p>
 
     <form class="cpub-edit-form" @submit.prevent="handleSave">
+      <div class="cpub-edit-layout">
+      <div class="cpub-edit-main">
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Details</h2>
         <div class="cpub-form-field">
@@ -309,22 +335,19 @@ async function transitionStatus(newStatus: string): Promise<void> {
         />
       </section>
 
-      <section class="cpub-form-section">
-        <h2 class="cpub-form-section-title">Entries</h2>
-        <div class="cpub-form-field">
-          <span class="cpub-form-label">Eligible content types</span>
-          <p class="cpub-form-hint">Leave all unchecked to accept any published content the entrant owns.</p>
-          <div class="cpub-type-options" role="group" aria-label="Eligible content types">
-            <label v-for="t in enabledTypeMeta" :key="t.type" class="cpub-form-check">
-              <input type="checkbox" :checked="eligibleContentTypes.includes(t.type)" @change="toggleType(t.type)" />
-              <span>{{ t.label }}</span>
-            </label>
+      <section v-if="reviewStages.length" class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Advancement</h2>
+        <p class="cpub-form-hint">Multi-round contests: after judging a review stage, advance the top entries to the next stage. Entries below the cut are marked "not advanced" and excluded from later judging + final results. Re-running re-computes the cut. (Save any stage changes above first.)</p>
+        <div v-for="rs in reviewStages" :key="rs.id" class="cpub-advance-row">
+          <span class="cpub-advance-name"><i class="fa-solid fa-gavel"></i> {{ rs.name }}</span>
+          <div class="cpub-advance-ctl">
+            <label class="cpub-form-label" :for="`adv-${rs.id}`">Advance top</label>
+            <input :id="`adv-${rs.id}`" v-model.number="advanceN[rs.id]" type="number" min="1" class="cpub-form-input cpub-advance-n" placeholder="50" />
+            <button type="button" class="cpub-btn cpub-btn-sm" :disabled="advancing === rs.id" @click="advanceStage(rs.id)">
+              <i class="fa-solid fa-arrow-up-right-dots"></i> {{ advancing === rs.id ? 'Advancing…' : 'Advance' }}
+            </button>
           </div>
         </div>
-        <div class="cpub-form-field">
-          <label class="cpub-form-label">Max entries per person</label>
-          <input v-model.number="maxEntriesPerUser" type="number" min="1" class="cpub-form-input" placeholder="Unlimited" style="max-width: 160px;" />
-        </div>
       </section>
 
       <section class="cpub-form-section">
@@ -443,6 +466,26 @@ async function transitionStatus(newStatus: string): Promise<void> {
         <p class="cpub-form-hint">Invited judges receive a notification and must accept before they can score.</p>
         <ContestJudgeManager :contest-slug="slug" :is-owner="true" />
       </section>
+      </div><!-- /cpub-edit-main -->
+
+      <aside class="cpub-edit-side">
+      <section class="cpub-form-section">
+        <h2 class="cpub-form-section-title">Entries</h2>
+        <div class="cpub-form-field">
+          <span class="cpub-form-label">Eligible content types</span>
+          <p class="cpub-form-hint">Leave all unchecked to accept any published content the entrant owns.</p>
+          <div class="cpub-type-options" role="group" aria-label="Eligible content types">
+            <label v-for="t in enabledTypeMeta" :key="t.type" class="cpub-form-check">
+              <input type="checkbox" :checked="eligibleContentTypes.includes(t.type)" @change="toggleType(t.type)" />
+              <span>{{ t.label }}</span>
+            </label>
+          </div>
+        </div>
+        <div class="cpub-form-field">
+          <label class="cpub-form-label">Max entries per person</label>
+          <input v-model.number="maxEntriesPerUser" type="number" min="1" class="cpub-form-input" placeholder="Unlimited" />
+        </div>
+      </section>
 
       <section class="cpub-form-section">
         <h2 class="cpub-form-section-title">Stage &amp; Status</h2>
@@ -487,6 +530,8 @@ async function transitionStatus(newStatus: string): Promise<void> {
           </button>
         </div>
       </section>
+      </aside><!-- /cpub-edit-side -->
+      </div><!-- /cpub-edit-layout -->
 
       <!-- Sticky save bar — always reachable without scrolling to the bottom. -->
       <div class="cpub-edit-actionbar">
@@ -506,7 +551,7 @@ async function transitionStatus(newStatus: string): Promise<void> {
 </template>
 
 <style scoped>
-.cpub-contest-edit { max-width: 700px; margin: 0 auto; padding: 32px; }
+.cpub-contest-edit { max-width: 1080px; margin: 0 auto; padding: 32px; }
 .cpub-back-link { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
 .cpub-back-link:hover { color: var(--accent); }
 .cpub-edit-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
@@ -522,15 +567,16 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-status-cancelled { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
 
 .cpub-edit-form { display: flex; flex-direction: column; gap: 16px; }
+/* Two-column editor: wide content column + a sticky meta rail (Stage & Status,
+   Entry rules, Danger Zone) so lifecycle controls stay reachable while editing. */
+.cpub-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
+.cpub-edit-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.cpub-edit-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
 .cpub-form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
 .cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
-.cpub-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
-.cpub-form-field:last-child { margin-bottom: 0; }
-.cpub-form-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
-.cpub-form-input, .cpub-form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
-.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; }
-.cpub-form-textarea { resize: vertical; }
-.cpub-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+/* `.cpub-form-input/-textarea/-field/-row/-label` are sourced from the global
+   theme (forms.css) so the extracted ContestStagesEditor inherits them across the
+   Vue scoped-style boundary — don't re-scope them here. */
 
 .cpub-form-error { font-size: 12px; color: var(--red); margin-top: 8px; }
 .cpub-form-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
@@ -583,9 +629,21 @@ async function transitionStatus(newStatus: string): Promise<void> {
   border-top: 2px solid var(--border);
   box-shadow: var(--shadow-lg);
 }
+.cpub-advance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: var(--border-width-default) solid var(--border); }
+.cpub-advance-row:first-of-type { border-top: 0; }
+.cpub-advance-name { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
+.cpub-advance-name i { color: var(--accent); font-size: 11px; }
+.cpub-advance-ctl { display: inline-flex; align-items: center; gap: 8px; }
+.cpub-advance-ctl .cpub-form-label { margin: 0; }
+.cpub-advance-n { width: 80px; }
 .cpub-edit-actionbar-status { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
 .cpub-edit-actionbar-btns { display: flex; align-items: center; gap: 8px; }
 
+/* Collapse the meta rail under the main column on narrower viewports. */
+@media (max-width: 900px) {
+  .cpub-edit-layout { grid-template-columns: 1fr; }
+  .cpub-edit-side { position: static; }
+}
 @media (max-width: 768px) {
   .cpub-contest-edit { padding: 16px; }
   .cpub-form-row { grid-template-columns: 1fr; }

package/pages/contests/create.vue

@@ -403,13 +403,8 @@ function prizeLabel(prize: Prize): string {
 .cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
 .cpub-form-section-header .cpub-form-section-title { margin-bottom: 0; }
 
-.cpub-form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
-.cpub-form-field:last-child { margin-bottom: 0; }
-.cpub-form-label { font-size: 10px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
-.cpub-form-input, .cpub-form-textarea { padding: 8px 10px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit; }
-.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; }
-.cpub-form-textarea { resize: vertical; }
-.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
+/* `.cpub-form-input/-textarea/-field/-row/-label` come from the global theme
+   (forms.css) — shared with the extracted ContestStagesEditor. */
 
 .cpub-prize-card { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
 .cpub-prize-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

package/server/api/contests/[slug]/advance.post.ts

@@ -0,0 +1,22 @@
+import { getContestBySlug, advanceContestStage } from '@commonpub/server';
+import { contestAdvanceSchema } from '@commonpub/schema';
+
+// Phase B2 — apply an advancement cut at a review stage (cull the cohort to top-N
+// or a manual pick, snapshot scores, advance to the next stage). Owner-gated.
+export default defineEventHandler(async (event): Promise<{ advanced: boolean; advancedCount: number; eliminatedCount: number }> => {
+  requireFeature('contests');
+  const db = useDB();
+  const user = requireAuth(event);
+  const { slug } = parseParams(event, { slug: 'string' });
+  const input = await parseBody(event, contestAdvanceSchema);
+
+  const contest = await getContestBySlug(db, slug);
+  if (!contest) throw createError({ statusCode: 404, statusMessage: 'Contest not found' });
+
+  const result = await advanceContestStage(db, contest.id, user.id, input);
+  if (!result.advanced) {
+    const owner = /owner/i.test(result.error ?? '');
+    throw createError({ statusCode: owner ? 403 : 400, statusMessage: result.error || 'Advancement failed' });
+  }
+  return result;
+});

package/utils/contestStages.ts

@@ -49,6 +49,50 @@ export function currentStageId(c: StageSource): string | null {
   }
 }
 
+// ─── Pure stage-array operations (used by ContestStagesEditor; unit-tested) ───
+
+export function newStageId(): string {
+  const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
+  return c?.randomUUID?.() ?? `s-${Date.now()}-${Math.round(Math.random() * 1e6)}`;
+}
+
+export function blankStage(): ContestStage {
+  return { id: newStageId(), name: '', kind: 'custom' };
+}
+
+/** The three standard stages seeded when an operator chooses to customise. */
+export function seedStandardStages(c: { startDate?: string | null; endDate?: string | null; judgingEndDate?: string | null }): ContestStage[] {
+  const i = (d?: string | null): string | undefined => (d ? new Date(d).toISOString() : undefined);
+  return [
+    { id: newStageId(), name: 'Submissions', kind: 'submission', startsAt: i(c.startDate), endsAt: i(c.endDate) },
+    { id: newStageId(), name: 'Judging', kind: 'review', endsAt: i(c.judgingEndDate) ?? i(c.endDate) },
+    { id: newStageId(), name: 'Results', kind: 'results' },
+  ];
+}
+
+export function withStageAdded(stages: ContestStage[]): ContestStage[] {
+  return [...stages, blankStage()];
+}
+
+export function withStageDuplicated(stages: ContestStage[], i: number): ContestStage[] {
+  const src = stages[i];
+  if (!src) return stages;
+  const copy: ContestStage = { ...src, id: newStageId(), name: `${src.name} (copy)`, core: false };
+  return [...stages.slice(0, i + 1), copy, ...stages.slice(i + 1)];
+}
+
+export function withStageRemoved(stages: ContestStage[], i: number): ContestStage[] {
+  return stages.filter((_, idx) => idx !== i);
+}
+
+export function withStageMoved(stages: ContestStage[], i: number, dir: -1 | 1): ContestStage[] {
+  const j = i + dir;
+  if (j < 0 || j >= stages.length) return stages;
+  const next = [...stages];
+  [next[i], next[j]] = [next[j]!, next[i]!];
+  return next;
+}
+
 /** FontAwesome icon (no `fa-solid` prefix) for each stage kind. */
 export const STAGE_KIND_ICON: Record<ContestStage['kind'], string> = {
   submission: 'fa-pen-to-square',