@commonpub/layer 0.8.3 → 0.8.5

package/components/ContentCard.vue

@@ -194,7 +194,7 @@ function formatCount(n: number | undefined): string {
   align-items: center;
   gap: 4px;
   background: var(--color-badge-overlay, rgba(0, 0, 0, 0.75));
-  color: #fff;
+  color: var(--color-text-inverse);
   backdrop-filter: blur(4px);
 }
 

package/components/ImageUpload.vue

@@ -174,7 +174,7 @@ function clearImage(): void {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: var(--color-text-inverse);
   font-family: var(--font-mono);
   font-size: 0.6875rem;
   font-weight: 600;

package/components/ShareToHubModal.vue

@@ -38,7 +38,7 @@ async function handleShare(): Promise<void> {
     <div class="cpub-modal-content">
       <div class="cpub-modal-header">
         <h3 class="cpub-modal-title">Share to Hub</h3>
-        <button class="cpub-modal-close" @click="emit('close')"><i class="fa-solid fa-xmark"></i></button>
+        <button class="cpub-modal-close" aria-label="Close" @click="emit('close')"><i class="fa-solid fa-xmark"></i></button>
       </div>
 
       <p class="cpub-modal-desc">Share "{{ contentTitle }}" to one of your hubs.</p>

package/components/blocks/BlockCodeView.vue

@@ -106,39 +106,40 @@ async function copyCode(): Promise<void> {
 </template>
 
 <style>
-/* highlight.js github-dark theme — MUST be unscoped so hljs classes apply to v-html content */
+/* highlight.js theme — MUST be unscoped so hljs classes apply to v-html content */
+/* Colors use --hljs-* / --code-* tokens from base.css — overridable by themes */
 pre.hljs {
-  background: #0d1117;
-  color: #e6edf3;
+  background: var(--code-bg);
+  color: var(--code-text);
 }
 pre.hljs .hljs-comment,
-pre.hljs .hljs-quote { color: #8b949e; font-style: italic; }
+pre.hljs .hljs-quote { color: var(--hljs-comment); font-style: italic; }
 pre.hljs .hljs-keyword,
 pre.hljs .hljs-selector-tag,
-pre.hljs .hljs-type { color: #ff7b72; }
+pre.hljs .hljs-type { color: var(--hljs-keyword); }
 pre.hljs .hljs-literal,
 pre.hljs .hljs-number,
-pre.hljs .hljs-tag .hljs-attr { color: #79c0ff; }
+pre.hljs .hljs-tag .hljs-attr { color: var(--hljs-literal); }
 pre.hljs .hljs-string,
-pre.hljs .hljs-addition { color: #a5d6ff; }
-pre.hljs .hljs-deletion { color: #ffa198; }
+pre.hljs .hljs-addition { color: var(--hljs-string); }
+pre.hljs .hljs-deletion { color: var(--hljs-deletion); }
 pre.hljs .hljs-regexp,
-pre.hljs .hljs-link { color: #a5d6ff; }
-pre.hljs .hljs-meta { color: #d2a8ff; }
+pre.hljs .hljs-link { color: var(--hljs-string); }
+pre.hljs .hljs-meta { color: var(--hljs-meta); }
 pre.hljs .hljs-title,
 pre.hljs .hljs-section,
-pre.hljs .hljs-built_in { color: #d2a8ff; }
+pre.hljs .hljs-built_in { color: var(--hljs-meta); }
 pre.hljs .hljs-name,
 pre.hljs .hljs-selector-id,
-pre.hljs .hljs-selector-class { color: #7ee787; }
+pre.hljs .hljs-selector-class { color: var(--hljs-name); }
 pre.hljs .hljs-variable,
-pre.hljs .hljs-template-variable { color: #ffa657; }
-pre.hljs .hljs-attribute { color: #79c0ff; }
+pre.hljs .hljs-template-variable { color: var(--hljs-variable); }
+pre.hljs .hljs-attribute { color: var(--hljs-literal); }
 pre.hljs .hljs-symbol,
-pre.hljs .hljs-bullet { color: #ffa657; }
-pre.hljs .hljs-subst { color: #e6edf3; }
-pre.hljs .hljs-title.function_ { color: #d2a8ff; }
-pre.hljs .hljs-title.class_ { color: #ffa657; }
+pre.hljs .hljs-bullet { color: var(--hljs-variable); }
+pre.hljs .hljs-subst { color: var(--code-text); }
+pre.hljs .hljs-title.function_ { color: var(--hljs-meta); }
+pre.hljs .hljs-title.class_ { color: var(--hljs-variable); }
 </style>
 
 <style scoped>
@@ -153,7 +154,7 @@ pre.hljs .hljs-title.class_ { color: #ffa657; }
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
-  background: #161b22;
+  background: var(--code-header-bg);
   border-bottom: var(--border-width-default) solid var(--border);
 }
 
@@ -163,22 +164,22 @@ pre.hljs .hljs-title.class_ { color: #ffa657; }
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: #7ee787;
+  color: var(--code-green);
 }
 
 .cpub-code-filename {
   font-family: var(--font-mono);
   font-size: 10px;
-  color: #8b949e;
+  color: var(--code-muted);
   flex: 1;
 }
 
 .cpub-code-copy {
   font-family: var(--font-mono);
   font-size: 10px;
-  color: #8b949e;
+  color: var(--code-muted);
   background: transparent;
-  border: var(--border-width-default) solid #30363d;
+  border: var(--border-width-default) solid var(--code-border);
   padding: 3px 8px;
   cursor: pointer;
   display: flex;
@@ -189,8 +190,8 @@ pre.hljs .hljs-title.class_ { color: #ffa657; }
 }
 
 .cpub-code-copy:hover {
-  color: #e6edf3;
-  border-color: #8b949e;
+  color: var(--code-text);
+  border-color: var(--code-muted);
 }
 
 .cpub-code-body {

package/components/contest/ContestEntries.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { Serialized, ContestEntryItem } from '@commonpub/server';
+
+const props = defineProps<{
+  entries: Serialized<ContestEntryItem>[];
+  contestStatus?: string;
+  currentUserId?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'withdraw', entryId: string): void;
+}>();
+
+function confirmWithdraw(entryId: string): void {
+  if (confirm('Withdraw this entry? This cannot be undone.')) {
+    emit('withdraw', entryId);
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-entries-section">
+    <div class="cpub-sec-head">
+      <h2><i class="fa fa-box-open" style="color: var(--teal);"></i> Submitted Entries</h2>
+      <span class="cpub-sec-sub">{{ entries.length }} entries</span>
+    </div>
+    <div v-if="entries.length" class="cpub-entry-grid">
+      <div
+        v-for="(entry, i) in entries"
+        :key="entry.id"
+        class="cpub-entry-card"
+      >
+        <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" />
+          <template v-else>
+            <div class="cpub-entry-grid-pat"></div>
+            <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>
+        </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>
+          <div class="cpub-entry-author">
+            <div class="cpub-entry-av">
+              <img v-if="entry.authorAvatarUrl" :src="entry.authorAvatarUrl" :alt="entry.authorName || entry.authorUsername" class="cpub-entry-av-img" />
+              <span v-else>{{ (entry.authorName || entry.authorUsername || '?').charAt(0).toUpperCase() }}</span>
+            </div>
+            <NuxtLink v-if="entry.authorUsername" :to="`/u/${entry.authorUsername}`" class="cpub-entry-author-link">{{ entry.authorName }}</NuxtLink>
+            <span class="cpub-entry-meta">{{ new Date(entry.submittedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}</span>
+          </div>
+          <div class="cpub-entry-footer">
+            <span v-if="entry.score != null" class="cpub-entry-score">Score: {{ entry.score }}</span>
+            <button
+              v-if="currentUserId && entry.userId === currentUserId && contestStatus === 'active'"
+              class="cpub-withdraw-btn"
+              @click.prevent="confirmWithdraw(entry.id)"
+            ><i class="fa-solid fa-trash-can"></i> Withdraw</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="cpub-empty-state">
+      <div class="cpub-empty-state-icon"><i class="fa-solid fa-box-open"></i></div>
+      <p class="cpub-empty-state-title">No entries yet</p>
+      <p v-if="contestStatus === 'active'" class="cpub-empty-state-desc">Be the first to submit an entry!</p>
+      <p v-else-if="contestStatus === 'cancelled'" class="cpub-empty-state-desc">This contest was cancelled.</p>
+      <p v-else-if="contestStatus === 'completed'" class="cpub-empty-state-desc">No entries were submitted.</p>
+      <p v-else class="cpub-empty-state-desc">Submissions are not open yet.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+.cpub-sec-sub { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
+
+.cpub-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
+.cpub-entry-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
+.cpub-entry-card:hover { box-shadow: var(--shadow-accent); }
+.cpub-entry-thumb { height: 110px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+.cpub-entry-bg-light { background: var(--surface2); }
+.cpub-entry-bg-dark { background: var(--surface3); }
+.cpub-entry-grid-pat { position: absolute; inset: 0; background-image: linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px); background-size: 20px 20px; opacity: .3; }
+.cpub-entry-icon { position: relative; z-index: 1; font-size: 22px; opacity: .65; color: var(--accent); }
+.cpub-entry-rank { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-family: var(--font-mono); font-weight: 700; padding: 2px 7px; border-radius: var(--radius); }
+.cpub-rank-1 { background: var(--yellow-bg); color: var(--yellow); border: var(--border-width-default) solid var(--yellow); }
+.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-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); }
+.cpub-entry-cover-img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-entry-av { width: 18px; height: 18px; border-radius: 50%; background: var(--surface3); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 7px; font-family: var(--font-mono); color: var(--text-faint); flex-shrink: 0; overflow: hidden; }
+.cpub-entry-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-entry-author { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
+.cpub-entry-author-link { color: var(--text-dim); text-decoration: none; }
+.cpub-entry-author-link:hover { color: var(--accent); }
+.cpub-entry-meta { color: var(--text-faint); }
+.cpub-entry-footer { display: flex; align-items: center; gap: 6px; }
+.cpub-entry-score { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); display: flex; align-items: center; gap: 3px; }
+.cpub-withdraw-btn { display: flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--radius); border: var(--border-width-default) solid var(--red-border); background: var(--surface); color: var(--red); cursor: pointer; margin-left: auto; }
+.cpub-withdraw-btn:hover { background: var(--red-bg); }
+
+.cpub-empty-state { text-align: center; padding: 32px 0; }
+.cpub-empty-state-icon { font-size: 24px; color: var(--text-faint); margin-bottom: 8px; }
+.cpub-empty-state-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+.cpub-empty-state-desc { font-size: 12px; color: var(--text-dim); }
+
+@media (max-width: 768px) { .cpub-entry-grid { grid-template-columns: 1fr; } }
+</style>

package/components/contest/ContestHero.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import type { Serialized, ContestDetail } from '@commonpub/server';
+
+const props = defineProps<{
+  contest: Serialized<ContestDetail> | null;
+  isAdmin: boolean;
+  isAuthenticated: boolean;
+  transitioning: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'submit-entry'): void;
+  (e: 'transition', status: string): void;
+  (e: 'copy-link'): void;
+}>();
+
+const c = computed(() => props.contest);
+
+// Countdown timer
+const countdown = ref({ days: '00', hours: '00', mins: '00', secs: '00' });
+let countdownInterval: ReturnType<typeof setInterval> | null = null;
+
+function pad(n: number): string { return String(n).padStart(2, '0'); }
+
+function updateCountdown(): void {
+  const target = c.value?.endDate ? new Date(c.value.endDate) : new Date();
+  const now = new Date();
+  let diff = Math.max(0, Math.floor((target.getTime() - now.getTime()) / 1000));
+  const days = Math.floor(diff / 86400); diff %= 86400;
+  const hours = Math.floor(diff / 3600); diff %= 3600;
+  const mins = Math.floor(diff / 60);
+  const secs = diff % 60;
+  countdown.value = { days: pad(days), hours: pad(hours), mins: pad(mins), secs: pad(secs) };
+}
+
+onMounted(() => {
+  updateCountdown();
+  countdownInterval = setInterval(updateCountdown, 1000);
+});
+
+onUnmounted(() => {
+  if (countdownInterval) clearInterval(countdownInterval);
+});
+
+const countdownLabel = computed(() => {
+  if (c.value?.status === 'completed' || c.value?.status === 'cancelled') return 'Contest ended';
+  if (c.value?.status === 'judging') return 'Judging ends in';
+  return 'Submissions close in';
+});
+
+const isEnded = computed(() => c.value?.status === 'completed' || c.value?.status === 'cancelled');
+</script>
+
+<template>
+  <div class="cpub-hero">
+    <div class="cpub-hero-pattern">
+      <div class="cpub-hero-dots"></div>
+      <div class="cpub-hero-lines"></div>
+    </div>
+
+    <div class="cpub-hero-inner">
+      <div v-if="c?.status === 'cancelled'" class="cpub-cancelled-banner">
+        <i class="fa-solid fa-ban"></i> This contest has been cancelled.
+      </div>
+
+      <div class="cpub-hero-eyebrow">
+        <span class="cpub-contest-badge"><i class="fa fa-trophy"></i> Contest</span>
+      </div>
+
+      <div class="cpub-hero-title">{{ c?.title || 'Contest' }}</div>
+      <div class="cpub-hero-tagline">{{ c?.description || 'No description available.' }}</div>
+
+      <div class="cpub-hero-meta">
+        <span v-if="c?.startDate || c?.endDate" class="cpub-hero-meta-item">
+          <i class="fa fa-calendar"></i>
+          {{ c?.startDate ? new Date(c.startDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '' }}{{ c?.startDate && c?.endDate ? ' — ' : '' }}{{ c?.endDate ? new Date(c.endDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '' }}
+        </span>
+        <span v-if="c?.startDate || c?.endDate" class="cpub-hero-meta-sep">|</span>
+        <span class="cpub-hero-meta-item"><i class="fa fa-folder-open"></i> {{ c?.entryCount ?? 0 }} entries</span>
+      </div>
+
+      <!-- COUNTDOWN -->
+      <div v-if="!isEnded" class="cpub-countdown-section">
+        <div class="cpub-countdown-label"><i class="fa fa-clock"></i> {{ countdownLabel }}</div>
+        <div class="cpub-countdown-row">
+          <div class="cpub-countdown-block">
+            <div class="cpub-countdown-val">{{ countdown.days }}</div>
+            <div class="cpub-countdown-unit">Days</div>
+          </div>
+          <div class="cpub-countdown-sep">:</div>
+          <div class="cpub-countdown-block">
+            <div class="cpub-countdown-val">{{ countdown.hours }}</div>
+            <div class="cpub-countdown-unit">Hours</div>
+          </div>
+          <div class="cpub-countdown-sep">:</div>
+          <div class="cpub-countdown-block">
+            <div class="cpub-countdown-val">{{ countdown.mins }}</div>
+            <div class="cpub-countdown-unit">Minutes</div>
+          </div>
+          <div class="cpub-countdown-sep">:</div>
+          <div class="cpub-countdown-block">
+            <div class="cpub-countdown-val">{{ countdown.secs }}</div>
+            <div class="cpub-countdown-unit">Seconds</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cpub-hero-cta">
+        <button v-if="isAuthenticated && c?.status === 'active'" class="cpub-btn cpub-btn-primary cpub-btn-lg" @click="emit('submit-entry')"><i class="fa fa-upload"></i> Submit Entry</button>
+        <button class="cpub-btn cpub-btn-lg cpub-btn-dark" @click="emit('copy-link')"><i class="fa fa-link"></i> Share</button>
+      </div>
+
+      <!-- Admin controls -->
+      <div v-if="isAdmin && c" class="cpub-admin-controls">
+        <span class="cpub-admin-controls-label"><i class="fa-solid fa-shield-halved"></i> Admin</span>
+        <button v-if="c.status === 'upcoming'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="emit('transition', 'active')"><i class="fa-solid fa-play"></i> Activate</button>
+        <button v-if="c.status === 'active'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="emit('transition', 'judging')"><i class="fa-solid fa-gavel"></i> Start Judging</button>
+        <button v-if="c.status === 'judging'" class="cpub-btn cpub-btn-sm" :disabled="transitioning" @click="emit('transition', 'completed')"><i class="fa-solid fa-check"></i> Complete</button>
+        <button v-if="c.status !== 'completed' && c.status !== 'cancelled'" class="cpub-btn cpub-btn-sm cpub-btn-cancel" :disabled="transitioning" @click="emit('transition', 'cancelled')"><i class="fa-solid fa-ban"></i> Cancel</button>
+        <span class="cpub-admin-status">Status: <strong>{{ c.status }}</strong></span>
+      </div>
+
+      <div class="cpub-hero-stats">
+        <div class="cpub-hero-stat">
+          <div class="cpub-hero-stat-val">{{ c?.entryCount ?? 0 }}</div>
+          <div class="cpub-hero-stat-label">Entries</div>
+        </div>
+        <div class="cpub-hero-stat">
+          <div class="cpub-hero-stat-val">{{ c?.status ?? 'draft' }}</div>
+          <div class="cpub-hero-stat-label">Status</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-hero {
+  --hero-bg: var(--text);
+  --hero-text: var(--color-text-inverse);
+  --hero-text-dim: var(--text-faint);
+  --hero-border: rgba(255, 255, 255, 0.15);
+  --hero-surface: rgba(255, 255, 255, 0.06);
+  position: relative; overflow: hidden; background: var(--hero-bg); padding: 56px 0 48px;
+}
+.cpub-hero-pattern { position: absolute; inset: 0; }
+.cpub-hero-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--accent-border) 1.5px, transparent 1.5px); background-size: 28px 28px; opacity: .3; }
+.cpub-hero-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--accent-bg) 1px, transparent 1px), linear-gradient(90deg, var(--accent-bg) 1px, transparent 1px); background-size: 56px 56px; }
+.cpub-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
+.cpub-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
+.cpub-contest-badge { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); padding: 3px 10px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 5px; }
+.cpub-contest-badge i { font-size: 8px; }
+.cpub-hero-title { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; color: var(--hero-text); }
+.cpub-hero-tagline { font-size: 14px; color: var(--hero-text-dim); line-height: 1.55; max-width: 580px; margin-bottom: 28px; }
+.cpub-hero-meta { display: flex; align-items: center; gap: 20px; font-size: 11px; color: var(--hero-text-dim); font-family: var(--font-mono); margin-bottom: 28px; }
+.cpub-hero-meta-item { display: flex; align-items: center; gap: 5px; }
+.cpub-hero-meta-sep { color: var(--hero-border); }
+
+.cpub-countdown-section { margin-bottom: 28px; }
+.cpub-countdown-label { font-size: 10px; font-family: var(--font-mono); color: var(--hero-text-dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }
+.cpub-countdown-label i { color: var(--accent); }
+.cpub-countdown-row { display: flex; align-items: center; gap: 8px; }
+.cpub-countdown-block { display: flex; flex-direction: column; align-items: center; background: var(--hero-surface); border: var(--border-width-default) solid var(--hero-border); border-radius: var(--radius); padding: 10px 16px; min-width: 60px; box-shadow: 4px 4px 0 var(--hero-surface); }
+.cpub-countdown-val { font-size: 26px; font-weight: 700; font-family: var(--font-mono); color: var(--hero-text); line-height: 1; margin-bottom: 4px; }
+.cpub-countdown-unit { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--hero-text-dim); font-family: var(--font-mono); }
+.cpub-countdown-sep { font-size: 20px; font-weight: 700; color: var(--hero-border); margin-top: -8px; font-family: var(--font-mono); }
+
+.cpub-cancelled-banner { background: var(--red-bg); border: var(--border-width-default) solid var(--red-border); color: var(--red); padding: 10px 14px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
+
+.cpub-hero-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.cpub-btn-lg { padding: 10px 22px; font-size: 13px; }
+.cpub-btn-dark { background: var(--hero-surface); color: var(--hero-text); border-color: var(--hero-border); }
+.cpub-btn-dark:hover { background: var(--hero-surface); }
+.cpub-btn-cancel { color: var(--red); border-color: var(--red-border); }
+.cpub-btn-cancel:hover { background: var(--red-bg); }
+
+.cpub-hero-stats { display: flex; gap: 24px; margin-top: 28px; padding-top: 24px; border-top: var(--border-width-default) solid var(--hero-border); }
+.cpub-hero-stat { display: flex; flex-direction: column; }
+.cpub-hero-stat-val { font-size: 20px; font-weight: 700; font-family: var(--font-mono); color: var(--hero-text); }
+.cpub-hero-stat-label { font-size: 10px; color: var(--hero-text-dim); text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); }
+
+.cpub-admin-controls { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-admin-controls-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-right: 4px; font-family: var(--font-mono); }
+.cpub-admin-status { font-size: 11px; color: var(--text-dim); margin-left: auto; font-family: var(--font-mono); }
+.cpub-admin-status strong { color: var(--accent); text-transform: capitalize; }
+
+@media (max-width: 768px) {
+  .cpub-hero { padding: 32px 0 28px; }
+  .cpub-hero-inner { padding: 0 16px; }
+  .cpub-hero-title { font-size: 24px; }
+  .cpub-hero-tagline { font-size: 13px; }
+  .cpub-hero-meta { flex-wrap: wrap; gap: 10px; }
+  .cpub-countdown-block { padding: 8px 12px; min-width: 48px; }
+  .cpub-countdown-val { font-size: 20px; }
+}
+@media (max-width: 480px) {
+  .cpub-hero-title { font-size: 20px; }
+  .cpub-hero-tagline { font-size: 12px; margin-bottom: 16px; }
+  .cpub-hero-stats { flex-wrap: wrap; gap: 16px; }
+  .cpub-hero-stat-val { font-size: 16px; }
+  .cpub-hero-cta { flex-direction: column; align-items: stretch; }
+  .cpub-countdown-row { flex-wrap: wrap; justify-content: center; }
+}
+</style>

package/components/contest/ContestJudges.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps<{
+  judgeIds: string[];
+}>();
+
+interface JudgeInfo {
+  id: string;
+  username: string;
+  displayName: string | null;
+  avatarUrl: string | null;
+}
+
+const { data: judgesData } = useLazyFetch<{ items: JudgeInfo[] }>('/api/users', {
+  query: computed(() => ({ ids: props.judgeIds.join(','), limit: 50 })),
+  immediate: props.judgeIds.length > 0,
+});
+
+const judges = computed<JudgeInfo[]>(() => judgesData.value?.items ?? []);
+</script>
+
+<template>
+  <div v-if="judgeIds.length > 0" class="cpub-judges-section">
+    <div class="cpub-sec-head">
+      <h2><i class="fa-solid fa-gavel" style="color: var(--accent);"></i> Judges</h2>
+    </div>
+    <div class="cpub-judges-grid">
+      <div v-for="judge in judges" :key="judge.id" class="cpub-judge-card">
+        <div class="cpub-judge-av">
+          <img v-if="judge.avatarUrl" :src="judge.avatarUrl" :alt="judge.displayName || judge.username" class="cpub-judge-av-img" />
+          <span v-else>{{ (judge.displayName || judge.username || '?').charAt(0).toUpperCase() }}</span>
+        </div>
+        <NuxtLink :to="`/u/${judge.username}`" class="cpub-judge-name">{{ judge.displayName || judge.username }}</NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+
+.cpub-judges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
+.cpub-judge-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow-md); }
+.cpub-judge-av { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; 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-judge-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-judge-name { font-size: 11px; font-weight: 600; color: var(--text); text-decoration: none; }
+.cpub-judge-name:hover { color: var(--accent); }
+
+@media (max-width: 768px) { .cpub-judges-grid { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 480px) { .cpub-judges-grid { grid-template-columns: 1fr; } }
+</style>

package/components/contest/ContestPrizes.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+defineProps<{
+  prizes: Array<{ place: number; title: string; description?: string; value?: string }>;
+}>();
+
+function placeLabel(place: number): string {
+  if (place === 1) return '1ST PLACE';
+  if (place === 2) return '2ND PLACE';
+  if (place === 3) return '3RD PLACE';
+  return `${place}TH PLACE`;
+}
+
+function placeColor(place: number): string {
+  if (place === 1) return 'gold';
+  if (place === 2) return 'silver';
+  if (place === 3) return 'bronze';
+  return 'default';
+}
+
+function placeIcon(place: number): string {
+  if (place === 1) return 'fa-trophy';
+  if (place === 2) return 'fa-medal';
+  if (place === 3) return 'fa-award';
+  return 'fa-star';
+}
+</script>
+
+<template>
+  <div class="cpub-prizes-section">
+    <div class="cpub-sec-head">
+      <h2><i class="fa fa-trophy" style="color: var(--yellow);"></i> Prizes</h2>
+    </div>
+    <div class="cpub-prize-grid">
+      <div
+        v-for="prize in prizes"
+        :key="prize.place"
+        class="cpub-prize-card"
+        :class="`cpub-prize-${placeColor(prize.place)}`"
+      >
+        <div class="cpub-prize-rank" :class="`cpub-prize-rank-${placeColor(prize.place)}`">{{ placeLabel(prize.place) }}</div>
+        <div class="cpub-prize-icon" :class="`cpub-prize-icon-${placeColor(prize.place)}`"><i class="fa-solid" :class="placeIcon(prize.place)"></i></div>
+        <div v-if="prize.value" class="cpub-prize-amount" :class="`cpub-prize-amount-${placeColor(prize.place)}`">{{ prize.value }}</div>
+        <div class="cpub-prize-title">{{ prize.title }}</div>
+        <div v-if="prize.description" class="cpub-prize-desc">{{ prize.description }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-prizes-section { }
+
+.cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+
+.cpub-prize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
+.cpub-prize-card { border-radius: var(--radius); padding: 20px; text-align: center; background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); }
+.cpub-prize-gold { box-shadow: var(--shadow-accent); }
+
+.cpub-prize-rank { font-size: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: .08em; margin-bottom: 8px; }
+.cpub-prize-rank-gold { color: var(--yellow); }
+.cpub-prize-rank-silver { color: var(--silver); }
+.cpub-prize-rank-bronze { color: var(--bronze); }
+.cpub-prize-rank-default { color: var(--text-dim); }
+
+.cpub-prize-icon { font-size: 28px; margin-bottom: 8px; }
+.cpub-prize-icon-gold { color: var(--yellow); }
+.cpub-prize-icon-silver { color: var(--silver); }
+.cpub-prize-icon-bronze { color: var(--bronze); }
+.cpub-prize-icon-default { color: var(--text-dim); }
+
+.cpub-prize-amount { font-size: 24px; font-weight: 800; font-family: var(--font-mono); margin-bottom: 4px; }
+.cpub-prize-amount-gold { color: var(--yellow); }
+.cpub-prize-amount-silver { color: var(--silver); }
+.cpub-prize-amount-bronze { color: var(--bronze); }
+.cpub-prize-amount-default { color: var(--text-dim); }
+
+.cpub-prize-title { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
+.cpub-prize-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
+
+@media (max-width: 768px) { .cpub-prize-grid { grid-template-columns: 1fr; } }
+</style>

package/components/contest/ContestRules.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  rules: string;
+}>();
+
+const ruleLines = computed(() =>
+  props.rules.split('\n').filter((line) => line.trim().length > 0),
+);
+</script>
+
+<template>
+  <div class="cpub-rules-section">
+    <div class="cpub-sec-head">
+      <h2><i class="fa fa-file-lines" style="color: var(--purple);"></i> Rules</h2>
+    </div>
+    <div class="cpub-rules-card">
+      <ol v-if="ruleLines.length > 1" class="cpub-rules-list">
+        <li v-for="(line, i) in ruleLines" :key="i" class="cpub-rule-item">{{ line }}</li>
+      </ol>
+      <div v-else class="cpub-rules-text">{{ rules }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+
+.cpub-rules-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-md); }
+.cpub-rules-list { padding-left: 20px; margin: 0; }
+.cpub-rule-item { font-size: 12px; color: var(--text-dim); line-height: 1.7; margin-bottom: 6px; }
+.cpub-rule-item:last-child { margin-bottom: 0; }
+.cpub-rules-text { font-size: 12px; color: var(--text-dim); line-height: 1.7; white-space: pre-line; }
+</style>