feat: ship creator journey v2 and profile updates

resources/js/Pages/Artwork/SimilarArtworksHeader.jsx

@@ -0,0 +1,124 @@
+import React from 'react'
+
+export default function SimilarArtworksHeader({ artwork }) {
+  if (!artwork) return null
+
+  const title = artwork.title || 'Artwork'
+  const artworkUrl = artwork.url || '#'
+  const authorName = artwork.author_name || 'Artist'
+  const authorHref = artwork.author_profile_url || (artwork.author_username ? `/@${artwork.author_username}` : null)
+  const browseHref = artwork.browse_url || (artwork.content_type_slug ? `/${artwork.content_type_slug}` : '/explore')
+  const thumbUrl = artwork.thumb_lg || artwork.thumb_md || null
+  const thumbSrcSet = artwork.thumb_srcset || undefined
+  const tags = Array.isArray(artwork.tag_slugs) ? artwork.tag_slugs.filter(Boolean) : []
+
+  return (
+    <section className="relative overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_28%),linear-gradient(145deg,rgba(8,17,29,0.96),rgba(11,20,34,0.94))] shadow-[0_28px_80px_rgba(2,6,23,0.34)]">
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(249,115,22,0.12),transparent_24%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.12),transparent_30%)]" />
+      <div className="relative grid gap-6 p-5 md:p-7 xl:grid-cols-[280px_minmax(0,1fr)] xl:items-center">
+        <a
+          href={artworkUrl}
+          className="group relative overflow-hidden rounded-[28px] border border-white/10 bg-[#08111d] shadow-[0_18px_40px_rgba(2,6,23,0.28)]"
+        >
+          <div className="aspect-[5/4] overflow-hidden">
+            {thumbUrl ? (
+              <img
+                src={thumbUrl}
+                srcSet={thumbSrcSet}
+                sizes="(min-width: 1280px) 280px, (min-width: 768px) 40vw, 100vw"
+                alt={title}
+                className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center bg-white/[0.04] text-sm text-slate-500">
+                Preview unavailable
+              </div>
+            )}
+          </div>
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/55 via-transparent to-transparent" />
+        </a>
+
+        <div className="min-w-0">
+          <div className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200">
+            <span className="h-2 w-2 rounded-full bg-sky-300 shadow-[0_0_12px_rgba(125,211,252,0.85)]" />
+            Visual discovery
+          </div>
+
+          <h1 className="mt-4 max-w-4xl text-3xl font-semibold leading-tight tracking-[-0.04em] text-white md:text-4xl xl:text-5xl">
+            Artworks similar to{' '}
+            <a href={artworkUrl} className="underline decoration-white/15 underline-offset-4 transition hover:decoration-sky-300">
+              {title}
+            </a>
+          </h1>
+
+          <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-300">
+            Browse visually related artworks, compare style cues, and jump back into the original piece whenever you need context.
+          </p>
+
+          <div className="mt-4 flex flex-wrap items-center gap-2.5 text-sm text-slate-300">
+            <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5">
+              {artwork.author_avatar ? (
+                <img
+                  src={artwork.author_avatar}
+                  alt={authorName}
+                  className="h-5 w-5 rounded-full object-cover ring-1 ring-white/15"
+                />
+              ) : null}
+              {authorHref ? (
+                <a href={authorHref} className="font-medium text-white/85 transition hover:text-white">
+                  {authorName}
+                </a>
+              ) : (
+                <span className="font-medium text-white/85">{authorName}</span>
+              )}
+            </span>
+
+            {artwork.category_name ? (
+              <span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-slate-300">
+                {artwork.category_name}
+              </span>
+            ) : null}
+
+            {artwork.content_type_name ? (
+              <span className="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1.5 text-xs font-medium text-amber-100">
+                {artwork.content_type_name}
+              </span>
+            ) : null}
+          </div>
+
+          {tags.length > 0 ? (
+            <div className="mt-4 flex flex-wrap gap-2">
+              {tags.map((tagSlug) => (
+                <span
+                  key={tagSlug}
+                  className="rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs font-medium text-slate-300 transition hover:border-sky-300/30 hover:bg-sky-400/10 hover:text-white"
+                >
+                  #{tagSlug}
+                </span>
+              ))}
+            </div>
+          ) : null}
+
+          <div className="mt-6 flex flex-wrap gap-3">
+            <a
+              href={artworkUrl}
+              className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.06] px-4 py-2.5 text-sm font-semibold text-white/85 transition hover:bg-white/[0.1] hover:text-white"
+            >
+              <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+              </svg>
+              Back to artwork
+            </a>
+
+            <a
+              href={browseHref}
+              className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 hover:text-white"
+            >
+              Browse {artwork.content_type_name || 'artworks'}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

resources/js/Pages/ArtworkPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import axios from 'axios'
 import ArtworkHero from '../components/artwork/ArtworkHero'
@@ -7,6 +7,7 @@ import ArtworkMeta from '../components/artwork/ArtworkMeta'
 import ArtworkAwards from '../components/artwork/ArtworkAwards'
 import ArtworkTags from '../components/artwork/ArtworkTags'
 import ArtworkDescription from '../components/artwork/ArtworkDescription'
+import ArtworkEvolutionPanel from '../components/artwork/ArtworkEvolutionPanel'
 import ArtworkComments from '../components/artwork/ArtworkComments'
 import ArtworkActionBar from '../components/artwork/ArtworkActionBar'
 import ArtworkDetailsPanel from '../components/artwork/ArtworkDetailsPanel'
@@ -42,6 +43,7 @@ function publisherToGroupSummary(publisher) {
 
 function ArtworkPage({ artwork: initialArtwork, related: initialRelated, presentMd: initialMd, presentLg: initialLg, presentXl: initialXl, presentSq: initialSq, canonicalUrl: initialCanonical, isAuthenticated = false, comments: initialComments = [], groupSummary: initialGroupSummary = null }) {
   const [viewerOpen, setViewerOpen] = useState(false)
+  const [showMatureArtwork, setShowMatureArtwork] = useState(false)
   const openViewer = useCallback(() => setViewerOpen(true), [])
   const closeViewer = useCallback(() => setViewerOpen(false), [])
 
@@ -98,47 +100,77 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
     setGroupSummary(data.group_summary ?? publisherToGroupSummary(data.publisher))
     setSelectedMediaId('cover')
     setViewerOpen(false)  // close viewer when navigating away
+    setShowMatureArtwork(false)
   }, [])
 
   if (!artwork) return null
 
-  const mediaItems = useMemo(() => {
-    const coverItem = {
-      id: 'cover',
-      label: 'Cover art',
-      thumbUrl: presentSq?.url || presentMd?.url || presentLg?.url || artwork?.thumbs?.sq?.url || artwork?.thumbs?.md?.url || null,
-      mdUrl: presentMd?.url || artwork?.thumbs?.md?.url || null,
-      lgUrl: presentLg?.url || artwork?.thumbs?.lg?.url || null,
-      xlUrl: presentXl?.url || artwork?.thumbs?.xl?.url || null,
-      width: Number(artwork?.dimensions?.width || artwork?.width || 0) || null,
-      height: Number(artwork?.dimensions?.height || artwork?.height || 0) || null,
-    }
+  const requiresInterstitial = Boolean(artwork?.maturity?.requires_interstitial) && !showMatureArtwork
 
-    const screenshotItems = Array.isArray(artwork?.screenshots)
-      ? artwork.screenshots.map((item, index) => ({
-        id: item.id || `shot-${index + 1}`,
-        label: item.label || `Screenshot ${index + 1}`,
-        thumbUrl: item.thumb_url || item.url || null,
-        mdUrl: item.url || item.thumb_url || null,
-        lgUrl: item.url || item.thumb_url || null,
-        xlUrl: item.url || item.thumb_url || null,
-        width: null,
-        height: null,
-      }))
-      : []
+  if (requiresInterstitial) {
+    return (
+      <main className="pb-24 pt-8 lg:pb-12 lg:pt-10">
+        <div className="mx-auto w-full max-w-3xl px-4 sm:px-6 lg:px-8">
+          <section className="rounded-[32px] border border-amber-300/20 bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.18),transparent_32%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.34)] md:p-8">
+            <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-amber-200/80">Content warning</p>
+            <h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{artwork?.maturity?.warning_title || 'Mature content warning'}</h1>
+            <p className="mt-3 text-sm leading-relaxed text-slate-200/90">{artwork?.maturity?.warning_message || 'This artwork may contain mature material. Continue only if you want to view it.'}</p>
+            <div className="mt-5 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-4 text-sm text-slate-300">
+              <div className="font-semibold text-white">{artwork.title}</div>
+              <div className="mt-1">by {artwork?.publisher?.name || artwork?.user?.name || 'Artist'}</div>
+            </div>
+            <div className="mt-6 flex flex-wrap gap-3">
+              <button
+                type="button"
+                onClick={() => setShowMatureArtwork(true)}
+                className="inline-flex items-center gap-2 rounded-2xl border border-amber-300/25 bg-amber-400/12 px-5 py-3 text-sm font-semibold text-amber-100 transition hover:bg-amber-400/18"
+              >
+                <i className="fa-solid fa-eye" />
+                Show artwork
+              </button>
+              <a
+                href={artwork?.publisher?.profile_url || '/discover/trending'}
+                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
+              >
+                <i className="fa-solid fa-arrow-left" />
+                Leave this page
+              </a>
+            </div>
+          </section>
+        </div>
+      </main>
+    )
+  }
 
-    return [coverItem, ...screenshotItems].filter((item) => Boolean(item.thumbUrl || item.lgUrl || item.xlUrl))
-  }, [artwork, presentMd, presentLg, presentXl, presentSq])
+  const coverItem = {
+    id: 'cover',
+    label: 'Cover art',
+    thumbUrl: presentSq?.url || presentMd?.url || presentLg?.url || artwork?.thumbs?.sq?.url || artwork?.thumbs?.md?.url || null,
+    mdUrl: presentMd?.url || artwork?.thumbs?.md?.url || null,
+    lgUrl: presentLg?.url || artwork?.thumbs?.lg?.url || null,
+    xlUrl: presentXl?.url || artwork?.thumbs?.xl?.url || null,
+    width: Number(artwork?.dimensions?.width || artwork?.width || 0) || null,
+    height: Number(artwork?.dimensions?.height || artwork?.height || 0) || null,
+  }
+
+  const screenshotItems = Array.isArray(artwork?.screenshots)
+    ? artwork.screenshots.map((item, index) => ({
+      id: item.id || `shot-${index + 1}`,
+      label: item.label || `Screenshot ${index + 1}`,
+      thumbUrl: item.thumb_url || item.url || null,
+      mdUrl: item.url || item.thumb_url || null,
+      lgUrl: item.url || item.thumb_url || null,
+      xlUrl: item.url || item.thumb_url || null,
+      width: null,
+      height: null,
+    }))
+    : []
+
+  const mediaItems = [coverItem, ...screenshotItems].filter((item) => Boolean(item.thumbUrl || item.lgUrl || item.xlUrl))
 
   const selectedMedia = mediaItems.find((item) => item.id === selectedMediaId) || mediaItems[0] || null
 
-  useEffect(() => {
-    if (!selectedMedia && mediaItems.length > 0) {
-      setSelectedMediaId(mediaItems[0].id)
-    }
-  }, [mediaItems, selectedMedia])
-
-  const initialAwards = artwork?.awards ?? null
+  const initialAwards = artwork?.medals ?? artwork?.awards ?? null
 
   return (
     <>
@@ -188,6 +220,9 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
               {/* Description */}
               <ArtworkDescription artwork={artwork} />
 
+              {/* Artwork evolution */}
+              <ArtworkEvolutionPanel evolution={artwork?.evolution} />
+
               {/* Artwork reactions */}
               {reactionTotals !== null && (
                 <section className="relative z-20 overflow-visible rounded-[28px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(245,158,11,0.14),transparent_42%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] px-5 py-5 shadow-[0_22px_55px_rgba(0,0,0,0.26)] backdrop-blur-xl sm:px-6">
@@ -232,7 +267,7 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
               {/* Details (collapsible) */}
               <ArtworkDetailsPanel artwork={artwork} stats={liveStats} />
 
-              {/* Awards */}
+              {/* Medals */}
               <ArtworkAwards artwork={artwork} initialAwards={initialAwards} isAuthenticated={isAuthenticated} />
             </aside>
           </div>

resources/js/Pages/Collection/CollectionManage.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { Head, usePage } from '@inertiajs/react'
+import CollectionCard from '../../components/profile/collections/CollectionCard'
 import CollectionVisibilityBadge from '../../components/profile/collections/CollectionVisibilityBadge'
 
 function getCsrfToken() {

resources/js/Pages/Collection/CollectionShow.jsx

@@ -203,6 +203,25 @@ function EntityLinkCard({ item }) {
   )
 }
 
+function CollectionCover({ collection }) {
+  const coverImage = collection?.cover_image
+  const coverMaturity = collection?.cover_image_maturity || null
+  const shouldBlur = Boolean(coverMaturity?.should_blur)
+  const isMature = Boolean(coverMaturity?.is_mature_effective)
+
+  if (!coverImage) {
+    return <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,#08111f,#0f172a,#08111f)] text-slate-500"><i className="fa-solid fa-layer-group text-5xl" /></div>
+  }
+
+  return (
+    <div className="relative">
+      <img src={coverImage} alt={collection?.title} className={`aspect-[16/10] h-full w-full object-cover ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`} />
+      {isMature ? <div className="absolute left-4 top-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature cover</div> : null}
+      {shouldBlur ? <div className="absolute inset-x-4 bottom-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
+    </div>
+  )
+}
+
 function humanizeToken(value) {
   return String(value || '')
     .replaceAll('_', ' ')
@@ -745,7 +764,7 @@ export default function CollectionShow() {
           <section className="mt-6 overflow-hidden rounded-[34px] border border-white/10 bg-white/[0.04] shadow-[0_30px_90px_rgba(2,6,23,0.28)] backdrop-blur-sm">
             <div className="grid gap-6 p-5 md:p-7 xl:grid-cols-[minmax(0,1.2fr)_420px]">
               <div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-slate-950/60">
-                {collection?.cover_image ? <img src={collection.cover_image} alt={collection.title} className="aspect-[16/10] h-full w-full object-cover" /> : <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,#08111f,#0f172a,#08111f)] text-slate-500"><i className="fa-solid fa-layer-group text-5xl" /></div>}
+                <CollectionCover collection={collection} />
                 <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.8),rgba(2,6,23,0.08))]" />
               </div>
 

resources/js/Pages/Collection/FeaturedArtworksAdmin.jsx

@@ -0,0 +1,723 @@
+import React from 'react'
+import { Head, usePage } from '@inertiajs/react'
+
+function getCsrfToken() {
+  if (typeof document === 'undefined') return ''
+  return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
+}
+
+async function requestJson(url, { method = 'POST', body } = {}) {
+  const response = await fetch(url, {
+    method,
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  })
+
+  const payload = await response.json().catch(() => ({}))
+  if (!response.ok) {
+    throw new Error(payload?.message || payload?.errors?.artwork_id?.[0] || payload?.errors?.is_active?.[0] || payload?.errors?.force_hero?.[0] || 'Request failed.')
+  }
+
+  return payload
+}
+
+function isoToLocalInput(value) {
+  if (!value) return ''
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+
+  const local = new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
+  return local.toISOString().slice(0, 16)
+}
+
+function localInputToIso(value) {
+  if (!value) return null
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+
+  return date.toISOString()
+}
+
+function formatDateTime(value) {
+  if (!value) return '—'
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date)
+}
+
+function Badge({ label, tone = 'slate' }) {
+  const toneClasses = {
+    slate: 'border-white/10 bg-white/10 text-slate-100',
+    sky: 'border-sky-300/20 bg-sky-400/15 text-sky-100',
+    emerald: 'border-emerald-300/20 bg-emerald-400/15 text-emerald-100',
+    amber: 'border-amber-300/20 bg-amber-400/15 text-amber-100',
+    rose: 'border-rose-300/20 bg-rose-400/15 text-rose-100',
+  }
+
+  return (
+    <span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.slate}`}>
+      {label}
+    </span>
+  )
+}
+
+function Field({ label, help, children }) {
+  return (
+    <label className="block space-y-2">
+      <span className="text-sm font-semibold text-white">{label}</span>
+      {children}
+      {help ? <span className="block text-xs leading-relaxed text-slate-400">{help}</span> : null}
+    </label>
+  )
+}
+
+function StatCard({ label, value, tone = 'sky' }) {
+  const toneClasses = {
+    sky: 'border-sky-300/15 bg-sky-400/10 text-sky-100',
+    amber: 'border-amber-300/15 bg-amber-400/10 text-amber-100',
+    emerald: 'border-emerald-300/15 bg-emerald-400/10 text-emerald-100',
+    rose: 'border-rose-300/15 bg-rose-400/10 text-rose-100',
+  }
+
+  return (
+    <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5 backdrop-blur-sm">
+      <div className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.sky}`}>{label}</div>
+      <div className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{value}</div>
+    </div>
+  )
+}
+
+function emptyForm() {
+  return {
+    artwork_id: '',
+    priority: 100,
+    featured_at: isoToLocalInput(new Date().toISOString()),
+    expires_at: '',
+    is_active: true,
+  }
+}
+
+function mapEntryToCandidate(entry) {
+  if (!entry) return null
+
+  return {
+    ...entry.artwork,
+    medals: entry.medals,
+    eligibility: entry.eligibility,
+    existing_feature_count: entry.duplicate_count,
+    already_featured: entry.duplicate_count > 0,
+  }
+}
+
+function compareEntries(left, right, sortKey, direction) {
+  const dir = direction === 'asc' ? 1 : -1
+  const value = (entry) => {
+    switch (sortKey) {
+      case 'featured_at':
+        return new Date(entry.featured_at || 0).getTime() || 0
+      case 'expires_at':
+        return new Date(entry.expires_at || 0).getTime() || 0
+      case 'score_30d':
+        return Number(entry.medals?.score_30d || 0)
+      default:
+        return Number(entry.priority || 0)
+    }
+  }
+
+  const leftValue = value(left)
+  const rightValue = value(right)
+  if (leftValue !== rightValue) {
+    return (leftValue > rightValue ? 1 : -1) * dir
+  }
+
+  const leftFeatured = new Date(left.featured_at || 0).getTime() || 0
+  const rightFeatured = new Date(right.featured_at || 0).getTime() || 0
+  if (leftFeatured !== rightFeatured) {
+    return (leftFeatured > rightFeatured ? 1 : -1) * dir
+  }
+
+  return Number(right.id || 0) - Number(left.id || 0)
+}
+
+export default function FeaturedArtworksAdmin() {
+  const { props } = usePage()
+  const endpoints = props.endpoints || {}
+  const capabilities = props.capabilities || {}
+  const seo = props.seo || {}
+  const [entries, setEntries] = React.useState(Array.isArray(props.entries) ? props.entries : [])
+  const [winner, setWinner] = React.useState(props.winner || null)
+  const [stats, setStats] = React.useState(props.stats || {})
+  const [notice, setNotice] = React.useState('')
+  const [busy, setBusy] = React.useState('')
+  const [filter, setFilter] = React.useState('all')
+  const [sortKey, setSortKey] = React.useState('priority')
+  const [sortDirection, setSortDirection] = React.useState('desc')
+  const [listQuery, setListQuery] = React.useState('')
+  const [searchQuery, setSearchQuery] = React.useState('')
+  const [searchResults, setSearchResults] = React.useState([])
+  const [selectedArtwork, setSelectedArtwork] = React.useState(null)
+  const [editingId, setEditingId] = React.useState(null)
+  const [form, setForm] = React.useState(emptyForm())
+
+  React.useEffect(() => {
+    setEntries(Array.isArray(props.entries) ? props.entries : [])
+    setWinner(props.winner || null)
+    setStats(props.stats || {})
+  }, [props.entries, props.stats, props.winner])
+
+  function syncPayload(payload) {
+    setEntries(Array.isArray(payload.entries) ? payload.entries : [])
+    setWinner(payload.winner || null)
+    setStats(payload.stats || {})
+    if (payload.message) {
+      setNotice(payload.message)
+    }
+  }
+
+  function resetEditor() {
+    setEditingId(null)
+    setSelectedArtwork(null)
+    setSearchResults([])
+    setSearchQuery('')
+    setForm(emptyForm())
+  }
+
+  async function handleArtworkSearch(event) {
+    event.preventDefault()
+    if (!searchQuery.trim()) {
+      setSearchResults([])
+      return
+    }
+
+    setBusy('search')
+    setNotice('')
+
+    try {
+      const url = `${endpoints.search}?q=${encodeURIComponent(searchQuery.trim())}`
+      const payload = await requestJson(url, { method: 'GET' })
+      setSearchResults(Array.isArray(payload.results) ? payload.results : [])
+      if ((payload.results || []).length === 0) {
+        setNotice('No artworks matched that search.')
+      }
+    } catch (error) {
+      setNotice(error.message || 'Artwork search failed.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  function chooseArtwork(artwork) {
+    setSelectedArtwork(artwork)
+    setForm((current) => ({
+      ...current,
+      artwork_id: artwork.id,
+    }))
+  }
+
+  function editEntry(entry) {
+    setEditingId(entry.id)
+    setSelectedArtwork(mapEntryToCandidate(entry))
+    setSearchResults([])
+    setSearchQuery('')
+    setForm({
+      artwork_id: entry.artwork_id,
+      priority: entry.priority,
+      featured_at: isoToLocalInput(entry.featured_at),
+      expires_at: isoToLocalInput(entry.expires_at),
+      is_active: Boolean(entry.is_active),
+    })
+
+    if (typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault()
+    if (!editingId && !form.artwork_id) {
+      setNotice('Select an artwork first.')
+      return
+    }
+
+    setBusy('submit')
+    setNotice('')
+
+    try {
+      const payload = await requestJson(
+        editingId
+          ? endpoints.updatePattern.replace('__FEATURE__', String(editingId))
+          : endpoints.store,
+        {
+          method: editingId ? 'PATCH' : 'POST',
+          body: {
+            artwork_id: Number(form.artwork_id),
+            priority: Number(form.priority || 0),
+            featured_at: localInputToIso(form.featured_at),
+            expires_at: localInputToIso(form.expires_at),
+            is_active: Boolean(form.is_active),
+          },
+        },
+      )
+
+      syncPayload(payload)
+      resetEditor()
+    } catch (error) {
+      setNotice(error.message || 'Failed to save this featured entry.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handleToggle(entry) {
+    setBusy(`toggle-${entry.id}`)
+    setNotice('')
+
+    try {
+      const payload = await requestJson(endpoints.togglePattern.replace('__FEATURE__', String(entry.id)), {
+        method: 'PATCH',
+      })
+      syncPayload(payload)
+    } catch (error) {
+      setNotice(error.message || 'Failed to change active state.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handleDelete(entry) {
+    if (typeof window !== 'undefined' && !window.confirm(`Delete featured entry #${entry.id}?`)) {
+      return
+    }
+
+    setBusy(`delete-${entry.id}`)
+    setNotice('')
+
+    try {
+      const payload = await requestJson(endpoints.destroyPattern.replace('__FEATURE__', String(entry.id)), {
+        method: 'DELETE',
+      })
+      syncPayload(payload)
+
+      if (editingId === entry.id) {
+        resetEditor()
+      }
+    } catch (error) {
+      setNotice(error.message || 'Failed to delete this featured entry.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  async function handleForceHero(entry) {
+    setBusy(`force-${entry.id}`)
+    setNotice('')
+
+    try {
+      const payload = await requestJson(endpoints.forceHeroPattern.replace('__FEATURE__', String(entry.id)), {
+        method: 'PATCH',
+      })
+      syncPayload(payload)
+    } catch (error) {
+      setNotice(error.message || 'Failed to change force hero state.')
+    } finally {
+      setBusy('')
+    }
+  }
+
+  const filteredEntries = React.useMemo(() => {
+    const query = listQuery.trim().toLowerCase()
+
+    return entries
+      .filter((entry) => {
+        if (filter === 'active') return Boolean(entry.is_active)
+        if (filter === 'inactive') return !entry.is_active
+        if (filter === 'expired') return Boolean(entry.is_expired)
+        if (filter === 'winner') return Boolean(entry.is_winner)
+        if (filter === 'eligible') return Boolean(entry.eligibility?.is_eligible)
+        if (filter === 'ineligible') return !entry.eligibility?.is_eligible
+        return true
+      })
+      .filter((entry) => {
+        if (!query) return true
+
+        const haystack = [
+          entry.artwork?.title,
+          entry.artwork?.owner?.display_name,
+          entry.artwork?.owner?.username,
+          entry.artwork?.id,
+        ].join(' ').toLowerCase()
+
+        return haystack.includes(query)
+      })
+      .sort((left, right) => compareEntries(left, right, sortKey, sortDirection))
+  }, [entries, filter, listQuery, sortDirection, sortKey])
+
+  const duplicateSelection = !editingId && selectedArtwork?.already_featured
+
+  return (
+    <>
+      <Head>
+        <title>{seo.title || 'Featured Artworks'}</title>
+        {seo.description ? <meta name="description" content={seo.description} /> : null}
+        {seo.robots ? <meta name="robots" content={seo.robots} /> : null}
+      </Head>
+
+      <div className="min-h-screen bg-[#07111c] text-white">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
+          <section className="overflow-hidden rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(245,158,11,0.14),_transparent_35%),linear-gradient(180deg,_rgba(6,14,25,0.92),_rgba(8,18,32,0.96))] p-8 shadow-[0_28px_90px_rgba(2,6,23,0.45)]">
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+              <div className="max-w-3xl">
+                <div className="inline-flex rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100">Featured Artworks</div>
+                <h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">Homepage hero control, with the real winner logic exposed.</h1>
+                <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">Editors can create, update, activate, expire, and remove featured entries here. The winner summary below mirrors the public homepage selection order: priority, recent medal score, featured date, then published date.</p>
+              </div>
+              <div className="grid w-full max-w-xl grid-cols-2 gap-4 md:grid-cols-3">
+                <StatCard label="Entries" value={stats.total || 0} tone="sky" />
+                <StatCard label="Eligible" value={stats.eligible || 0} tone="emerald" />
+                <StatCard label="Expired" value={stats.expired || 0} tone="amber" />
+                <StatCard label="Active" value={stats.active || 0} tone="sky" />
+                <StatCard label="Inactive" value={stats.inactive || 0} tone="rose" />
+                <StatCard label="Not Eligible" value={stats.ineligible || 0} tone="rose" />
+              </div>
+            </div>
+          </section>
+
+          {notice ? (
+            <div className="rounded-2xl border border-sky-300/15 bg-sky-400/10 px-4 py-3 text-sm text-sky-50">
+              {notice}
+            </div>
+          ) : null}
+
+          <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
+            <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Current Homepage Hero</div>
+                  <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{winner ? winner.artwork?.title : 'No eligible featured artwork'}</h2>
+                  <p className="mt-2 max-w-2xl text-sm leading-7 text-slate-300">
+                    {winner?.selection_reason || 'There is no active, non-expired, eligible featured artwork right now.'}
+                  </p>
+                  {winner?.is_force_hero ? (
+                    <div className="mt-4 max-w-2xl rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-50">
+                      Forced by editor. This artwork bypasses the normal hero winner order until Force Hero is disabled on its featured row.
+                    </div>
+                  ) : null}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {winner ? <Badge label="Winner" tone="amber" /> : <Badge label="No Winner" tone="rose" />}
+                  {winner?.is_force_hero ? <Badge label="Force Hero" tone="amber" /> : null}
+                </div>
+              </div>
+
+              {winner ? (
+                <div className="mt-6 grid gap-6 lg:grid-cols-[220px_1fr]">
+                  <a href={winner.artwork?.canonical_url || '#'} className="overflow-hidden rounded-[24px] border border-white/10 bg-[#09121f]" target="_blank" rel="noreferrer">
+                    <img
+                      src={winner.artwork?.thumbnail?.url}
+                      alt={winner.artwork?.title || 'Winner preview'}
+                      className="h-full min-h-[180px] w-full object-cover"
+                    />
+                  </a>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Artist</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{winner.artwork?.owner?.display_name || 'Unknown'}</div>
+                      <div className="mt-1 text-sm text-slate-400">{winner.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${winner.artwork?.owner?.username || ''}`}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Medal Score (30d)</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{winner.medals?.score_30d || 0}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Priority</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{winner.priority}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Featured Since</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.featured_at)}</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4 sm:col-span-2">
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Published At</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.artwork?.published_at)}</div>
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+            </section>
+
+            <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{editingId ? 'Edit Entry' : 'Create Entry'}</div>
+                  <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{editingId ? `Featured entry #${editingId}` : 'Add an artwork to the featured pool'}</h2>
+                </div>
+                {editingId ? (
+                  <button type="button" onClick={resetEditor} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/5">
+                    Cancel edit
+                  </button>
+                ) : null}
+              </div>
+
+              {!editingId ? (
+                <form onSubmit={handleArtworkSearch} className="mt-6 space-y-4 rounded-[24px] border border-white/10 bg-black/20 p-4">
+                  <Field label="Artwork selector" help="Search by artwork ID, title, slug, artist, or group. Pick a result to lock it into the form.">
+                    <div className="flex gap-3">
+                      <input
+                        type="text"
+                        value={searchQuery}
+                        onChange={(event) => setSearchQuery(event.target.value)}
+                        className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                        placeholder="Try an artwork ID, title, or creator"
+                      />
+                      <button type="submit" disabled={busy === 'search'} className="rounded-2xl bg-sky-400 px-4 py-3 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-60">
+                        {busy === 'search' ? 'Searching…' : 'Search'}
+                      </button>
+                    </div>
+                  </Field>
+
+                  {searchResults.length > 0 ? (
+                    <div className="grid gap-3">
+                      {searchResults.map((artwork) => (
+                        <button
+                          type="button"
+                          key={artwork.id}
+                          onClick={() => chooseArtwork(artwork)}
+                          className={`grid gap-4 rounded-2xl border p-3 text-left transition sm:grid-cols-[88px_1fr] ${selectedArtwork?.id === artwork.id ? 'border-sky-300/40 bg-sky-400/10' : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]'}`}
+                        >
+                          <img src={artwork.thumbnail?.url} alt={artwork.title} className="h-24 w-full rounded-2xl object-cover" />
+                          <div className="space-y-2">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <span className="text-sm font-semibold text-white">{artwork.title}</span>
+                              <span className="text-xs text-slate-400">#{artwork.id}</span>
+                              {artwork.already_featured ? <Badge label="Already Featured" tone="amber" /> : null}
+                            </div>
+                            <div className="text-xs text-slate-400">{artwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {artwork.medals?.score_30d || 0}</div>
+                            <div className="flex flex-wrap gap-2">
+                              {(artwork.eligibility?.is_eligible ? [{ label: 'Eligible', tone: 'emerald' }] : [{ label: 'Not eligible', tone: 'rose' }]).concat(
+                                (artwork.eligibility?.reasons || []).map((reason) => ({
+                                  label: reason,
+                                  tone: reason === 'Missing preview' ? 'rose' : 'slate',
+                                }))
+                              ).slice(0, 4).map((badge) => (
+                                <Badge key={`${artwork.id}-${badge.label}`} label={badge.label} tone={badge.tone} />
+                              ))}
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                </form>
+              ) : null}
+
+              {selectedArtwork ? (
+                <div className="mt-6 grid gap-4 rounded-[24px] border border-white/10 bg-black/20 p-4 sm:grid-cols-[108px_1fr]">
+                  <img src={selectedArtwork.thumbnail?.url} alt={selectedArtwork.title || 'Artwork preview'} className="h-28 w-full rounded-2xl object-cover" />
+                  <div className="space-y-3">
+                    <div>
+                      <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Selected Artwork</div>
+                      <div className="mt-2 text-lg font-semibold text-white">{selectedArtwork.title}</div>
+                      <div className="mt-1 text-sm text-slate-400">#{selectedArtwork.id} • {selectedArtwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {selectedArtwork.medals?.score_30d || 0}</div>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {(selectedArtwork.eligibility?.is_eligible ? [{ label: 'Currently eligible', tone: 'emerald' }] : [{ label: 'Currently ineligible', tone: 'rose' }]).concat(
+                        (selectedArtwork.eligibility?.reasons || []).map((reason) => ({
+                          label: reason,
+                          tone: reason === 'Missing preview' ? 'rose' : 'slate',
+                        }))
+                      ).map((badge) => (
+                        <Badge key={`selected-${badge.label}`} label={badge.label} tone={badge.tone} />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+
+              {duplicateSelection ? (
+                <div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">
+                  This artwork already has a featured entry. Edit the existing row instead of creating a duplicate.
+                </div>
+              ) : null}
+
+              <form onSubmit={handleSubmit} className="mt-6 grid gap-4 sm:grid-cols-2">
+                <Field label="Priority" help="Higher priority always wins before medal score is considered.">
+                  <input
+                    type="number"
+                    min="0"
+                    value={form.priority}
+                    onChange={(event) => setForm((current) => ({ ...current, priority: event.target.value }))}
+                    className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                  />
+                </Field>
+
+                <Field label="Active" help="Inactive rows stay visible in admin but cannot win the homepage hero.">
+                  <label className="flex h-[52px] items-center gap-3 rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-slate-100">
+                    <input
+                      type="checkbox"
+                      checked={Boolean(form.is_active)}
+                      onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
+                      className="h-4 w-4 rounded border-white/20 bg-transparent text-sky-400 focus:ring-sky-300/30"
+                    />
+                    <span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
+                  </label>
+                </Field>
+
+                <Field label="Featured Since">
+                  <input
+                    type="datetime-local"
+                    value={form.featured_at}
+                    onChange={(event) => setForm((current) => ({ ...current, featured_at: event.target.value }))}
+                    className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                  />
+                </Field>
+
+                <Field label="Expires">
+                  <input
+                    type="datetime-local"
+                    value={form.expires_at}
+                    onChange={(event) => setForm((current) => ({ ...current, expires_at: event.target.value }))}
+                    className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                  />
+                </Field>
+
+                <div className="sm:col-span-2 flex flex-wrap gap-3">
+                  <button
+                    type="submit"
+                    disabled={busy === 'submit' || (!editingId && !selectedArtwork) || duplicateSelection}
+                    className="rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    {busy === 'submit' ? 'Saving…' : editingId ? 'Save Changes' : 'Create Featured Entry'}
+                  </button>
+                  {editingId ? (
+                    <button type="button" onClick={resetEditor} className="rounded-2xl border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
+                      Reset
+                    </button>
+                  ) : null}
+                </div>
+              </form>
+            </section>
+          </div>
+
+          <section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+              <div>
+                <div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Featured Pool</div>
+                <h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Every featured row, with eligibility and winner state visible.</h2>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3 lg:w-[720px]">
+                <input
+                  type="text"
+                  value={listQuery}
+                  onChange={(event) => setListQuery(event.target.value)}
+                  placeholder="Filter by title, artist, or artwork ID"
+                  className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
+                />
+                <select value={filter} onChange={(event) => setFilter(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
+                  <option value="all">All rows</option>
+                  <option value="active">Active</option>
+                  <option value="inactive">Inactive</option>
+                  <option value="expired">Expired</option>
+                  <option value="winner">Winner</option>
+                  <option value="eligible">Eligible</option>
+                  <option value="ineligible">Not eligible</option>
+                </select>
+                <div className="grid grid-cols-[1fr_auto] gap-3">
+                  <select value={sortKey} onChange={(event) => setSortKey(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
+                    <option value="priority">Priority</option>
+                    <option value="featured_at">Featured Since</option>
+                    <option value="expires_at">Expires</option>
+                    <option value="score_30d">Medal Score (30d)</option>
+                  </select>
+                  <button type="button" onClick={() => setSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} className="rounded-2xl border border-white/10 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
+                    {sortDirection === 'desc' ? 'Desc' : 'Asc'}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 overflow-hidden rounded-[24px] border border-white/10">
+              <div className="hidden grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] gap-4 border-b border-white/10 bg-black/20 px-5 py-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 lg:grid">
+                <div>Artwork</div>
+                <div>Artist / Owner</div>
+                <div>Priority</div>
+                <div>Featured Since</div>
+                <div>Expires</div>
+                <div>Score (30d)</div>
+                <div>Status</div>
+                <div>Actions</div>
+              </div>
+
+              <div className="divide-y divide-white/10">
+                {filteredEntries.length === 0 ? (
+                  <div className="px-5 py-10 text-center text-sm text-slate-400">No featured entries match the current filter.</div>
+                ) : filteredEntries.map((entry) => (
+                  <div key={entry.id} className="grid gap-5 bg-white/[0.02] px-5 py-5 lg:grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] lg:items-center">
+                    <div className="grid gap-4 sm:grid-cols-[92px_1fr]">
+                      <a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="overflow-hidden rounded-2xl border border-white/10 bg-[#08111d]">
+                        <img src={entry.artwork?.thumbnail?.url} alt={entry.artwork?.title || 'Artwork preview'} className="h-24 w-full object-cover" />
+                      </a>
+                      <div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-semibold text-white">{entry.artwork?.title || 'Missing artwork'}</span>
+                          <span className="text-xs text-slate-400">#{entry.artwork?.id || entry.artwork_id}</span>
+                        </div>
+                        <div className="mt-2 text-xs leading-6 text-slate-400">Visibility: {entry.artwork?.visibility || '—'} • Published: {entry.artwork?.published_at ? 'Yes' : 'No'}</div>
+                        {entry.is_winner && entry.winner_reason ? <div className="mt-2 text-xs leading-6 text-amber-100">{entry.winner_reason}</div> : null}
+                      </div>
+                    </div>
+
+                    <div>
+                      <div className="text-sm font-semibold text-white">{entry.artwork?.owner?.display_name || 'Unknown'}</div>
+                      <div className="mt-1 text-xs text-slate-400">{entry.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${entry.artwork?.owner?.username || ''}`}</div>
+                    </div>
+
+                    <div className="text-sm font-semibold text-white">{entry.priority}</div>
+                    <div className="text-sm text-slate-200">{formatDateTime(entry.featured_at)}</div>
+                    <div className="text-sm text-slate-200">{formatDateTime(entry.expires_at)}</div>
+                    <div className="text-sm font-semibold text-white">{entry.medals?.score_30d || 0}</div>
+
+                    <div className="flex flex-wrap gap-2">
+                      {(entry.status_badges || []).map((badge, index) => (
+                        <Badge key={`${entry.id}-${badge.label}-${index}`} label={badge.label} tone={badge.tone} />
+                      ))}
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 lg:justify-end">
+                      <button type="button" onClick={() => editEntry(entry)} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
+                        Edit
+                      </button>
+                      {capabilities.forceHeroEnabled ? (
+                        <button type="button" onClick={() => handleForceHero(entry)} disabled={busy === `force-${entry.id}`} className={`rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition disabled:cursor-not-allowed disabled:opacity-60 ${entry.is_force_hero ? 'border-amber-300/25 text-amber-100 hover:border-amber-300/40 hover:bg-amber-400/10' : 'border-amber-300/15 text-amber-50 hover:border-amber-300/30 hover:bg-amber-400/5'}`}>
+                          {busy === `force-${entry.id}` ? 'Saving…' : entry.is_force_hero ? 'Disable Force Hero' : 'Force Hero'}
+                        </button>
+                      ) : null}
+                      <button type="button" onClick={() => handleToggle(entry)} disabled={busy === `toggle-${entry.id}`} className="rounded-full border border-sky-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-400/10 disabled:cursor-not-allowed disabled:opacity-60">
+                        {busy === `toggle-${entry.id}` ? 'Saving…' : entry.is_active ? 'Deactivate' : 'Activate'}
+                      </button>
+                      <button type="button" onClick={() => handleDelete(entry)} disabled={busy === `delete-${entry.id}`} className="rounded-full border border-rose-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-400/10 disabled:cursor-not-allowed disabled:opacity-60">
+                        {busy === `delete-${entry.id}` ? 'Deleting…' : 'Delete'}
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </>
+  )
+}

resources/js/Pages/Home/HomeBecauseYouLike.jsx

@@ -65,7 +65,7 @@ export default function HomeBecauseYouLike({ items, preferences }) {
         </a>
       </div>
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-        {items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
+        {items.map((item) => (
           <ArtCard key={item.id} item={item} />
         ))}
       </div>

resources/js/Pages/Home/HomeCTA.jsx

@@ -24,7 +24,7 @@ export default function HomeCTA({ isLoggedIn }) {
           <div className="mt-6 flex flex-wrap justify-center gap-3">
             <a
               href={uploadHref}
-              className="rounded-xl bg-accent px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-accent/20 transition hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+              className="btn-accent-solid rounded-xl px-6 py-2.5 text-sm font-semibold"
             >
               Upload your artwork
             </a>

resources/js/Pages/Home/HomeCreators.jsx

@@ -24,7 +24,7 @@ function CreatorCard({ creator }) {
       <a href={creator.url} className="relative block">
         <img
           src={creator.avatar}
-          alt={creator.name}
+          alt=""
           className="mx-auto h-16 w-16 rounded-full object-cover ring-4 bg-nova-800/80 ring-nova-800"
           loading="lazy"
           decoding="async"

resources/js/Pages/Home/HomeFresh.jsx

@@ -14,7 +14,7 @@ export default function HomeFresh({ items }) {
       </div>
 
       <ArtworkGalleryGrid
-        items={items.slice(0, 8)}
+        items={items}
         showStats={false}
       />
     </section>

resources/js/Pages/Home/HomeFromFollowing.jsx

@@ -74,7 +74,7 @@ export default function HomeFromFollowing({ items }) {
         </a>
       </div>
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-        {items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
+        {items.map((item) => (
           <ArtCard key={item.id} item={item} />
         ))}
       </div>

resources/js/Pages/Home/HomeGroups.jsx

@@ -30,7 +30,7 @@ function GroupSpotlightCard({ group }) {
           {group.avatar_url ? (
             <img
               src={group.avatar_url}
-              alt={group.name}
+              alt=""
               className="h-full w-full object-cover"
               loading="lazy"
               decoding="async"

resources/js/Pages/Home/HomeHero.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 const FALLBACK = 'https://files.skinbase.org/default/missing_lg.webp'
+const HERO_SIZES = '100vw'
 
 export default function HomeHero({ artwork }) {
   if (!artwork) {
@@ -15,7 +16,7 @@ export default function HomeHero({ artwork }) {
             Discover. Create. Inspire.
           </p>
           <div className="mt-4 flex flex-wrap gap-3">
-            <a href="/discover/trending" className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110">Explore Trending</a>
+            <a href="/discover/trending" className="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold">Explore Trending</a>
           </div>
         </div>
       </section>
@@ -23,16 +24,20 @@ export default function HomeHero({ artwork }) {
   }
 
   const src = artwork.thumb_lg || artwork.thumb || FALLBACK
+  const srcSet = artwork.thumb_srcset || null
 
   return (
     <section className="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
       {/* Background image */}
       <img
         src={src}
+        srcSet={srcSet || undefined}
+        sizes={srcSet ? HERO_SIZES : undefined}
         alt={artwork.title}
         className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
         fetchPriority="high"
-        decoding="async"
+        loading="eager"
+        decoding="sync"
         onError={(e) => { e.currentTarget.src = FALLBACK }}
       />
 
@@ -53,7 +58,7 @@ export default function HomeHero({ artwork }) {
         <div className="mt-4 flex flex-wrap gap-3">
           <a
             href="/discover/trending"
-            className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110"
+            className="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold"
           >
             Explore Trending
           </a>

resources/js/Pages/Home/HomeMedalHighlights.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import ArtworkGalleryGrid from '../../components/artwork/ArtworkGalleryGrid'
+
+export default function HomeMedalHighlights({ title, href = null, items, description = '' }) {
+  if (!Array.isArray(items) || items.length === 0) return null
+
+  return (
+    <section className="mt-14 px-4 sm:px-6 lg:px-8">
+      <div className="mb-5 flex items-end justify-between gap-4">
+        <div>
+          <h2 className="text-xl font-bold text-white">{title}</h2>
+          {description ? <p className="mt-2 max-w-2xl text-sm text-slate-400">{description}</p> : null}
+        </div>
+        {href ? (
+          <a href={href} className="text-sm text-nova-300 transition hover:text-white">
+            See all →
+          </a>
+        ) : null}
+      </div>
+
+      <ArtworkGalleryGrid items={items} className="xl:grid-cols-4" />
+    </section>
+  )
+}

resources/js/Pages/Home/HomePage.jsx

@@ -8,6 +8,7 @@ const HomeTrendingForYou  = lazy(() => import('./HomeTrendingForYou'))
 const HomeBecauseYouLike  = lazy(() => import('./HomeBecauseYouLike'))
 const HomeSuggestedCreators = lazy(() => import('./HomeSuggestedCreators'))
 const HomeTrending        = lazy(() => import('./HomeTrending'))
+const HomeMedalHighlights = lazy(() => import('./HomeMedalHighlights'))
 const HomeRising          = lazy(() => import('./HomeRising'))
 const HomeFresh           = lazy(() => import('./HomeFresh'))
 const HomeCollections     = lazy(() => import('./HomeCollections'))
@@ -18,30 +19,122 @@ const HomeCreators        = lazy(() => import('./HomeCreators'))
 const HomeNews            = lazy(() => import('./HomeNews'))
 const HomeCTA             = lazy(() => import('./HomeCTA'))
 
-function SectionFallback() {
+function cx(...parts) {
+  return parts.filter(Boolean).join(' ')
+}
+
+function SectionFallback({ variant = 'gallery' }) {
+  if (variant === 'welcome') {
+    return (
+      <div className="mt-10 px-4 sm:px-6 lg:px-8" aria-hidden="true">
+        <div className="h-20 animate-pulse rounded-[28px] border border-white/10 bg-nova-800/70" />
+      </div>
+    )
+  }
+
+  if (variant === 'tags') {
+    return (
+      <section className="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
+        <div className="mb-5 h-8 w-48 animate-pulse rounded-xl bg-nova-800/70" />
+        <div className="flex flex-wrap gap-2">
+          {Array.from({ length: 12 }).map((_, index) => (
+            <div
+              key={index}
+              className="h-9 animate-pulse rounded-full bg-nova-800/70"
+              style={{ width: `${88 + (index % 4) * 16}px` }}
+            />
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  if (variant === 'cta') {
+    return (
+      <section className="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
+        <div className="h-40 animate-pulse rounded-[28px] border border-white/10 bg-nova-800/70" />
+      </section>
+    )
+  }
+
+  const cardClassName = variant === 'categories'
+    ? 'h-28 rounded-2xl'
+    : variant === 'news'
+      ? 'h-24 rounded-2xl'
+      : variant === 'creators'
+        ? 'h-64 rounded-2xl'
+        : variant === 'collections'
+          ? 'h-80 rounded-[28px]'
+          : variant === 'groups'
+            ? 'h-80 rounded-[28px]'
+            : 'aspect-[4/3] rounded-2xl'
+  const gridClassName = variant === 'creators'
+    ? 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6'
+    : variant === 'news'
+      ? 'grid-cols-1'
+      : variant === 'categories'
+        ? 'grid-cols-2 lg:grid-cols-4'
+        : variant === 'collections'
+          ? 'grid-cols-1 lg:grid-cols-2 xl:grid-cols-3'
+          : variant === 'groups'
+            ? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4'
+            : 'grid-cols-2 xl:grid-cols-4'
+  const cardCount = variant === 'creators' ? 6 : variant === 'news' ? 4 : 4
+
   return (
-    <div className="mt-14 h-48 animate-pulse rounded-xl bg-nova-800 mx-4 sm:mx-6 lg:mx-8" />
+    <section className="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
+      <div className="mb-5 flex items-center justify-between gap-4">
+        <div>
+          <div className="h-8 w-48 animate-pulse rounded-xl bg-nova-800/70" />
+          {(variant === 'collections' || variant === 'groups' || variant === 'news') && (
+            <div className="mt-3 h-4 w-80 max-w-full animate-pulse rounded bg-nova-800/60" />
+          )}
+        </div>
+        <div className="hidden h-5 w-24 animate-pulse rounded bg-nova-800/60 sm:block" />
+      </div>
+      <div className={cx('grid gap-4', gridClassName)}>
+        {Array.from({ length: cardCount }).map((_, index) => (
+          <div key={index} className={cx('animate-pulse bg-nova-800/70', cardClassName)} />
+        ))}
+      </div>
+    </section>
   )
 }
 
 function GuestHomePage(props) {
-  const { rising, trending, fresh, tags, creators, news, collections_featured, collections_trending, collections_editorial, collections_community, groups } = props
+  const { rising, trending, community_favorites, hall_of_fame, fresh, tags, creators, news, collections_featured, collections_trending, collections_editorial, collections_community, groups } = props
 
   return (
     <>
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeRising items={rising} />
       </Suspense>
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeTrending items={trending} />
       </Suspense>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
+        <HomeMedalHighlights
+          title="Community Favorites"
+          href="/explore/top-rated"
+          description="Recent medal momentum from the community. This rail highlights the strongest 30-day medal signal."
+          items={community_favorites}
+        />
+      </Suspense>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
+        <HomeMedalHighlights
+          title="Hall of Fame"
+          href="/explore/best"
+          description="All-time medal standouts that keep being remembered long after publication."
+          items={hall_of_fame}
+        />
+      </Suspense>
 
       {/* 3. Fresh Uploads */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeFresh items={fresh} />
       </Suspense>
 
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="collections" />}>
         <HomeCollections
           featured={collections_featured}
           trending={collections_trending}
@@ -50,32 +143,32 @@ function GuestHomePage(props) {
         />
       </Suspense>
 
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="groups" />}>
         <HomeGroups groups={groups} />
       </Suspense>
 
       {/* 4. Explore Categories */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="categories" />}>
         <HomeCategories />
       </Suspense>
 
       {/* 5. Popular Tags */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="tags" />}>
         <HomeTags tags={tags} />
       </Suspense>
 
       {/* 6. Top Creators */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="creators" />}>
         <HomeCreators creators={creators} />
       </Suspense>
 
       {/* 7. News */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="news" />}>
         <HomeNews items={news} />
       </Suspense>
 
       {/* 8. CTA Upload */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="cta" />}>
         <HomeCTA isLoggedIn={false} />
       </Suspense>
     </>
@@ -89,6 +182,8 @@ function AuthHomePage(props) {
     from_following,
     rising,
     trending,
+    community_favorites,
+    hall_of_fame,
     fresh,
     collections_featured,
     collections_recent,
@@ -107,41 +202,57 @@ function AuthHomePage(props) {
   return (
     <>
       {/* P0. Welcome/status row — below hero so featured image sits at 0px */}
-      <Suspense fallback={null}>
+      <Suspense fallback={<SectionFallback variant="welcome" />}>
         <HomeWelcomeRow user_data={user_data} />
       </Suspense>
 
       {/* P2. From Creators You Follow */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeFromFollowing items={from_following} />
       </Suspense>
 
       {/* P3. Personalized For You preview */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeTrendingForYou items={for_you} preferences={preferences} />
       </Suspense>
 
       {/* Rising Now */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeRising items={rising} />
       </Suspense>
 
       {/* 2. Global Trending Now */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeTrending items={trending} />
       </Suspense>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
+        <HomeMedalHighlights
+          title="Community Favorites"
+          href="/explore/top-rated"
+          description="Recent medal momentum from the community. This rail highlights the strongest 30-day medal signal."
+          items={community_favorites}
+        />
+      </Suspense>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
+        <HomeMedalHighlights
+          title="Hall of Fame"
+          href="/explore/best"
+          description="All-time medal standouts that keep being remembered long after publication."
+          items={hall_of_fame}
+        />
+      </Suspense>
 
       {/* P4. Because You Like {top tag} — uses by_categories for variety */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeBecauseYouLike items={by_categories} preferences={preferences} />
       </Suspense>
 
       {/* 3. Fresh Uploads */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="gallery" />}>
         <HomeFresh items={fresh} />
       </Suspense>
 
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="collections" />}>
         <HomeCollections
           featured={collections_featured}
           recent={collections_recent}
@@ -152,37 +263,37 @@ function AuthHomePage(props) {
         />
       </Suspense>
 
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="groups" />}>
         <HomeGroups groups={groups} />
       </Suspense>
 
       {/* 4. Explore Categories */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="categories" />}>
         <HomeCategories />
       </Suspense>
 
       {/* P5. Suggested Creators */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="creators" />}>
         <HomeSuggestedCreators creators={suggested_creators} />
       </Suspense>
 
       {/* 5. Popular Tags */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="tags" />}>
         <HomeTags tags={tags} />
       </Suspense>
 
       {/* 6. Top Creators */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="creators" />}>
         <HomeCreators creators={creators} />
       </Suspense>
 
       {/* 7. News */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="news" />}>
         <HomeNews items={news} />
       </Suspense>
 
       {/* 8. CTA Upload */}
-      <Suspense fallback={<SectionFallback />}>
+      <Suspense fallback={<SectionFallback variant="cta" />}>
         <HomeCTA isLoggedIn />
       </Suspense>
     </>

resources/js/Pages/Home/HomeRising.jsx

@@ -76,7 +76,7 @@ export default function HomeRising({ items }) {
       </div>
 
       <div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3 lg:grid lg:grid-cols-5 lg:overflow-visible">
-        {items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
+        {items.map((item) => (
           <ArtCard key={item.id} item={item} />
         ))}
       </div>

resources/js/Pages/Home/HomeTrending.jsx

@@ -16,7 +16,7 @@ export default function HomeTrending({ items }) {
       </div>
 
       <ArtworkGalleryGrid
-        items={items.slice(0, 8)}
+        items={items}
         className="xl:grid-cols-4"
       />
     </section>

resources/js/Pages/Home/HomeTrendingForYou.jsx

@@ -23,7 +23,7 @@ export default function HomeTrendingForYou({ items, preferences }) {
           Open full feed →
         </a>
       </div>
-      <ArtworkGalleryGrid items={items.slice(0, 8)} compact />
+      <ArtworkGalleryGrid items={items} compact />
     </section>
   )
 }

resources/js/Pages/Home/HomeWelcomeRow.jsx

@@ -47,7 +47,7 @@ export default function HomeWelcomeRow({ user_data }) {
 
             {notifications_unread > 0 && (
               <a
-                href="/notifications"
+                href="/dashboard/notifications"
                 className="inline-flex items-center gap-1.5 rounded-lg bg-nova-800 px-3 py-1.5 text-xs font-medium text-white ring-1 ring-white/10 hover:bg-nova-700 transition"
               >
                 <svg className="h-3.5 w-3.5 text-yellow-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -59,7 +59,7 @@ export default function HomeWelcomeRow({ user_data }) {
 
             <a
               href="/upload"
-              className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-white shadow hover:brightness-110 transition"
+              className="btn-accent-solid inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold"
             >
               <svg className="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />

resources/js/Pages/Moderation/ArtworkMaturityQueue.jsx

@@ -0,0 +1,307 @@
+import React, { useMemo, useState } from 'react'
+import { Head, usePage } from '@inertiajs/react'
+import ArtworkViewer from '../../components/viewer/ArtworkViewer'
+
+function requestJson(url, { method = 'GET', body } = {}) {
+  return fetch(url, {
+    method,
+    credentials: 'same-origin',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  }).then(async (response) => {
+    const payload = await response.json().catch(() => ({}))
+    if (!response.ok) {
+      throw new Error(payload?.message || 'Request failed')
+    }
+    return payload
+  })
+}
+
+function Badge({ children, tone = 'slate' }) {
+  const tones = {
+    slate: 'border-white/10 bg-white/[0.05] text-slate-200',
+    amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
+    rose: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
+    emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
+    sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
+  }
+
+  return <span className={`inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${tones[tone] || tones.slate}`}>{children}</span>
+}
+
+export default function ArtworkMaturityQueue() {
+  const { props } = usePage()
+  const [items, setItems] = useState(props.initialItems || [])
+  const [stats, setStats] = useState(props.stats || {})
+  const [status, setStatus] = useState(props.initialFilters?.status || 'suspected')
+  const [aiAction, setAiAction] = useState(props.initialFilters?.ai_action || 'all')
+  const [aiStatus, setAiStatus] = useState(props.initialFilters?.ai_status || 'all')
+  const [busyId, setBusyId] = useState(null)
+  const [noteById, setNoteById] = useState({})
+  const [error, setError] = useState('')
+  const [previewItem, setPreviewItem] = useState(null)
+
+  const endpoints = props.endpoints || {}
+  const filterOptions = props.filterOptions || {}
+  const reviewActions = props.reviewActions || []
+
+  function queueStatusKey(key) {
+    return key === 'mature' ? 'reviewed' : key
+  }
+
+  async function load(nextStatus, nextAiAction = aiAction, nextAiStatus = aiStatus) {
+    setStatus(nextStatus)
+    setAiAction(nextAiAction)
+    setAiStatus(nextAiStatus)
+    setError('')
+    try {
+      const query = new URLSearchParams({
+        status: nextStatus,
+        ai_action: nextAiAction,
+        ai_status: nextAiStatus,
+      })
+      const payload = await requestJson(`${endpoints.list}?${query.toString()}`)
+      setItems(payload.data || [])
+      setStats(payload.meta?.stats || {})
+    } catch (loadError) {
+      setError(loadError.message)
+    }
+  }
+
+  async function review(itemId, action) {
+    setBusyId(itemId)
+    setError('')
+
+    try {
+      const payload = await requestJson(String(endpoints.reviewPattern || '').replace('__ARTWORK__', String(itemId)), {
+        method: 'POST',
+        body: {
+          action,
+          note: noteById[itemId] || '',
+        },
+      })
+
+      setStats(payload.stats || {})
+      setItems((current) => current.filter((item) => item.id !== itemId).concat(status === 'reviewed' ? [payload.artwork] : []))
+
+      if (status !== 'reviewed') {
+        setItems((current) => current.filter((item) => item.id !== itemId))
+      }
+    } catch (reviewError) {
+      setError(reviewError.message)
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  const statusSummary = useMemo(() => [
+    { key: 'suspected', label: 'Suspected', value: Number(stats.suspected || 0) },
+    { key: 'audit', label: 'Audit candidates', value: Number(stats.audit || 0) },
+    { key: 'reviewed', label: 'Reviewed', value: Number(stats.reviewed || 0) },
+    { key: 'mature', label: 'Marked mature', value: Number(stats.mature || 0) },
+  ], [stats])
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8">
+      <Head title="Artwork Maturity Queue" />
+
+      <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.16),transparent_36%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-amber-200/80">Moderator surface</p>
+            <h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Artwork maturity review</h1>
+            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Review uploads where the uploader declaration and AI suspicion do not match, plus legacy artworks detected by the non-mutating thumbnail audit. Audit candidates stay read-only until a moderator confirms the final maturity state.</p>
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            {statusSummary.map((entry) => (
+              (() => {
+                const queueKey = queueStatusKey(entry.key)
+
+                return (
+              <button
+                key={entry.key}
+                type="button"
+                onClick={() => load(queueKey)}
+                className={`rounded-2xl border px-4 py-3 text-left transition ${status === queueKey ? 'border-amber-300/30 bg-amber-400/10 text-white' : 'border-white/10 bg-white/[0.04] text-slate-300 hover:bg-white/[0.07]'}`}
+              >
+                <div className="text-[11px] font-semibold uppercase tracking-[0.18em]">{entry.label}</div>
+                <div className="mt-1 text-2xl font-semibold tracking-tight">{entry.value.toLocaleString()}</div>
+              </button>
+                )
+              })()
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-5 grid gap-3 md:grid-cols-2">
+          <label className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">AI action hint</div>
+            <select
+              value={aiAction}
+              onChange={(event) => load(status, event.target.value, aiStatus)}
+              className="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none"
+            >
+              {(filterOptions.aiAction || []).map((option) => (
+                <option key={option.value} value={option.value}>{option.label}</option>
+              ))}
+            </select>
+          </label>
+
+          <label className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">AI processing status</div>
+            <select
+              value={aiStatus}
+              onChange={(event) => load(status, aiAction, event.target.value)}
+              className="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none"
+            >
+              {(filterOptions.aiStatus || []).map((option) => (
+                <option key={option.value} value={option.value}>{option.label}</option>
+              ))}
+            </select>
+          </label>
+        </div>
+      </section>
+
+      {error ? <div className="mt-6 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm text-rose-100">{error}</div> : null}
+
+      <div className="mt-8 space-y-4">
+        {items.length === 0 ? (
+          <div className="rounded-[28px] border border-white/10 bg-white/[0.04] px-6 py-12 text-center text-slate-300">{status === 'audit' ? 'No legacy artworks are currently flagged by the thumbnail audit.' : 'No artworks are waiting in this queue.'}</div>
+        ) : items.map((item) => (
+          (() => {
+            const evidence = item.audit || item.maturity || {}
+
+            return (
+          <article key={item.id} className="grid gap-5 rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)] lg:grid-cols-[280px_minmax(0,1fr)]">
+            <button
+              type="button"
+              onClick={() => item.preview_image ? setPreviewItem(item) : null}
+              className="group overflow-hidden rounded-[22px] border border-white/10 bg-slate-950/85 text-left transition hover:border-sky-300/30"
+            >
+              {item.thumbnail ? (
+                <div className="relative flex min-h-[360px] items-center justify-center p-3">
+                  <img src={item.thumbnail} alt={item.title} className="max-h-[480px] w-full object-contain" />
+                  <div className="pointer-events-none absolute inset-x-3 bottom-3 flex items-center justify-between rounded-full border border-white/10 bg-[#07101bdd] px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-100 opacity-0 transition group-hover:opacity-100">
+                    <span>Preview full image</span>
+                    <i className="fa-solid fa-expand text-[10px]" />
+                  </div>
+                </div>
+              ) : <div className="min-h-[360px]" />}
+            </button>
+
+            <div>
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div>
+                  <div className="flex flex-wrap gap-2">
+                    {item.audit ? <Badge tone="sky">audit candidate</Badge> : null}
+                    <Badge tone={item.maturity?.is_flagged ? 'rose' : 'amber'}>{item.maturity?.status || 'unknown'}</Badge>
+                    {item.maturity?.is_mature_effective ? <Badge tone="amber">effective mature</Badge> : <Badge tone="emerald">currently safe</Badge>}
+                    {item.maturity?.source ? <Badge tone="sky">source: {String(item.maturity.source).replaceAll('_', ' ')}</Badge> : null}
+                    {item.audit?.legacy_unset ? <Badge tone="slate">legacy unset</Badge> : null}
+                    {evidence.ai_action_hint ? <Badge tone={evidence.ai_action_hint === 'flag_high' ? 'rose' : evidence.ai_action_hint === 'review' ? 'amber' : 'emerald'}>AI: {String(evidence.ai_action_hint).replaceAll('_', ' ')}</Badge> : null}
+                    {evidence.ai_status ? <Badge tone="slate">status: {String(evidence.ai_status).replaceAll('_', ' ')}</Badge> : null}
+                  </div>
+                  <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{item.title}</h2>
+                  <p className="mt-2 text-sm text-slate-300">{item.publisher} {item.category ? `• ${item.category}` : ''} {item.content_type ? `• ${item.content_type}` : ''}</p>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <a href={item.url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.08]">
+                    <i className="fa-solid fa-arrow-up-right-from-square text-[10px]" />
+                    Open artwork
+                  </a>
+                  {item.admin_url ? (
+                    <a href={item.admin_url} className="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-amber-50 transition hover:bg-amber-400/15">
+                      <i className="fa-solid fa-screwdriver-wrench text-[10px]" />
+                      Open in cPad
+                    </a>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="mt-4 flex flex-wrap gap-2">
+                {Array.isArray(evidence.ai_labels) && evidence.ai_labels.length > 0 ? evidence.ai_labels.map((label) => <Badge key={`${item.id}-${label}`} tone="rose">{label}</Badge>) : <Badge tone="slate">no AI labels</Badge>}
+              </div>
+
+              <div className="mt-4 grid gap-4 md:grid-cols-3">
+                <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">AI score</div>
+                  <div className="mt-2 text-xl font-semibold text-white">{evidence.ai_score != null ? Number(evidence.ai_score).toFixed(4) : 'n/a'}</div>
+                </div>
+                <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">AI label</div>
+                  <div className="mt-2 text-sm leading-relaxed text-slate-200">{evidence.ai_label || 'n/a'}</div>
+                </div>
+                <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">{item.audit ? 'Audit detected' : 'Published'}</div>
+                  <div className="mt-2 text-sm text-slate-200">{item.audit?.detected_at ? new Date(item.audit.detected_at).toLocaleString() : item.published_at ? new Date(item.published_at).toLocaleString() : 'Draft / unavailable'}</div>
+                </div>
+              </div>
+
+              <div className="mt-4 grid gap-4 md:grid-cols-3">
+                <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Confidence</div>
+                  <div className="mt-2 text-sm text-slate-200">{evidence.ai_confidence != null ? Number(evidence.ai_confidence).toFixed(4) : 'n/a'}</div>
+                </div>
+                <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Vision model</div>
+                  <div className="mt-2 text-sm text-slate-200">{evidence.ai_model || 'n/a'}</div>
+                </div>
+                <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Current DB state</div>
+                  <div className="mt-2 text-sm leading-relaxed text-slate-200">{String(item.maturity?.source || 'legacy').replaceAll('_', ' ')} • {String(item.maturity?.status || 'clear').replaceAll('_', ' ')}</div>
+                </div>
+              </div>
+
+              {evidence.ai_advisory ? (
+                <div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-relaxed text-amber-50">
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">AI advisory</div>
+                  <div className="mt-2">{evidence.ai_advisory}</div>
+                </div>
+              ) : null}
+
+              <div className="mt-5 rounded-[24px] border border-white/10 bg-black/20 p-4">
+                <label className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Moderator note</label>
+                <textarea
+                  value={noteById[item.id] ?? item.review?.reviewer_note ?? ''}
+                  onChange={(event) => setNoteById((current) => ({ ...current, [item.id]: event.target.value }))}
+                  rows={3}
+                  className="mt-3 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-sm text-white outline-none transition focus:border-amber-300/40"
+                  placeholder="Explain why you are confirming or changing the maturity state."
+                />
+
+                <div className="mt-4 flex flex-wrap gap-3">
+                  {reviewActions.map((action) => (
+                    <button
+                      key={`${item.id}-${action.value}`}
+                      type="button"
+                      disabled={busyId === item.id}
+                      onClick={() => review(item.id, action.value)}
+                      className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                      {busyId === item.id ? 'Saving…' : action.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </article>
+            )
+          })()
+        ))}
+      </div>
+
+      <ArtworkViewer
+        isOpen={Boolean(previewItem)}
+        onClose={() => setPreviewItem(null)}
+        artwork={previewItem ? { title: previewItem.title, thumb: previewItem.thumbnail } : null}
+        presentXl={previewItem?.preview_image ? { url: previewItem.preview_image } : null}
+      />
+    </div>
+  )
+}

resources/js/Pages/Profile/ProfileShow.jsx

@@ -64,6 +64,7 @@ export default function ProfileShow() {
     achievements,
     leaderboardRank,
     groupContributionHistory,
+    journey,
     countryName,
     isOwner,
     auth,
@@ -197,6 +198,7 @@ export default function ProfileShow() {
             countryName={countryName}
             profileUrl={profileUrl}
             onTabChange={handleTabChange}
+            journey={journey}
           />
         )}
         {activeTab === 'stories' && (
@@ -233,6 +235,7 @@ export default function ProfileShow() {
             recentFollowers={recentFollowers}
             leaderboardRank={leaderboardRank}
             groupContributionHistory={groupContributionHistory}
+            journey={journey}
           />
         )}
         {activeTab === 'stats' && (

resources/js/Pages/Settings/ProfileEdit.jsx

@@ -5,7 +5,6 @@ import TextInput from '../../components/ui/TextInput'
 import Textarea from '../../components/ui/Textarea'
 import Button from '../../components/ui/Button'
 import Toggle from '../../components/ui/Toggle'
-import Select from '../../components/ui/Select'
 import NovaSelect from '../../components/ui/NovaSelect'
 import Modal from '../../components/ui/Modal'
 import { RadioGroup } from '../../components/ui/Radio'
@@ -17,10 +16,17 @@ const SETTINGS_SECTIONS = [
   { key: 'account', label: 'Account', icon: 'fa-solid fa-id-badge', description: 'Username and email address.' },
   { key: 'personal', label: 'Personal', icon: 'fa-solid fa-address-card', description: 'Optional personal information.' },
   { key: 'notifications', label: 'Notifications', icon: 'fa-solid fa-bell', description: 'Manage notification preferences.' },
+  { key: 'content', label: 'Content', icon: 'fa-solid fa-eye-low-vision', description: 'Control mature artwork visibility.' },
   { key: 'security', label: 'Security', icon: 'fa-solid fa-shield-halved', description: 'Password and account security.' },
   { key: 'danger', label: 'Danger Zone', icon: 'fa-solid fa-triangle-exclamation', description: 'Destructive account actions.' },
 ]
 
+const MATURE_VISIBILITY_OPTIONS = [
+  { value: 'hide', label: 'Hide mature artworks', hint: 'Remove mature artworks from feeds and galleries whenever possible.' },
+  { value: 'blur', label: 'Blur mature artworks', hint: 'Keep them in listings, but blur thumbnails until you open them.' },
+  { value: 'show', label: 'Show mature artworks normally', hint: 'Display mature thumbnails without blur in listings.' },
+]
+
 const MONTHS = [
   { value: '1', label: 'January' },
   { value: '2', label: 'February' },
@@ -131,10 +137,10 @@ function ErrorMessage({ text, className = '' }) {
 function SectionCard({ title, description, icon, children, actionSlot }) {
   return (
     <section className="rounded-2xl border border-white/[0.06] bg-gradient-to-b from-white/[0.04] to-white/[0.02] p-6 shadow-lg shadow-black/10">
-      <header className="flex flex-col gap-3 border-b border-white/[0.06] pb-4 md:flex-row md:items-start md:justify-between">
-        <div className="flex items-start gap-3">
+      <header className="flex flex-col gap-4 border-b border-white/[0.06] px-1.5 pb-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-3">
           {icon ? (
-            <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent/10 text-accent">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center self-start rounded-xl bg-accent/10 text-accent md:self-center">
               <i className={`${icon} text-sm`} />
             </span>
           ) : null}
@@ -143,9 +149,9 @@ function SectionCard({ title, description, icon, children, actionSlot }) {
             {description ? <p className="mt-1 text-sm text-slate-400">{description}</p> : null}
           </div>
         </div>
-        {actionSlot ? <div>{actionSlot}</div> : null}
+        {actionSlot ? <div className="shrink-0 self-start md:self-center">{actionSlot}</div> : null}
       </header>
-      <div className="pt-5">{children}</div>
+      <div className="px-1.5 pt-5">{children}</div>
     </section>
   )
 }
@@ -221,6 +227,10 @@ export default function ProfileEdit() {
     comment_notifications: !!user?.comment_notifications,
     newsletter: !!user?.newsletter,
   })
+  const [contentForm, setContentForm] = useState({
+    mature_content_visibility: user?.mature_content_visibility || 'blur',
+    mature_content_warning_enabled: user?.mature_content_warning_enabled !== false,
+  })
   const [securityForm, setSecurityForm] = useState({
     current_password: '',
     new_password: '',
@@ -234,6 +244,7 @@ export default function ProfileEdit() {
     account: {},
     personal: {},
     notifications: {},
+    content: {},
     security: {},
   })
   const [captchaState, setCaptchaState] = useState({
@@ -265,6 +276,7 @@ export default function ProfileEdit() {
     accountForm,
     personalForm,
     notificationForm,
+    contentForm,
     avatarUrl: initialAvatarUrl || '',
   })
 
@@ -279,13 +291,14 @@ export default function ProfileEdit() {
       account: !equalsObject(accountForm, initialRef.current.accountForm),
       personal: !equalsObject(personalForm, initialRef.current.personalForm),
       notifications: !equalsObject(notificationForm, initialRef.current.notificationForm),
+      content: !equalsObject(contentForm, initialRef.current.contentForm),
       security:
         !!securityForm.current_password ||
         !!securityForm.new_password ||
         !!securityForm.new_password_confirmation,
       danger: false,
     }
-  }, [profileForm, accountForm, personalForm, notificationForm, securityForm, avatarFile, avatarPosition, removeAvatar, avatarUrl])
+  }, [profileForm, accountForm, personalForm, notificationForm, contentForm, securityForm, avatarFile, avatarPosition, removeAvatar, avatarUrl])
 
   const hasUnsavedChanges = useMemo(
     () => Object.entries(dirtyMap).some(([key, dirty]) => key !== 'danger' && dirty),
@@ -777,6 +790,42 @@ export default function ProfileEdit() {
     }
   }
 
+  const saveContentSection = async (event) => {
+    event.preventDefault()
+    setSavingSection('content')
+    clearSectionStatus('content')
+
+    try {
+      const response = await fetch('/settings/content/update', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: await botHeaders({
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          'X-CSRF-TOKEN': getCsrfToken(),
+        }, captchaState),
+        body: JSON.stringify(applyCaptchaPayload({ ...contentForm, homepage_url: '' })),
+      })
+
+      const payload = await response.json().catch(() => ({}))
+      if (!response.ok) {
+        if (captureCaptchaRequirement('content', payload)) {
+          return
+        }
+        updateSectionErrors('content', payload.errors || { _general: [payload.message || 'Unable to save content settings.'] })
+        return
+      }
+
+      initialRef.current.contentForm = { ...contentForm }
+      resetCaptchaState()
+      setSavedMessage({ section: 'content', text: payload.message || 'Content settings saved successfully.' })
+    } catch (error) {
+      updateSectionErrors('content', { _general: ['Request failed. Please try again.'] })
+    } finally {
+      setSavingSection('')
+    }
+  }
+
   const saveSecuritySection = async (event) => {
     event.preventDefault()
     setSavingSection('security')
@@ -967,14 +1016,16 @@ export default function ProfileEdit() {
                   </div>
 
                   <div className="rounded-xl border border-white/10 bg-black/20 p-3">
-                    <Select
+                    <NovaSelect
                       label="Avatar crop position"
+                      placeholder="Select crop position"
                       value={avatarPosition}
-                      onChange={(e) => {
-                        setAvatarPosition(e.target.value)
+                      onChange={(nextValue) => {
+                        setAvatarPosition(nextValue)
                         clearSectionStatus('profile')
                       }}
                       options={AVATAR_POSITION_OPTIONS}
+                      searchable={false}
                       hint="Applies when saving a newly selected avatar"
                     />
                   </div>
@@ -1142,32 +1193,35 @@ export default function ProfileEdit() {
                 <div>
                   <label className="mb-1.5 block text-sm font-medium text-white/85">Birthday</label>
                   <div className="grid max-w-lg grid-cols-3 gap-3">
-                    <Select
+                    <NovaSelect
                       placeholder="Day"
                       value={personalForm.day}
-                      onChange={(e) => {
-                        setPersonalForm((prev) => ({ ...prev, day: e.target.value }))
+                      onChange={(nextValue) => {
+                        setPersonalForm((prev) => ({ ...prev, day: nextValue ?? '' }))
                         clearSectionStatus('personal')
                       }}
                       options={dayOptions}
+                      searchable={false}
                     />
-                    <Select
+                    <NovaSelect
                       placeholder="Month"
                       value={personalForm.month}
-                      onChange={(e) => {
-                        setPersonalForm((prev) => ({ ...prev, month: e.target.value }))
+                      onChange={(nextValue) => {
+                        setPersonalForm((prev) => ({ ...prev, month: nextValue ?? '' }))
                         clearSectionStatus('personal')
                       }}
                       options={MONTHS}
+                      searchable={false}
                     />
-                    <Select
+                    <NovaSelect
                       placeholder="Year"
                       value={personalForm.year}
-                      onChange={(e) => {
-                        setPersonalForm((prev) => ({ ...prev, year: e.target.value }))
+                      onChange={(nextValue) => {
+                        setPersonalForm((prev) => ({ ...prev, year: nextValue ?? '' }))
                         clearSectionStatus('personal')
                       }}
                       options={yearOptions}
+                      searchable={false}
                     />
                   </div>
                   {errorsBySection.personal.birthday?.[0] ? (
@@ -1280,6 +1334,90 @@ export default function ProfileEdit() {
           </form>
         ) : null}
 
+        {activeSection === 'content' ? (
+          <form className="space-y-4" onSubmit={saveContentSection}>
+            <SectionCard
+              title="Content Preferences"
+              icon="fa-solid fa-eye-low-vision"
+              description="Decide how mature artworks should appear in listings and artwork detail pages."
+              actionSlot={
+                <Button type="submit" variant="accent" size="sm" loading={savingSection === 'content'}>
+                  Save Content Settings
+                </Button>
+              }
+            >
+              <ErrorMessage text={errorsBySection.content._general?.[0]} className="mb-4" />
+              <SuccessMessage text={sectionSaved} className="mb-4" />
+
+              <div className="space-y-5">
+                <div>
+                  <label className="mb-1.5 block text-sm font-medium text-white/85">Mature artwork visibility</label>
+
+                  <div className="grid gap-3">
+                    {MATURE_VISIBILITY_OPTIONS.map((option) => {
+                      const isActive = contentForm.mature_content_visibility === option.value
+
+                      return (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() => {
+                            setContentForm((prev) => ({ ...prev, mature_content_visibility: option.value }))
+                            clearSectionStatus('content')
+                          }}
+                          className={`rounded-2xl border px-4 py-3 text-left transition ${
+                            isActive
+                              ? 'border-amber-300/50 bg-amber-400/10 text-white shadow-[0_0_0_1px_rgba(251,191,36,0.15)]'
+                              : 'border-white/[0.08] bg-white/[0.02] text-slate-300 hover:bg-white/[0.04]'
+                          }`}
+                        >
+                          <div className="flex items-start gap-3">
+                            <span className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${isActive ? 'bg-amber-300/15 text-amber-200' : 'bg-white/[0.06] text-slate-400'}`}>
+                              <i className={`fa-solid ${option.value === 'hide' ? 'fa-eye-slash' : option.value === 'blur' ? 'fa-droplet-slash' : 'fa-eye'}`} />
+                            </span>
+                            <div className="min-w-0">
+                              <p className="text-sm font-medium">{option.label}</p>
+                              <p className="mt-1 text-xs text-slate-400">{option.hint}</p>
+                            </div>
+                          </div>
+                        </button>
+                      )
+                    })}
+                  </div>
+
+                  {errorsBySection.content.mature_content_visibility?.[0] ? (
+                    <p className="mt-2 text-xs text-red-300">{errorsBySection.content.mature_content_visibility[0]}</p>
+                  ) : null}
+                </div>
+
+                <div className="flex items-center gap-3 rounded-xl border border-white/[0.06] bg-white/[0.02] px-4 py-3 transition-colors hover:bg-white/[0.04]">
+                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/[0.06] text-slate-400">
+                    <i className="fa-solid fa-triangle-exclamation text-xs" />
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-white/90">Show warning before opening mature artwork pages</p>
+                    <p className="text-xs text-slate-500">Display an interstitial on artwork detail pages before revealing mature media.</p>
+                  </div>
+                  <Toggle
+                    checked={!!contentForm.mature_content_warning_enabled}
+                    onChange={(e) => {
+                      setContentForm((prev) => ({ ...prev, mature_content_warning_enabled: e.target.checked }))
+                      clearSectionStatus('content')
+                    }}
+                    variant="accent"
+                  />
+                </div>
+
+                {errorsBySection.content.mature_content_warning_enabled?.[0] ? (
+                  <p className="text-xs text-red-300">{errorsBySection.content.mature_content_warning_enabled[0]}</p>
+                ) : null}
+
+                {renderCaptchaChallenge('content')}
+              </div>
+            </SectionCard>
+          </form>
+        ) : null}
+
         {activeSection === 'security' ? (
           <form className="space-y-4" onSubmit={saveSecuritySection}>
             <SectionCard

resources/js/Pages/Studio/StudioArtworkAnalytics.jsx

@@ -104,7 +104,7 @@ export default function StudioArtworkAnalytics() {
             <div className="text-center">
               <i className="fa-solid fa-share-nodes text-3xl text-slate-700 mb-3" />
               <p className="text-xs text-slate-500">Coming soon</p>
-              <p className="text-[10px] text-slate-600 mt-1">Platform-level share tracking coming in v2</p>
+              <p className="text-[10px] text-slate-600 mt-1">Per-platform breakdown coming in a future update</p>
             </div>
           </div>
         </div>

resources/js/Pages/Studio/StudioArtworkEdit.jsx

@@ -10,10 +10,12 @@ import Toggle from '../../components/ui/Toggle'
 import NovaSelect from '../../components/ui/NovaSelect'
 import TagPicker from '../../components/tags/TagPicker'
 import SchedulePublishPicker from '../../components/upload/SchedulePublishPicker'
+import ArtworkEvolutionSearchPicker from '../../components/artwork/ArtworkEvolutionSearchPicker'
 
 const EDIT_SECTIONS = [
   { id: 'taxonomy', label: 'Category', hint: 'Content type and category path' },
   { id: 'details', label: 'Details', hint: 'Title and description' },
+  { id: 'evolution', label: 'Evolution', hint: 'Link an older original artwork' },
   { id: 'ai-assist', label: 'AI Assist', hint: 'Suggestions and similar matches' },
   { id: 'tags', label: 'Tags', hint: 'Search, add, and refine keywords' },
   { id: 'visibility', label: 'Visibility', hint: 'Publishing state' },
@@ -21,6 +23,7 @@ const EDIT_SECTIONS = [
 
 const TABS = [
   { id: 'details', label: 'Details', icon: 'fa-solid fa-pen-fancy' },
+  { id: 'evolution', label: 'Evolution', icon: 'fa-solid fa-code-branch' },
   { id: 'tags', label: 'Tags', icon: 'fa-solid fa-tags' },
   { id: 'taxonomy', label: 'Category', icon: 'fa-solid fa-palette' },
   { id: 'visibility', label: 'Visibility', icon: 'fa-solid fa-eye' },
@@ -40,6 +43,51 @@ function formatBytes(bytes) {
   return (bytes / 1048576).toFixed(1) + ' MB'
 }
 
+function formatSchedulePreview(value, timezone) {
+  if (!value) return 'Pick a date and time'
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return 'Pick a date and time'
+
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+      timeZone: timezone || undefined,
+    }).format(date)
+  } catch {
+    return date.toLocaleString()
+  }
+}
+
+function formatReleaseCountdown(value, nowMs = Date.now()) {
+  if (!value) return ''
+
+  const releaseDate = new Date(value)
+  if (Number.isNaN(releaseDate.getTime())) return ''
+
+  const remainingMs = releaseDate.getTime() - nowMs
+
+  if (remainingMs <= 0) {
+    return 'Releasing now'
+  }
+
+  const totalSeconds = Math.floor(remainingMs / 1000)
+  const days = Math.floor(totalSeconds / 86400)
+  const hours = Math.floor((totalSeconds % 86400) / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+
+  const parts = []
+
+  if (days > 0) parts.push(`${days}d`)
+  if (days > 0 || hours > 0) parts.push(`${hours}h`)
+  if (days > 0 || hours > 0 || minutes > 0) parts.push(`${minutes}m`)
+  if (days === 0) parts.push(`${seconds}s`)
+
+  return `In ${parts.join(' ')}`
+}
+
 function getContentTypeVisualKey(slug) {
   const map = { skins: 'skins', wallpapers: 'wallpapers', photography: 'photography', other: 'other', members: 'members' }
   return map[slug] || 'other'
@@ -206,6 +254,8 @@ export default function StudioArtworkEdit() {
   const { props } = usePage()
   const { artwork, contentTypes: rawContentTypes } = props
   const groupOptions = Array.isArray(props.groupOptions) ? props.groupOptions : []
+  const evolutionRelationTypes = Array.isArray(props.evolutionRelationTypes) ? props.evolutionRelationTypes : []
+  const initialEvolutionRelation = artwork?.evolution_relation || null
   const contributorOptionsByGroup = props.contributorOptionsByGroup && typeof props.contributorOptionsByGroup === 'object'
     ? props.contributorOptionsByGroup
     : {}
@@ -230,6 +280,9 @@ export default function StudioArtworkEdit() {
   const [descriptionSource, setDescriptionSource] = useState(artwork?.description_source || 'manual')
   const [tagsSource, setTagsSource] = useState(artwork?.tags_source || 'manual')
   const [categorySource, setCategorySource] = useState(artwork?.category_source || 'manual')
+  const [evolutionTarget, setEvolutionTarget] = useState(initialEvolutionRelation?.target_artwork || null)
+  const [evolutionRelationType, setEvolutionRelationType] = useState(initialEvolutionRelation?.relation_type || evolutionRelationTypes[0]?.value || 'remake_of')
+  const [evolutionNote, setEvolutionNote] = useState(initialEvolutionRelation?.note || '')
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
   const [errors, setErrors] = useState({})
@@ -243,6 +296,7 @@ export default function StudioArtworkEdit() {
   const [selectedAiTags, setSelectedAiTags] = useState([])
   const [activeTab, setActiveTab] = useState('details')
   const [isCategoryChooserOpen, setIsCategoryChooserOpen] = useState(() => !artwork?.parent_category_id)
+  const [nowMs, setNowMs] = useState(() => Date.now())
   const userTimezone = useMemo(() => artwork?.artwork_timezone || Intl.DateTimeFormat().resolvedOptions().timeZone, [artwork?.artwork_timezone])
 
   // File replace
@@ -282,11 +336,27 @@ export default function StudioArtworkEdit() {
   const visibilitySummary = publishMode === 'schedule'
     ? `Scheduled as ${visibilityLabel(visibility)}`
     : visibilityLabel(visibility)
+  const selectedSubCategory = subCategoryId ? subCategories.find((item) => item.id === subCategoryId) || null : null
   const heroMeta = [
     selectedCT?.name || 'No content type',
     selectedRoot?.name || 'No root category',
-    subCategoryId ? subCategories.find((item) => item.id === subCategoryId)?.name : null,
+    selectedSubCategory?.name || null,
   ].filter(Boolean)
+  const categoryPreviewSummary = [selectedCT?.name, selectedRoot?.name, selectedSubCategory?.name].filter(Boolean).join(' / ') || 'Choose a category path'
+  const visibilityPreviewHint = publishMode === 'schedule'
+    ? 'Hidden until the scheduled publish time.'
+    : visibility === 'private'
+      ? 'Draft-only visibility.'
+      : visibility === 'unlisted'
+        ? 'Accessible by direct link.'
+        : 'Visible to everyone immediately.'
+  const hasScheduledRelease = publishMode === 'schedule' && Boolean(scheduledAt)
+  const schedulePreviewSummary = hasScheduledRelease
+    ? formatReleaseCountdown(scheduledAt, nowMs)
+    : ''
+  const schedulePreviewHint = hasScheduledRelease
+    ? formatSchedulePreview(scheduledAt, userTimezone)
+    : ''
   const publishingIdentityOptions = useMemo(() => {
     const personalOption = {
       value: '',
@@ -310,6 +380,7 @@ export default function StudioArtworkEdit() {
     username: user.username,
     avatarUrl: user.avatar_url || null,
   })), [currentContributorOptions])
+  const selectedEvolutionType = evolutionRelationTypes.find((option) => String(option.value) === String(evolutionRelationType)) || evolutionRelationTypes[0] || null
 
   // ── Handlers ───────────────────────────────────────────────────────────────
   const handleContentTypeChange = (id) => {
@@ -572,6 +643,16 @@ export default function StudioArtworkEdit() {
     return () => window.clearInterval(timer)
   }, [aiStatus, loadAiData])
 
+  useEffect(() => {
+    if (!hasScheduledRelease) return undefined
+
+    const timer = window.setInterval(() => {
+      setNowMs(Date.now())
+    }, 1000)
+
+    return () => window.clearInterval(timer)
+  }, [hasScheduledRelease])
+
   useEffect(() => {
     const selectedSlug = String(groupSlug || '')
     if (!selectedSlug) {
@@ -640,6 +721,9 @@ export default function StudioArtworkEdit() {
         description_source: descriptionSource,
         tags_source: tagsSource,
         category_source: categorySource,
+        evolution_target_artwork_id: evolutionTarget?.id || null,
+        evolution_relation_type: evolutionTarget ? evolutionRelationType : null,
+        evolution_note: evolutionTarget ? evolutionNote : null,
       }
       const res = await fetch(`/api/studio/artworks/${artwork.id}`, {
         method: 'PUT',
@@ -650,6 +734,7 @@ export default function StudioArtworkEdit() {
       if (res.ok) {
         const data = await res.json()
         const updatedArtwork = data?.artwork || null
+        const updatedEvolutionRelation = data?.evolution_relation || updatedArtwork?.evolution_relation || null
         if (updatedArtwork) {
           setVisibility(updatedArtwork.visibility || visibility)
           setPublishMode(updatedArtwork.publish_mode || 'now')
@@ -659,6 +744,9 @@ export default function StudioArtworkEdit() {
           setContributorUserIds(Array.isArray(updatedArtwork.contributor_user_ids) ? updatedArtwork.contributor_user_ids.map((id) => Number(id)).filter((id) => Number.isFinite(id) && id > 0) : [])
           setContributorCredits(normalizeContributorCredits(updatedArtwork.contributor_user_ids || [], mapContributorCredits(updatedArtwork.contributor_credits || [])))
         }
+        setEvolutionTarget(updatedEvolutionRelation?.target_artwork || null)
+        setEvolutionRelationType(updatedEvolutionRelation?.relation_type || evolutionRelationTypes[0]?.value || 'remake_of')
+        setEvolutionNote(updatedEvolutionRelation?.note || '')
         setSaved(true)
         setTimeout(() => setSaved(false), 3000)
       } else {
@@ -670,7 +758,7 @@ export default function StudioArtworkEdit() {
     } finally {
       setSaving(false)
     }
-  }, [title, description, visibility, publishMode, scheduledAt, userTimezone, groupSlug, primaryAuthorUserId, contributorUserIds, contributorCredits, contentTypeId, selectedLeafCategoryId, tagSlugs, titleSource, descriptionSource, tagsSource, categorySource, artwork?.id])
+  }, [title, description, visibility, publishMode, scheduledAt, userTimezone, groupSlug, primaryAuthorUserId, contributorUserIds, contributorCredits, contentTypeId, selectedLeafCategoryId, tagSlugs, titleSource, descriptionSource, tagsSource, categorySource, evolutionTarget, evolutionRelationType, evolutionNote, artwork?.id, evolutionRelationTypes])
 
   const handleFileReplace = async (e) => {
     const file = e.target.files?.[0]
@@ -785,7 +873,7 @@ export default function StudioArtworkEdit() {
       <div className="grid grid-cols-1 gap-6 items-start xl:grid-cols-[300px_minmax(0,1fr)]">
 
         {/* ─────────── LEFT SIDEBAR ─────────── */}
-        <div className="space-y-4 xl:sticky xl:top-6 xl:max-h-[calc(100vh-48px)] xl:overflow-y-auto">
+        <div className="space-y-4 xl:sticky xl:top-6 xl:max-h-[calc(100vh-48px)] xl:overflow-y-auto xl:overscroll-contain xl:pr-1 nova-scrollbar">
 
           {/* Preview Card */}
           <Section>
@@ -897,6 +985,55 @@ export default function StudioArtworkEdit() {
             </div>
           </Section>
 
+          <Section className="space-y-3">
+            <SectionTitle icon="fa-solid fa-layer-group">Publishing Snapshot</SectionTitle>
+
+            {[
+              {
+                id: 'taxonomy',
+                label: 'Category',
+                value: categoryPreviewSummary,
+                hint: categorySource === 'manual' ? 'Manual category path' : `Source: ${String(categorySource).replace(/_/g, ' ')}`,
+                icon: 'fa-solid fa-palette',
+              },
+              {
+                id: 'visibility',
+                label: 'Visibility',
+                value: visibilitySummary,
+                hint: visibilityPreviewHint,
+                icon: 'fa-solid fa-eye',
+              },
+              hasScheduledRelease
+                ? {
+                  id: 'visibility',
+                  label: 'Scheduler',
+                  value: schedulePreviewSummary,
+                  hint: schedulePreviewHint,
+                  icon: 'fa-regular fa-clock',
+                }
+                : null,
+            ].filter(Boolean).map((item) => (
+              <button
+                key={`${item.label}-${item.id}`}
+                type="button"
+                onClick={() => setActiveTab(item.id)}
+                className="group flex w-full items-start gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-left transition hover:border-white/20 hover:bg-white/[0.05]"
+              >
+                <span className="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] text-slate-300 transition group-hover:border-accent/30 group-hover:bg-accent/10 group-hover:text-accent">
+                  <i className={`${item.icon} text-[13px]`} aria-hidden="true" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{item.label}</span>
+                  <span className="mt-1 block truncate text-sm font-medium text-white" title={item.value}>{item.value}</span>
+                  <span className="mt-1 block text-xs text-slate-500">{item.hint}</span>
+                </span>
+                <span className="pt-1 text-slate-600 transition group-hover:text-slate-300" aria-hidden="true">
+                  <i className="fa-solid fa-chevron-right text-[11px]" />
+                </span>
+              </button>
+            ))}
+          </Section>
+
           {/* Quick Links */}
           <Section className="py-3 px-4">
             <Link
@@ -933,6 +1070,9 @@ export default function StudioArtworkEdit() {
                 >
                   <i className={`${tab.icon} text-[11px]`} aria-hidden="true" />
                   {tab.label}
+                  {tab.id === 'evolution' && evolutionTarget && (
+                    <span className="h-1.5 w-1.5 rounded-full bg-sky-400" />
+                  )}
                   {tab.id === 'ai' && aiStatus !== 'not_analyzed' && (
                     <span className={`h-1.5 w-1.5 rounded-full ${aiStatus === 'ready' ? 'bg-emerald-400' : aiStatus === 'failed' ? 'bg-red-400' : 'bg-sky-400'}`} />
                   )}
@@ -1166,12 +1306,11 @@ export default function StudioArtworkEdit() {
             <SectionTitle icon="fa-solid fa-pen-fancy">Details</SectionTitle>
 
             <TextInput
-              label={<FieldLabel label="Title" actionLabel="Title" onAction={() => requestAiIntent('title')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'} />}
+              label={<FieldLabel label={<span className="inline-flex items-center gap-1">Title <span className="text-red-400">*</span></span>} actionLabel="Title" onAction={() => requestAiIntent('title')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'} />}
               value={title}
               onChange={handleTitleChange}
               placeholder="Give your artwork a title"
               error={errors.title?.[0]}
-              required
             />
 
             <FormField label={<FieldLabel label="Description" actionLabel="Description" onAction={() => requestAiIntent('description')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'} />} htmlFor="artwork-description">
@@ -1363,6 +1502,78 @@ export default function StudioArtworkEdit() {
           </Section>
           )}
 
+          {/* ── Evolution tab ── */}
+          {activeTab === 'evolution' && (
+          <Section id="evolution" className="space-y-6">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+              <div>
+                <SectionTitle icon="fa-solid fa-code-branch">Artwork Evolution</SectionTitle>
+                <p className="-mt-2 text-sm text-slate-400">Connect this piece to an older public original so the artwork page can tell a clear Then & Now story in both directions.</p>
+              </div>
+              <div className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] ${evolutionTarget ? 'border-sky-300/25 bg-sky-300/10 text-sky-100' : 'border-white/10 bg-white/[0.04] text-slate-300'}`}>
+                <i className="fa-solid fa-sparkles text-[10px]" aria-hidden="true" />
+                {evolutionTarget ? (selectedEvolutionType?.short_label || 'Linked') : 'No original linked'}
+              </div>
+            </div>
+
+            <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
+              <div className="space-y-4">
+                <ArtworkEvolutionSearchPicker
+                  artworkId={artwork?.id}
+                  selected={evolutionTarget}
+                  onSelect={(option) => setEvolutionTarget(option)}
+                  disabled={saving}
+                />
+                {errors.evolution_target_artwork_id?.[0] ? <p className="text-sm text-red-400">{errors.evolution_target_artwork_id[0]}</p> : null}
+              </div>
+
+              <div className="space-y-4">
+                <RightRailCard title="Relation settings">
+                  <div className="space-y-4">
+                    <label className="block">
+                      <span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Story type</span>
+                      <select
+                        value={evolutionRelationType}
+                        onChange={(event) => setEvolutionRelationType(event.target.value)}
+                        disabled={saving || !evolutionTarget}
+                        className="mt-2 w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/35 disabled:cursor-not-allowed disabled:opacity-60"
+                      >
+                        {evolutionRelationTypes.map((option) => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    {errors.evolution_relation_type?.[0] ? <p className="text-sm text-red-400">{errors.evolution_relation_type[0]}</p> : null}
+
+                    <label className="block">
+                      <span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Creator note</span>
+                      <textarea
+                        value={evolutionNote}
+                        onChange={(event) => setEvolutionNote(event.target.value)}
+                        placeholder="Optional context for viewers: what changed, what you learned, why this version matters..."
+                        disabled={saving || !evolutionTarget}
+                        rows={6}
+                        className="mt-2 w-full rounded-[24px] border border-white/10 bg-[#0d1726] px-4 py-3 text-sm leading-6 text-white outline-none transition focus:border-sky-300/35 disabled:cursor-not-allowed disabled:opacity-60"
+                      />
+                    </label>
+                    {errors.evolution_note?.[0] ? <p className="text-sm text-red-400">{errors.evolution_note[0]}</p> : null}
+                  </div>
+                </RightRailCard>
+
+                <RightRailCard title="Public behavior">
+                  <div className="space-y-3 text-sm leading-relaxed text-slate-300">
+                    <p>The newer artwork gets the main comparison panel. The older artwork gets an updated-version card pointing back here.</p>
+                    <p>Only published public artworks can be linked, and the original has to be older than the piece you are editing.</p>
+                    <p>{evolutionTarget ? `Current target: ${evolutionTarget.title}` : 'Pick an older artwork first to unlock relation type and note settings.'}</p>
+                  </div>
+                </RightRailCard>
+              </div>
+            </div>
+          </Section>
+          )}
+
           {/* ── AI Assist tab ── */}
           {activeTab === 'ai' && (
           <Section id="ai-assist" className="space-y-5">

resources/js/Pages/Studio/StudioCalendar.jsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { router, usePage } from '@inertiajs/react'
 import StudioLayout from '../../Layouts/StudioLayout'
 import { studioSurface, trackStudioEvent } from '../../utils/studioEvents'
+import { formatReleaseCountdown, formatScheduledDate } from '../../utils/scheduleCountdown'
 
 async function requestJson(url, method = 'POST') {
   const response = await fetch(url, {
@@ -20,19 +21,13 @@ async function requestJson(url, method = 'POST') {
   return payload
 }
 
-function formatDate(value) {
-  if (!value) return 'Not scheduled'
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return 'Not scheduled'
-  return date.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
-}
-
 export default function StudioCalendar() {
   const { props } = usePage()
   const calendar = props.calendar || {}
   const filters = calendar.filters || {}
   const summary = calendar.summary || {}
   const [busyKey, setBusyKey] = useState(null)
+  const [nowMs, setNowMs] = useState(() => Date.now())
 
   const updateFilters = (patch) => {
     const next = { ...filters, ...patch }
@@ -61,6 +56,17 @@ export default function StudioCalendar() {
     }
   }
 
+  useEffect(() => {
+    const hasTimedEntries = Boolean(summary.next_publish_at) || (calendar.scheduled_items || []).some((item) => Boolean(item.scheduled_at))
+    if (!hasTimedEntries) return undefined
+
+    const timer = window.setInterval(() => {
+      setNowMs(Date.now())
+    }, 1000)
+
+    return () => window.clearInterval(timer)
+  }, [calendar.scheduled_items, summary.next_publish_at])
+
   return (
     <StudioLayout title={props.title} subtitle={props.description}>
       <div className="space-y-6">
@@ -68,7 +74,7 @@ export default function StudioCalendar() {
           <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Scheduled</div><div className="mt-2 text-3xl font-semibold text-white">{Number(summary.scheduled_total || 0).toLocaleString()}</div></div>
           <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Unscheduled</div><div className="mt-2 text-3xl font-semibold text-white">{Number(summary.unscheduled_total || 0).toLocaleString()}</div></div>
           <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Overloaded days</div><div className="mt-2 text-3xl font-semibold text-white">{Number(summary.overloaded_days || 0).toLocaleString()}</div></div>
-          <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Next publish</div><div className="mt-2 text-base font-semibold text-white">{formatDate(summary.next_publish_at)}</div></div>
+          <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Next publish</div><div className="mt-2 text-base font-semibold text-white">{formatReleaseCountdown(summary.next_publish_at, nowMs)}</div>{summary.next_publish_at && <div className="mt-1 text-sm text-slate-400">{formatScheduledDate(summary.next_publish_at)}</div>}</div>
         </section>
 
         <section className="rounded-[30px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_35%),linear-gradient(135deg,_rgba(15,23,42,0.86),_rgba(2,6,23,0.96))] p-5 lg:p-6">
@@ -100,7 +106,7 @@ export default function StudioCalendar() {
             ) : filters.view === 'agenda' ? (
               <>
                 <h2 className="text-lg font-semibold text-white">Agenda</h2>
-                <div className="mt-4 space-y-4">{(calendar.agenda || []).map((group) => <div key={group.date} className="rounded-[22px] border border-white/10 bg-black/20 p-4"><div className="flex items-center justify-between gap-3"><div className="text-base font-semibold text-white">{group.label}</div><div className="text-xs uppercase tracking-[0.18em] text-slate-500">{group.count} items</div></div><div className="mt-3 space-y-2">{group.items.map((item) => <a key={item.id} href={item.edit_url || item.manage_url} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 px-3 py-2 text-sm text-slate-200"><span>{item.title}</span><span className="text-xs text-slate-500">{formatDate(item.scheduled_at)}</span></a>)}</div></div>)}</div>
+                <div className="mt-4 space-y-4">{(calendar.agenda || []).map((group) => <div key={group.date} className="rounded-[22px] border border-white/10 bg-black/20 p-4"><div className="flex items-center justify-between gap-3"><div className="text-base font-semibold text-white">{group.label}</div><div className="text-xs uppercase tracking-[0.18em] text-slate-500">{group.count} items</div></div><div className="mt-3 space-y-2">{group.items.map((item) => <a key={item.id} href={item.edit_url || item.manage_url} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 px-3 py-2 text-sm text-slate-200"><span>{item.title}</span><span className="text-xs text-slate-500">{formatScheduledDate(item.scheduled_at)}</span></a>)}</div></div>)}</div>
               </>
             ) : (
               <>
@@ -124,7 +130,7 @@ export default function StudioCalendar() {
 
             <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-5">
               <div className="flex items-center justify-between"><h2 className="text-lg font-semibold text-white">Upcoming actions</h2><a href="/studio/scheduled" className="text-sm font-medium text-sky-100">Open list</a></div>
-              <div className="mt-4 space-y-3">{(calendar.scheduled_items || []).slice(0, 5).map((item) => <div key={item.id} className="rounded-2xl border border-white/10 bg-black/20 p-4"><div className="text-sm font-semibold text-white">{item.title}</div><div className="mt-1 text-xs text-slate-500">{formatDate(item.scheduled_at)}</div><div className="mt-3 flex flex-wrap gap-2"><button type="button" disabled={busyKey === `publish:${item.id}`} onClick={() => runAction(props.endpoints.publishNowPattern, item, 'publish')} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-xs text-sky-100 disabled:opacity-50">Publish now</button><button type="button" disabled={busyKey === `unschedule:${item.id}`} onClick={() => runAction(props.endpoints.unschedulePattern, item, 'unschedule')} className="rounded-full border border-white/10 px-3 py-1.5 text-xs text-slate-200 disabled:opacity-50">Unschedule</button></div></div>)}</div>
+              <div className="mt-4 space-y-3">{(calendar.scheduled_items || []).slice(0, 5).map((item) => <div key={item.id} className="rounded-2xl border border-white/10 bg-black/20 p-4"><div className="text-sm font-semibold text-white">{item.title}</div><div className="mt-1 text-xs font-medium text-sky-200">{formatReleaseCountdown(item.scheduled_at, nowMs)}</div><div className="mt-1 text-xs text-slate-500">{formatScheduledDate(item.scheduled_at)}</div><div className="mt-3 flex flex-wrap gap-2"><button type="button" disabled={busyKey === `publish:${item.id}`} onClick={() => runAction(props.endpoints.publishNowPattern, item, 'publish')} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-xs text-sky-100 disabled:opacity-50">Publish now</button><button type="button" disabled={busyKey === `unschedule:${item.id}`} onClick={() => runAction(props.endpoints.unschedulePattern, item, 'unschedule')} className="rounded-full border border-white/10 px-3 py-1.5 text-xs text-slate-200 disabled:opacity-50">Unschedule</button></div></div>)}</div>
             </section>
           </aside>
         </div>

resources/js/Pages/Studio/StudioScheduled.jsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { router, usePage } from '@inertiajs/react'
 import StudioLayout from '../../Layouts/StudioLayout'
 import { studioSurface, trackStudioEvent } from '../../utils/studioEvents'
+import { formatReleaseCountdown, formatScheduledDate } from '../../utils/scheduleCountdown'
 
 async function requestJson(url, method = 'POST') {
   const response = await fetch(url, {
@@ -24,13 +25,6 @@ async function requestJson(url, method = 'POST') {
   return payload
 }
 
-function formatDate(value) {
-  if (!value) return 'Not scheduled'
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return 'Not scheduled'
-  return date.toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })
-}
-
 export default function StudioScheduled() {
   const { props } = usePage()
   const listing = props.listing || {}
@@ -42,6 +36,7 @@ export default function StudioScheduled() {
   const rangeOptions = listing.range_options || []
   const endpoints = props.endpoints || {}
   const [busyId, setBusyId] = useState(null)
+  const [nowMs, setNowMs] = useState(() => Date.now())
 
   const updateFilters = (patch) => {
     const next = { ...filters, ...patch }
@@ -84,6 +79,17 @@ export default function StudioScheduled() {
     }
   }
 
+  useEffect(() => {
+    const hasTimedEntries = Boolean(summary.next_publish_at) || items.some((item) => Boolean(item.scheduled_at || item.published_at))
+    if (!hasTimedEntries) return undefined
+
+    const timer = window.setInterval(() => {
+      setNowMs(Date.now())
+    }, 1000)
+
+    return () => window.clearInterval(timer)
+  }, [items, summary.next_publish_at])
+
   return (
     <StudioLayout title={props.title} subtitle={props.description}>
       <div className="space-y-6">
@@ -96,7 +102,8 @@ export default function StudioScheduled() {
               </div>
               <div className="rounded-[24px] border border-white/10 bg-black/20 p-4 md:col-span-2">
                 <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Next publish slot</div>
-                <div className="mt-2 text-xl font-semibold text-white">{formatDate(summary.next_publish_at)}</div>
+                <div className="mt-2 text-xl font-semibold text-white">{formatReleaseCountdown(summary.next_publish_at, nowMs)}</div>
+                {summary.next_publish_at && <div className="mt-1 text-sm text-slate-400">{formatScheduledDate(summary.next_publish_at)}</div>}
               </div>
             </div>
 
@@ -172,9 +179,10 @@ export default function StudioScheduled() {
                   </div>
                   <h2 className="mt-2 text-xl font-semibold text-white">{item.title}</h2>
                   <div className="mt-2 flex flex-wrap items-center gap-4 text-sm text-slate-400">
-                    <span>Scheduled for {formatDate(item.scheduled_at || item.published_at)}</span>
+                    <span>{formatReleaseCountdown(item.scheduled_at || item.published_at, nowMs)}</span>
+                    <span>{formatScheduledDate(item.scheduled_at || item.published_at)}</span>
                     {item.visibility && <span>Visibility: {item.visibility}</span>}
-                    {item.updated_at && <span>Last edited {formatDate(item.updated_at)}</span>}
+                    {item.updated_at && <span>Last edited {formatScheduledDate(item.updated_at)}</span>}
                     {item.schedule_timezone && <span>{item.schedule_timezone}</span>}
                   </div>
                 </div>

resources/js/Pages/Upload/Index.jsx

@@ -889,7 +889,7 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize, chunkReque
                     {availableTypes.map((ct) => {
                       const active = String(ct.id) === String(state.metadata.type)
                       const iconKey = getTypeKey(ct)
-                      const iconPath = `/gfx/mascot_${iconKey}.webp`
+                      const iconPath = ct?.mascot_url || `/gfx/mascot_${iconKey}.webp`
                       return (
                         <button
                           key={ct.id}
@@ -1030,7 +1030,6 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize, chunkReque
                       dispatch({ type: 'SET_METADATA', payload: { tags: nextTags.join(', ') } })
                     }}
                     suggestedTags={suggestedTags}
-                    maxTags={15}
                     minLength={2}
                     maxLength={32}
                     searchEndpoint="/api/tags/search"