feat: ship creator journey v2 and profile updates

2026-04-12 21:42:07 +02:00
parent a2457f4e49
commit d5cff21ea2
335 changed files with 20147 additions and 1545 deletions
--- a/resources/js/components/Feed/PostComposer.jsx
+++ b/resources/js/components/Feed/PostComposer.jsx
@@ -3,6 +3,8 @@ import axios from 'axios'
 import ShareArtworkModal from './ShareArtworkModal'
 import LinkPreviewCard from './LinkPreviewCard'
 import TagPeopleModal from './TagPeopleModal'
+import extractNativeEmoji from '../common/extractNativeEmoji'
+import isEventWithinNode from '../common/isEventWithinNode'

 // Lazy-load the heavy emoji picker only when first opened
 const EmojiPicker = lazy(() => import('../common/EmojiMartPicker'))
@@ -62,7 +64,7 @@ export default function PostComposer({ user, onPosted }) {
  useEffect(() => {
    if (!emojiOpen) return
    const handler = (e) => {
-      if (emojiWrapRef.current && !emojiWrapRef.current.contains(e.target)) {
+      if (!isEventWithinNode(e, emojiWrapRef.current)) {
        setEmojiOpen(false)
      }
    }
@@ -72,7 +74,7 @@ export default function PostComposer({ user, onPosted }) {

  // Insert emoji at current cursor position
  const insertEmoji = useCallback((emoji) => {
-    const native = emoji.native ?? emoji.shortcodes ?? ''
+    const native = extractNativeEmoji(emoji) || emoji?.shortcodes || ''
    const ta = textareaRef.current
    if (!ta) {
      setBody((b) => b + native)
--- a/resources/js/components/Topbar.jsx
+++ b/resources/js/components/Topbar.jsx
@@ -34,7 +34,7 @@ export default function Topbar({ user = null }) {
              >
                <img
                  src={user.avatarUrl || DEFAULT_AVATAR}
-                  alt={user.displayName}
+                  alt=""
                  className="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
                  onError={(e) => { e.currentTarget.src = DEFAULT_AVATAR }}
                />
@@ -47,7 +47,7 @@ export default function Topbar({ user = null }) {
                  <a href={`/@${user.username}`} className="flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5">
                    <img
                      src={user.avatarUrl || DEFAULT_AVATAR}
-                      alt={user.displayName}
+                      alt=""
                      className="w-6 h-6 rounded-full object-cover"
                      onError={(e) => { e.currentTarget.src = DEFAULT_AVATAR }}
                    />
--- a/resources/js/components/artwork/ArtworkActionBar.jsx
+++ b/resources/js/components/artwork/ArtworkActionBar.jsx
@@ -34,14 +34,6 @@ function BookmarkIcon({ filled }) {
  )
 }

-function CloudDownIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9.75v6.75m0 0-3-3m3 3 3-3m-8.25 6a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
-    </svg>
-  )
-}
-
 function DownloadArrowIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-4 w-4">
@@ -216,17 +208,13 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
    ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    : null

-  // Track view
+  // Count a view on every page load.
  useEffect(() => {
    if (!artwork?.id) return
-    const key = `sb_viewed_${artwork.id}`
-    if (typeof sessionStorage !== 'undefined' && sessionStorage.getItem(key)) return
    fetch(`/api/art/${artwork.id}/view`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': csrfToken || '', 'Content-Type': 'application/json' },
      credentials: 'same-origin',
-    }).then(res => {
-      if (res.ok && typeof sessionStorage !== 'undefined') sessionStorage.setItem(key, '1')
    }).catch(() => {})
  }, [artwork?.id]) // eslint-disable-line react-hooks/exhaustive-deps

@@ -310,7 +298,6 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats

  const favCount = formatCount(stats?.favorites ?? artwork?.stats?.favorites ?? 0)
  const savedCount = formatCount(bookmarkCount)
-  const viewCount = formatCount(stats?.views ?? artwork?.stats?.views ?? 0)

  return (
    <>
@@ -347,12 +334,6 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
          <span className="tabular-nums">{savedCount}</span>
        </button>

-        {/* Views stat pill */}
-        <div className="inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-5 py-2.5 text-sm font-medium text-white/70">
-          <CloudDownIcon />
-          <span className="tabular-nums">{viewCount}</span>
-        </div>
-
        {/* Share pill */}
        <ArtworkShareButton artwork={artwork} shareUrl={shareUrl} size="default" isLoggedIn={isLoggedIn} />

--- a/resources/js/components/artwork/ArtworkActions.jsx
+++ b/resources/js/components/artwork/ArtworkActions.jsx
@@ -10,21 +10,13 @@ export default function ArtworkActions({ artwork, canonicalUrl, mobilePriority =
    ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    : null

-  // Track the view once per browser session (sessionStorage prevents re-firing).
+  // Count a view on every page load.
  useEffect(() => {
    if (!artwork?.id) return
-    const key = `sb_viewed_${artwork.id}`
-    if (typeof sessionStorage !== 'undefined' && sessionStorage.getItem(key)) return
    fetch(`/api/art/${artwork.id}/view`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': csrfToken || '', 'Content-Type': 'application/json' },
      credentials: 'same-origin',
-    }).then(res => {
-      // Only mark as seen after a confirmed success — if the POST fails the
-      // next page load will retry rather than silently skipping forever.
-      if (res.ok && typeof sessionStorage !== 'undefined') {
-        sessionStorage.setItem(key, '1')
-      }
    }).catch(() => {})
  }, [artwork?.id]) // eslint-disable-line react-hooks/exhaustive-deps

--- a/resources/js/components/artwork/ArtworkAwards.jsx
+++ b/resources/js/components/artwork/ArtworkAwards.jsx
@@ -1,13 +1,120 @@
 import React, { useState, useCallback } from 'react'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'

 const MEDALS = [
-  { key: 'gold',   label: 'Gold',   emoji: '🥇', weight: 3 },
-  { key: 'silver', label: 'Silver', emoji: '🥈', weight: 2 },
+  { key: 'gold',   label: 'Gold',   emoji: '🥇', weight: 5 },
+  { key: 'silver', label: 'Silver', emoji: '🥈', weight: 3 },
  { key: 'bronze', label: 'Bronze', emoji: '🥉', weight: 1 },
 ]

+function getMedalMeta(medalKey) {
+  return MEDALS.find((medal) => medal.key === medalKey) ?? null
+}
+
+function getMedalWeight(medalKey) {
+  return getMedalMeta(medalKey)?.weight ?? 0
+}
+
+function buildConfirmationContent(pendingConfirmation) {
+  if (!pendingConfirmation) {
+    return null
+  }
+
+  const nextMedal = getMedalMeta(pendingConfirmation.medal)
+  const previousMedal = getMedalMeta(pendingConfirmation.previousMedal)
+
+  if (pendingConfirmation.action === 'remove') {
+    return {
+      title: `Remove ${nextMedal?.label ?? 'medal'} medal?`,
+      summary: `This will remove your ${nextMedal?.label ?? ''} medal from this artwork.`,
+      details: 'Your contribution to the medal score will be removed immediately after confirmation.',
+      confirmLabel: 'Remove medal',
+      confirmVariant: 'danger',
+      modalVariant: 'danger',
+    }
+  }
+
+  return {
+    title: `Change medal to ${nextMedal?.label ?? 'selected medal'}?`,
+    summary: `You already awarded ${previousMedal?.label ?? 'a medal'} to this artwork.`,
+    details: `Confirm to switch your medal from ${previousMedal?.label ?? 'the current medal'} to ${nextMedal?.label ?? 'the selected medal'}.`,
+    confirmLabel: `Change to ${nextMedal?.label ?? 'selected medal'}`,
+    confirmVariant: 'accent',
+    modalVariant: 'default',
+  }
+}
+
+function describeMedalError(message) {
+  const normalized = String(message || '').trim()
+  const lower = normalized.toLowerCase()
+
+  if (lower.includes('verify your email')) {
+    return {
+      title: 'Email verification required',
+      summary: 'Medals are limited to verified accounts to reduce abuse and low-quality vote spam.',
+      details: 'Open your account email, use the verification link, then reload this page and try again.',
+    }
+  }
+
+  if (lower.includes('at least') && lower.includes('hours old')) {
+    return {
+      title: 'Account is too new',
+      summary: normalized,
+      details: 'This cooldown is there to stop throwaway accounts from mass-awarding artworks immediately after signup.',
+    }
+  }
+
+  if (lower.includes('your own artwork')) {
+    return {
+      title: 'Own artwork cannot be medaled',
+      summary: 'Creators cannot add medals to their own work.',
+      details: 'Only other community members can award medals so the score stays community-driven.',
+    }
+  }
+
+  if (lower.includes('not published yet')) {
+    return {
+      title: 'Artwork is not published yet',
+      summary: 'This artwork has not reached a public, medal-eligible state yet.',
+      details: 'Medals are only available after the artwork is published and visible publicly.',
+    }
+  }
+
+  if (lower.includes('not eligible for medals')) {
+    return {
+      title: 'Artwork is not eligible for medals',
+      summary: 'This artwork is currently blocked from medal voting.',
+      details: 'That usually means it is private, unapproved, or otherwise not available for public medal activity.',
+    }
+  }
+
+  if (lower.includes('no longer available')) {
+    return {
+      title: 'Artwork is unavailable',
+      summary: 'This artwork can no longer receive medals.',
+      details: 'The artwork may have been removed or is no longer publicly available.',
+    }
+  }
+
+  if (lower.includes('disabled')) {
+    return {
+      title: 'Medals are temporarily unavailable',
+      summary: normalized,
+      details: 'This is a site-wide setting, not a problem with your account.',
+    }
+  }
+
+  return {
+    title: 'Unable to add medal',
+    summary: normalized || 'The medal request could not be completed.',
+    details: 'Check that you are signed in with an eligible account and that the artwork is publicly medal-eligible.',
+  }
+}
+
 export default function ArtworkAwards({ artwork, initialAwards = null, isAuthenticated = false }) {
  const artworkId = artwork?.id
+  const isOwnArtwork = Boolean(artwork?.viewer?.id && artwork?.user?.id && artwork.viewer.id === artwork.user.id)

  const [awards, setAwards] = useState({
    gold:   initialAwards?.gold   ?? 0,
@@ -15,16 +122,20 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
    bronze: initialAwards?.bronze ?? 0,
    score:  initialAwards?.score  ?? 0,
  })
-  const [viewerAward, setViewerAward] = useState(initialAwards?.viewer_award ?? null)
+  const [viewerAward, setViewerAward] = useState(initialAwards?.current_user_medal ?? initialAwards?.viewer_award ?? null)
  const [loading, setLoading] = useState(null) // which medal is pending
  const [error, setError] = useState(null)
+  const [pendingConfirmation, setPendingConfirmation] = useState(null)
+
+  const errorDetails = error ? describeMedalError(error) : null
+  const confirmationContent = buildConfirmationContent(pendingConfirmation)

  const csrfToken = typeof document !== 'undefined'
    ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    : null

  const apiFetch = useCallback(async (method, body = null) => {
-    const res = await fetch(`/api/artworks/${artworkId}/award`, {
+    const res = await fetch(`/api/artworks/${artworkId}/medal`, {
      method,
      headers: {
        'Content-Type': 'application/json',
@@ -44,19 +155,21 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
  }, [artworkId, csrfToken])

  const applyServerResponse = useCallback((data) => {
-    if (data?.awards) {
+    const payload = data?.medals || data?.awards || null
+
+    if (payload) {
      setAwards({
-        gold:   data.awards.gold   ?? 0,
-        silver: data.awards.silver ?? 0,
-        bronze: data.awards.bronze ?? 0,
-        score:  data.awards.score  ?? 0,
+        gold:   payload.gold   ?? 0,
+        silver: payload.silver ?? 0,
+        bronze: payload.bronze ?? 0,
+        score:  payload.score  ?? 0,
      })
    }
-    setViewerAward(data?.viewer_award ?? null)
+    setViewerAward(data?.current_user_medal ?? data?.viewer_award ?? null)
  }, [])

-  const handleMedalClick = useCallback(async (medal) => {
-    if (!isAuthenticated) return
+  const handleMedalAction = useCallback(async ({ action, medal, previousMedal = null }) => {
+    if (!isAuthenticated || isOwnArtwork) return
    if (loading) return

    setError(null)
@@ -65,17 +178,12 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
    const prevAwards   = { ...awards }
    const prevViewer   = viewerAward

-    const delta = (m) => {
-      const weight = MEDALS.find(x => x.key === m)?.weight ?? 0
-      return weight
-    }
-
-    if (viewerAward === medal) {
+    if (action === 'remove') {
      // Undo: remove award
      setAwards(a => ({
        ...a,
        [medal]: Math.max(0, a[medal] - 1),
-        score:   Math.max(0, a.score - delta(medal)),
+        score:   Math.max(0, a.score - getMedalWeight(medal)),
      }))
      setViewerAward(null)

@@ -90,102 +198,174 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
      } finally {
        setLoading(null)
      }
-    } else if (viewerAward) {
-      // Change: swap medals
-      const prev = viewerAward
-      setAwards(a => ({
-        ...a,
-        [prev]:  Math.max(0, a[prev] - 1),
-        [medal]: a[medal] + 1,
-        score:   a.score - delta(prev) + delta(medal),
-      }))
-      setViewerAward(medal)
-
-      setLoading(medal)
-      try {
-        const data = await apiFetch('PUT', { medal })
-        applyServerResponse(data)
-      } catch (e) {
-        setAwards(prevAwards)
-        setViewerAward(prevViewer)
-        setError(e.message)
-      } finally {
-        setLoading(null)
-      }
-    } else {
-      // New award
-      setAwards(a => ({
-        ...a,
-        [medal]: a[medal] + 1,
-        score:   a.score + delta(medal),
-      }))
-      setViewerAward(medal)
-
-      setLoading(medal)
-      try {
-        const data = await apiFetch('POST', { medal })
-        applyServerResponse(data)
-      } catch (e) {
-        setAwards(prevAwards)
-        setViewerAward(prevViewer)
-        setError(e.message)
-      } finally {
-        setLoading(null)
-      }
+      return
    }
-  }, [isAuthenticated, loading, awards, viewerAward, apiFetch, applyServerResponse])
+
+    if (action === 'change' && previousMedal) {
+      // Change: swap medals
+      setAwards(a => ({
+        ...a,
+        [previousMedal]:  Math.max(0, a[previousMedal] - 1),
+        [medal]: a[medal] + 1,
+        score:   a.score - getMedalWeight(previousMedal) + getMedalWeight(medal),
+      }))
+      setViewerAward(medal)
+
+      setLoading(medal)
+      try {
+        const data = await apiFetch('POST', { medal_type: medal })
+        applyServerResponse(data)
+      } catch (e) {
+        setAwards(prevAwards)
+        setViewerAward(prevViewer)
+        setError(e.message)
+      } finally {
+        setLoading(null)
+      }
+      return
+    }
+
+    // New award
+    setAwards(a => ({
+      ...a,
+      [medal]: a[medal] + 1,
+      score:   a.score + getMedalWeight(medal),
+    }))
+    setViewerAward(medal)
+
+    setLoading(medal)
+    try {
+      const data = await apiFetch('POST', { medal_type: medal })
+      applyServerResponse(data)
+    } catch (e) {
+      setAwards(prevAwards)
+      setViewerAward(prevViewer)
+      setError(e.message)
+    } finally {
+      setLoading(null)
+    }
+  }, [isAuthenticated, isOwnArtwork, loading, awards, viewerAward, apiFetch, applyServerResponse])
+
+  const handleMedalClick = useCallback((medal) => {
+    if (!isAuthenticated || isOwnArtwork) return
+    if (loading) return
+
+    setError(null)
+
+    if (viewerAward === medal) {
+      setPendingConfirmation({ action: 'remove', medal, previousMedal: medal })
+      return
+    }
+
+    if (viewerAward) {
+      setPendingConfirmation({ action: 'change', medal, previousMedal: viewerAward })
+      return
+    }
+
+    void handleMedalAction({ action: 'add', medal })
+  }, [isAuthenticated, isOwnArtwork, loading, viewerAward, handleMedalAction])
+
+  const closeConfirmation = useCallback(() => {
+    if (loading) return
+    setPendingConfirmation(null)
+  }, [loading])
+
+  const confirmPendingAction = useCallback(async () => {
+    if (!pendingConfirmation || loading) return
+
+    const action = pendingConfirmation
+    setPendingConfirmation(null)
+    await handleMedalAction(action)
+  }, [pendingConfirmation, loading, handleMedalAction])

  return (
-    <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
-      <h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Awards</h2>
+    <>
+      <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Medals</h2>

-      {error && (
-        <p className="mt-2 text-xs text-red-400">{error}</p>
-      )}
+        {errorDetails && (
+          <div className="mt-3 rounded-xl border border-red-400/20 bg-red-500/10 px-4 py-3 text-left">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-red-300/90">{errorDetails.title}</div>
+            <p className="mt-2 text-sm leading-6 text-red-200">{errorDetails.summary}</p>
+            <p className="mt-2 text-xs leading-5 text-red-100/75">{errorDetails.details}</p>
+          </div>
+        )}

-      <div className="mt-4 flex flex-col gap-3 sm:flex-row">
-        {MEDALS.map(({ key, label, emoji }) => {
-          const isActive  = viewerAward === key
-          const isPending = loading === key
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+          {MEDALS.map(({ key, label, emoji }) => {
+            const isActive  = viewerAward === key
+            const isPending = loading === key

-          return (
-            <button
-              key={key}
-              type="button"
-              disabled={!isAuthenticated || loading !== null}
-              onClick={() => handleMedalClick(key)}
-              title={!isAuthenticated ? 'Sign in to award' : isActive ? `Remove ${label} award` : `Award ${label}`}
-              className={[
-                'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
-                isActive
-                  ? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
-                  : 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
-                (!isAuthenticated || loading !== null) && 'cursor-not-allowed opacity-60',
-              ].filter(Boolean).join(' ')}
-            >
-              <span className="text-xl leading-none" aria-hidden="true">
-                {isPending ? '…' : emoji}
-              </span>
-              <span className="text-xs font-medium leading-none">{label}</span>
-              <span className="text-xs text-soft tabular-nums">
-                {awards[key]}
-              </span>
-            </button>
-          )
-        })}
+            return (
+              <button
+                key={key}
+                type="button"
+                disabled={!isAuthenticated || isOwnArtwork || loading !== null}
+                onClick={() => handleMedalClick(key)}
+                title={!isAuthenticated ? 'Sign in to medal' : isOwnArtwork ? 'You cannot medal your own artwork' : isActive ? `Remove ${label} medal` : viewerAward ? `Change medal to ${label}` : `Give ${label} medal`}
+                className={[
+                  'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
+                  isActive
+                    ? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
+                    : 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
+                  (!isAuthenticated || isOwnArtwork || loading !== null) && 'cursor-not-allowed opacity-60',
+                ].filter(Boolean).join(' ')}
+              >
+                <span className="text-xl leading-none" aria-hidden="true">
+                  {isPending ? '…' : emoji}
+                </span>
+                <span className="text-xs font-medium leading-none">{label}</span>
+                <span className="text-xs text-soft tabular-nums">
+                  {awards[key]}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+
+        {awards.score > 0 && (
+          <p className="mt-3 text-right text-xs text-soft">
+            Score: <span className="font-semibold text-white">{awards.score}</span>
+          </p>
+        )}
+
+        {!isAuthenticated && (
+          <p className="mt-3 text-center text-xs text-soft">
+            <a href="/login" className="text-accent hover:underline">Sign in</a> to medal this artwork
+          </p>
+        )}
+
+        {isAuthenticated && isOwnArtwork && (
+          <p className="mt-3 text-center text-xs text-soft">
+            You cannot medal your own artwork.
+          </p>
+        )}
      </div>

-      {awards.score > 0 && (
-        <p className="mt-3 text-right text-xs text-soft">
-          Score: <span className="font-semibold text-white">{awards.score}</span>
-        </p>
-      )}
-
-      {!isAuthenticated && (
-        <p className="mt-3 text-center text-xs text-soft">
-          <a href="/login" className="text-accent hover:underline">Sign in</a> to award this artwork
-        </p>
-      )}
-    </div>
+      <Modal
+        open={Boolean(confirmationContent)}
+        onClose={closeConfirmation}
+        title={confirmationContent?.title}
+        size="sm"
+        variant={confirmationContent?.modalVariant}
+        footer={confirmationContent ? (
+          <div className="ml-auto flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={closeConfirmation} disabled={loading !== null}>
+              Cancel
+            </Button>
+            <Button variant={confirmationContent.confirmVariant} size="sm" onClick={confirmPendingAction} loading={loading !== null}>
+              {confirmationContent.confirmLabel}
+            </Button>
+          </div>
+        ) : null}
+      >
+        {confirmationContent ? (
+          <div className="space-y-3">
+            <p className="text-sm leading-6 text-slate-200">{confirmationContent.summary}</p>
+            <p className="text-xs leading-5 text-slate-400">{confirmationContent.details}</p>
+          </div>
+        ) : null}
+      </Modal>
+    </>
  )
 }
--- a/resources/js/components/artwork/ArtworkAwards.test.jsx
+++ b/resources/js/components/artwork/ArtworkAwards.test.jsx
@@ -0,0 +1,125 @@
+import React from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ArtworkAwards from './ArtworkAwards'
+
+describe('ArtworkAwards medal confirmations', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn())
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.unstubAllGlobals()
+    vi.clearAllMocks()
+  })
+
+  it('asks for confirmation before removing the active medal', async () => {
+    const user = userEvent.setup()
+    const fetchMock = vi.mocked(fetch)
+
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        medals: { gold: 0, silver: 0, bronze: 0, score: 0 },
+        current_user_medal: null,
+      }),
+    })
+
+    render(
+      <ArtworkAwards
+        artwork={{ id: 69461, viewer: { id: 2 }, user: { id: 7 } }}
+        isAuthenticated
+        initialAwards={{ gold: 1, silver: 0, bronze: 0, score: 5, current_user_medal: 'gold' }}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /gold/i }))
+
+    expect(screen.getByRole('dialog', { name: /remove gold medal\?/i })).not.toBeNull()
+    expect(fetchMock).not.toHaveBeenCalled()
+
+    await user.click(screen.getByRole('button', { name: /remove medal/i }))
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1)
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/artworks/69461/medal',
+      expect.objectContaining({
+        method: 'DELETE',
+      }),
+    )
+  })
+
+  it('asks for confirmation before changing an existing medal', async () => {
+    const user = userEvent.setup()
+    const fetchMock = vi.mocked(fetch)
+
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        medals: { gold: 0, silver: 1, bronze: 0, score: 3 },
+        current_user_medal: 'silver',
+      }),
+    })
+
+    render(
+      <ArtworkAwards
+        artwork={{ id: 69461, viewer: { id: 2 }, user: { id: 7 } }}
+        isAuthenticated
+        initialAwards={{ gold: 1, silver: 0, bronze: 0, score: 5, current_user_medal: 'gold' }}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /silver/i }))
+
+    expect(screen.getByRole('dialog', { name: /change medal to silver\?/i })).not.toBeNull()
+    expect(fetchMock).not.toHaveBeenCalled()
+
+    await user.click(screen.getByRole('button', { name: /change to silver/i }))
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1)
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/artworks/69461/medal',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({ medal_type: 'silver' }),
+      }),
+    )
+  })
+
+  it('still awards a new medal immediately when the viewer has not voted yet', async () => {
+    const user = userEvent.setup()
+    const fetchMock = vi.mocked(fetch)
+
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        medals: { gold: 0, silver: 1, bronze: 0, score: 3 },
+        current_user_medal: 'silver',
+      }),
+    })
+
+    render(
+      <ArtworkAwards
+        artwork={{ id: 69461, viewer: { id: 2 }, user: { id: 7 } }}
+        isAuthenticated
+        initialAwards={{ gold: 0, silver: 0, bronze: 0, score: 0, current_user_medal: null }}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /silver/i }))
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1)
+    })
+
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+})
--- a/resources/js/components/artwork/ArtworkCard.jsx
+++ b/resources/js/components/artwork/ArtworkCard.jsx
@@ -469,6 +469,12 @@ export default function ArtworkCard({
  const authorLevel = isGroupPublisher ? 0 : Number(rawAuthor?.level ?? item.author_level ?? item.creator?.level ?? 0)
  const authorRank = isGroupPublisher ? '' : (rawAuthor?.rank || item.author_rank || item.creator?.rank || '')
  const image = item.image || item.thumb || item.thumb_url || item.thumbnail_url || IMAGE_FALLBACK
+  const responsiveImageSrcSet = imageSrcSet || item.thumb_srcset || item.thumbnail_srcset || undefined
+  const responsiveImageSizes = imageSizes || (variant === 'embed'
+    ? '80px'
+    : compact
+      ? '(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 280px'
+      : '(max-width: 640px) 50vw, (max-width: 1024px) 33vw, (max-width: 1536px) 25vw, 320px')
  const avatar = (isGroupPublisher ? publisher?.avatar_url : null)
    || rawAuthor?.avatar_url
    || rawAuthor?.avatar
@@ -503,6 +509,9 @@ export default function ArtworkCard({
    () => formatRelativeTime(item.published_at || item.publishedAt || null),
    [item.published_at, item.publishedAt]
  )
+  const maturity = item.maturity && typeof item.maturity === 'object' ? item.maturity : {}
+  const shouldBlurMature = Boolean(maturity.should_blur)
+  const isMatureArtwork = Boolean(maturity.is_mature_effective)
  const initialLiked = Boolean(item.viewer?.is_liked)
  const [liked, setLiked] = useState(initialLiked)
  const [likeCount, setLikeCount] = useState(Number(likes ?? 0) || 0)
@@ -756,6 +765,10 @@ export default function ArtworkCard({
    return null
  }

+  if (maturity.should_hide) {
+    return null
+  }
+
  if (variant === 'embed') {
    return (
      <article
@@ -772,14 +785,17 @@ export default function ArtworkCard({
          <div className="h-16 w-20 shrink-0 overflow-hidden rounded-lg bg-white/5">
            <img
              src={image}
+              srcSet={responsiveImageSrcSet}
+              sizes={responsiveImageSizes}
              alt={title}
              loading={loading}
              decoding={decoding}
-              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+              className={cx('h-full w-full object-cover transition-transform duration-300 group-hover:scale-105', shouldBlurMature ? 'scale-[1.02] blur-xl' : '')}
              onError={(event) => {
                swapImageToFallbackOnce(event, IMAGE_FALLBACK)
              }}
            />
+            {isMatureArtwork ? <div className="absolute inset-x-2 bottom-2 rounded-lg border border-amber-300/20 bg-black/65 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature content</div> : null}
          </div>

          <div className="min-w-0 flex-1">
@@ -827,15 +843,15 @@ export default function ArtworkCard({

          <img
            src={image}
-            srcSet={imageSrcSet || undefined}
-            sizes={imageSizes || undefined}
+            srcSet={responsiveImageSrcSet}
+            sizes={responsiveImageSizes}
            alt={title}
            width={imageWidth || undefined}
            height={imageHeight || undefined}
            loading={loading}
            decoding={decoding}
            fetchPriority={fetchPriority || undefined}
-            className={cx('h-full w-full object-cover transition duration-500 group-hover:scale-110 group-focus-within:scale-110', imageClassName)}
+            className={cx('h-full w-full object-cover transition duration-500 group-hover:scale-110 group-focus-within:scale-110', shouldBlurMature ? 'scale-[1.02] blur-xl' : '', imageClassName)}
            onError={(event) => {
              swapImageToFallbackOnce(event, IMAGE_FALLBACK, { clearResponsive: true })
            }}
@@ -851,6 +867,11 @@ export default function ArtworkCard({
                    {resolvedMetricBadge.label}
                  </BadgePill>
                ) : null}
+                {isMatureArtwork ? (
+                  <BadgePill className="mt-2 bg-amber-500/16 text-amber-100 ring-amber-300/30" iconClass="fa-solid fa-triangle-exclamation text-[10px]">
+                    Mature content
+                  </BadgePill>
+                ) : null}
              </div>

              {relativePublishedAt ? (
@@ -893,6 +914,7 @@ export default function ArtworkCard({
          )}

          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100">
+              {shouldBlurMature ? <div className="mb-2 inline-flex rounded-full border border-amber-300/20 bg-black/55 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your content settings</div> : null}
              <h3 className={cx('truncate font-semibold text-white', titleClass)}>
                {title}
              </h3>
--- a/resources/js/components/artwork/ArtworkEvolutionPanel.jsx
+++ b/resources/js/components/artwork/ArtworkEvolutionPanel.jsx
@@ -0,0 +1,240 @@
+import React, { useState } from 'react'
+import Modal from '../ui/Modal'
+
+function EvolutionArtworkCard({ card }) {
+  if (!card) return null
+
+  const shouldBlur = Boolean(card?.maturity?.should_blur)
+
+  return (
+    <a
+      href={card.url}
+      className="group block overflow-hidden rounded-[26px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03))] transition hover:border-white/20 hover:bg-white/[0.07]"
+    >
+      <div className="relative aspect-[1.08/1] overflow-hidden bg-slate-950">
+        {card.thumbnail ? (
+          <img
+            src={card.thumbnail}
+            alt={card.title}
+            className={`h-full w-full object-cover transition duration-500 group-hover:scale-[1.03] ${shouldBlur ? 'scale-[1.03] blur-xl' : ''}`}
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center text-slate-600">
+            <i className="fa-solid fa-image text-3xl" />
+          </div>
+        )}
+
+        <div className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/45 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-white backdrop-blur-md">
+          <span className="h-1.5 w-1.5 rounded-full bg-sky-300" />
+          {card.role_label}
+        </div>
+
+        {shouldBlur ? (
+          <div className="absolute inset-x-0 bottom-0 bg-[linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,0.9))] px-4 py-4 text-sm text-white/85">
+            Mature artwork preview is softened for your current viewer settings.
+          </div>
+        ) : null}
+      </div>
+
+      <div className="space-y-2 px-4 py-4 sm:px-5">
+        <div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+          {card.content_type ? <span>{card.content_type}</span> : null}
+          {card.category ? <span className="text-slate-500">{card.category}</span> : null}
+        </div>
+        <h3 className="text-lg font-semibold tracking-[-0.02em] text-white">{card.title}</h3>
+        <div className="flex flex-wrap items-center gap-2 text-sm text-slate-300">
+          <span>{card.publisher}</span>
+          {card.year ? <span className="text-slate-500">{card.year}</span> : null}
+        </div>
+      </div>
+    </a>
+  )
+}
+
+function ComparisonModal({ item, open, onClose }) {
+  if (!item) return null
+
+  return (
+    <Modal open={open} onClose={onClose} title={item.compare?.title || 'Compare versions'} size="full">
+      <div className="space-y-6">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">{item.heading}</div>
+            <h3 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">{item.relation_label}</h3>
+            <p className="mt-2 max-w-3xl text-sm leading-7 text-slate-300">{item.summary}</p>
+          </div>
+          {item.years_apart_label ? (
+            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm text-slate-200">
+              <i className="fa-regular fa-clock" aria-hidden="true" />
+              {item.years_apart_label}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="grid gap-5 lg:grid-cols-2">
+          {[item.before, item.after].map((card) => (
+            <div key={`${item.id}-${card.id}`} className="overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.03]">
+              <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
+                <div>
+                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">{card.role_label}</div>
+                  <div className="mt-1 text-base font-semibold text-white">{card.title}</div>
+                </div>
+                <a href={card.url} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2 text-sm font-medium text-white transition hover:bg-white/[0.08]">
+                  Open
+                  <i className="fa-solid fa-arrow-up-right-from-square text-slate-500" aria-hidden="true" />
+                </a>
+              </div>
+
+              <div className="relative aspect-[4/3] overflow-hidden bg-slate-950">
+                {card.image_lg ? (
+                  <img
+                    src={card.image_lg}
+                    alt={card.title}
+                    className={`h-full w-full object-cover ${card?.maturity?.should_blur ? 'scale-[1.03] blur-xl' : ''}`}
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center text-slate-600">
+                    <i className="fa-solid fa-image text-4xl" />
+                  </div>
+                )}
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2 px-5 py-4 text-sm text-slate-300">
+                <span>{card.publisher}</span>
+                {card.year ? <span className="text-slate-500">{card.year}</span> : null}
+                {card.category ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{card.category}</span> : null}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {item.note ? (
+          <div className="rounded-[26px] border border-sky-300/20 bg-sky-300/10 px-5 py-4 text-sm leading-7 text-sky-50">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-sky-100/80">Creator note</div>
+            <p className="mt-2 whitespace-pre-wrap">{item.note}</p>
+          </div>
+        ) : null}
+      </div>
+    </Modal>
+  )
+}
+
+function EvolutionStoryBlock({ item, onCompare }) {
+  if (!item) return null
+
+  return (
+    <section className="overflow-hidden rounded-[30px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.025))] p-5 shadow-[0_22px_55px_rgba(2,6,23,0.26)] backdrop-blur-xl sm:p-6">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="max-w-2xl">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">{item.heading}</div>
+          <h2 className="mt-2 text-[28px] font-semibold tracking-[-0.04em] text-white">{item.relation_label}</h2>
+          <p className="mt-2 text-sm leading-7 text-slate-200/90">{item.summary}</p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+          {item.years_apart_label ? (
+            <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-slate-200">
+              <i className="fa-regular fa-clock" aria-hidden="true" />
+              {item.years_apart_label}
+            </span>
+          ) : null}
+          {item.compare?.available ? (
+            <button
+              type="button"
+              onClick={() => onCompare(item)}
+              className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-300/12 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-300/18"
+            >
+              <i className="fa-solid fa-up-right-and-down-left-from-center" aria-hidden="true" />
+              Compare side by side
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="mt-5 grid gap-4 lg:grid-cols-2">
+        <EvolutionArtworkCard card={item.before} />
+        <EvolutionArtworkCard card={item.after} />
+      </div>
+
+      {item.note ? (
+        <div className="mt-5 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 text-sm leading-7 text-slate-200/90">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Creator note</div>
+          <p className="mt-2 whitespace-pre-wrap">{item.note}</p>
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+function EvolutionUpdates({ updates, onCompare }) {
+  if (!updates?.length) return null
+
+  return (
+    <section className="rounded-[30px] border border-white/[0.08] bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-5 shadow-[0_22px_55px_rgba(0,0,0,0.18)] backdrop-blur-xl sm:p-6">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/55">Updated Versions</div>
+          <h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">This piece has later evolutions</h2>
+        </div>
+        <div className="text-sm text-slate-400">Follow how the creator revisited the idea over time.</div>
+      </div>
+
+      <div className="mt-5 space-y-4">
+        {updates.map((item) => (
+          <article key={item.id} className="rounded-[26px] border border-white/10 bg-white/[0.03] p-4 sm:p-5">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+              <div className="max-w-2xl">
+                <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">{item.heading}</div>
+                <h3 className="mt-2 text-xl font-semibold tracking-[-0.02em] text-white">{item.after?.title}</h3>
+                <p className="mt-2 text-sm leading-7 text-slate-300">{item.summary}</p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {item.years_apart_label ? (
+                  <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-slate-200">
+                    <i className="fa-regular fa-clock" aria-hidden="true" />
+                    {item.years_apart_label}
+                  </span>
+                ) : null}
+                {item.compare?.available ? (
+                  <button
+                    type="button"
+                    onClick={() => onCompare(item)}
+                    className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
+                  >
+                    Compare
+                  </button>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="mt-4 grid gap-4 lg:grid-cols-2">
+              <EvolutionArtworkCard card={item.before} />
+              <EvolutionArtworkCard card={item.after} />
+            </div>
+
+            {item.note ? <p className="mt-4 text-sm leading-7 text-slate-300">{item.note}</p> : null}
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default function ArtworkEvolutionPanel({ evolution }) {
+  const [compareItem, setCompareItem] = useState(null)
+
+  if (!evolution?.primary && !evolution?.updates?.length) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="space-y-5">
+        {evolution.primary ? <EvolutionStoryBlock item={evolution.primary} onCompare={setCompareItem} /> : null}
+        {evolution.updates?.length ? <EvolutionUpdates updates={evolution.updates} onCompare={setCompareItem} /> : null}
+      </div>
+
+      <ComparisonModal item={compareItem} open={Boolean(compareItem)} onClose={() => setCompareItem(null)} />
+    </>
+  )
+}
--- a/resources/js/components/artwork/ArtworkEvolutionSearchPicker.jsx
+++ b/resources/js/components/artwork/ArtworkEvolutionSearchPicker.jsx
@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react'
+
+function SelectedArtworkCard({ artwork, onClear, disabled = false }) {
+  if (!artwork) return null
+
+  return (
+    <div className="rounded-[26px] border border-sky-300/20 bg-sky-400/[0.08] p-4">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex min-w-0 items-center gap-4">
+          {artwork.thumbnail ? (
+            <img src={artwork.thumbnail} alt={artwork.title} className="h-20 w-20 rounded-[22px] object-cover ring-1 ring-white/10" />
+          ) : (
+            <div className="flex h-20 w-20 items-center justify-center rounded-[22px] border border-white/10 bg-white/[0.04] text-slate-500">
+              <i className="fa-solid fa-image" />
+            </div>
+          )}
+          <div className="min-w-0">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Linked original</div>
+            <div className="mt-2 truncate text-lg font-semibold text-white">{artwork.title}</div>
+            <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-300">
+              <span>{artwork.publisher || 'Artist'}</span>
+              {artwork.year ? <span className="text-slate-500">{artwork.year}</span> : null}
+              {artwork.content_type ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{artwork.content_type}</span> : null}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {artwork.url ? (
+            <a
+              href={artwork.url}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
+            >
+              Open public
+              <i className="fa-solid fa-arrow-up-right-from-square text-slate-500" />
+            </a>
+          ) : null}
+          <button
+            type="button"
+            onClick={onClear}
+            disabled={disabled}
+            className="inline-flex items-center gap-2 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <i className="fa-solid fa-link-slash" />
+            Remove link
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function ArtworkEvolutionSearchPicker({ artworkId, selected, onSelect, disabled = false }) {
+  const [query, setQuery] = useState('')
+  const [options, setOptions] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!artworkId) return undefined
+
+    const controller = new AbortController()
+    const handle = window.setTimeout(async () => {
+      setLoading(true)
+      try {
+        const response = await fetch(`/api/studio/artworks/${artworkId}/evolution-options?search=${encodeURIComponent(query)}`, {
+          headers: { Accept: 'application/json' },
+          credentials: 'same-origin',
+          signal: controller.signal,
+        })
+
+        if (!response.ok) {
+          setOptions([])
+          return
+        }
+
+        const data = await response.json()
+        setOptions(Array.isArray(data.data) ? data.data : [])
+      } catch (error) {
+        if (error?.name !== 'AbortError') {
+          setOptions([])
+        }
+      } finally {
+        setLoading(false)
+      }
+    }, query.trim() === '' ? 0 : 220)
+
+    return () => {
+      controller.abort()
+      window.clearTimeout(handle)
+    }
+  }, [artworkId, query])
+
+  const visibleOptions = options.filter((option) => Number(option.id) !== Number(selected?.id))
+
+  return (
+    <div className="space-y-4">
+      <SelectedArtworkCard artwork={selected} onClear={() => onSelect(null)} disabled={disabled} />
+
+      <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-4">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-end">
+          <div className="min-w-0 flex-1">
+            <label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Search your manageable artworks</label>
+            <input
+              type="text"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search by title, slug, creator, or group"
+              disabled={disabled}
+              className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 disabled:cursor-not-allowed disabled:opacity-60"
+            />
+          </div>
+          <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
+            {loading ? 'Searching…' : `${visibleOptions.length} result${visibleOptions.length === 1 ? '' : 's'}`}
+          </div>
+        </div>
+
+        <p className="mt-3 text-sm leading-relaxed text-slate-400">
+          Start with your own published artworks. Group-published pieces appear too when you can publish artworks for that group. Results are ranked by visual similarity when the vector index is available.
+        </p>
+
+        <div className="mt-4 space-y-3">
+          {visibleOptions.length ? visibleOptions.map((option) => (
+            <button
+              key={option.id}
+              type="button"
+              onClick={() => onSelect(option)}
+              disabled={disabled}
+              className="flex w-full flex-col gap-4 rounded-[24px] border border-white/10 bg-white/[0.04] p-4 text-left transition hover:border-white/20 hover:bg-white/[0.06] disabled:cursor-not-allowed disabled:opacity-60 md:flex-row md:items-center md:justify-between"
+            >
+              <div className="flex min-w-0 items-center gap-4">
+                {option.thumbnail ? (
+                  <img src={option.thumbnail} alt={option.title} className="h-16 w-16 rounded-[18px] object-cover ring-1 ring-white/10" />
+                ) : (
+                  <div className="flex h-16 w-16 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.05] text-slate-500">
+                    <i className="fa-solid fa-image" />
+                  </div>
+                )}
+                <div className="min-w-0">
+                  <div className="truncate text-base font-semibold text-white">{option.title}</div>
+                  <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-400">
+                    <span>{option.publisher || 'Artist'}</span>
+                    {option.year ? <span>{option.year}</span> : null}
+                    {option.category ? <span>{option.category}</span> : null}
+                    {typeof option.similarity_score === 'number' ? (
+                      <span className="rounded-full border border-emerald-300/20 bg-emerald-400/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">
+                        {Math.round(option.similarity_score * 100)}% similar
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+              <span className="inline-flex items-center gap-2 self-start rounded-2xl border border-sky-300/25 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 md:self-center">
+                <i className="fa-solid fa-link" />
+                Link older version
+              </span>
+            </button>
+          )) : (
+            <div className="rounded-[24px] border border-dashed border-white/12 bg-white/[0.02] px-5 py-10 text-center text-sm text-slate-300">
+              {loading ? 'Searching artworks…' : 'No manageable published artworks matched this search yet.'}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/resources/js/components/artwork/ArtworkGallery.jsx
+++ b/resources/js/components/artwork/ArtworkGallery.jsx
@@ -124,7 +124,7 @@ export default function ArtworkGallery({
  const [dismissedEntries, setDismissedEntries] = useState([])
  const [dismissNotice, setDismissNotice] = useState(null)
  const visibleArtworkItems = useMemo(
-    () => visibleItems.filter((item) => !dismissedEntries.some((entry) => entry.item?.id === item?.id)),
+    () => visibleItems.filter((item) => !item?.maturity?.should_hide && !dismissedEntries.some((entry) => entry.item?.id === item?.id)),
    [dismissedEntries, visibleItems]
  )
  const baseClassName = layout === 'masonry'
--- a/resources/js/components/artwork/ArtworkRecommendationsRails.jsx
+++ b/resources/js/components/artwork/ArtworkRecommendationsRails.jsx
@@ -15,6 +15,7 @@ function normalizeRelated(item) {
    url: item.url,
    thumb: item.thumb || null,
    thumbSrcSet: item.thumb_srcset || null,
+    maturity: item.maturity || null,
  }
 }

@@ -28,6 +29,7 @@ function normalizeSimilar(item) {
    url: item.url,
    thumb: item.thumb || null,
    thumbSrcSet: item.thumb_srcset || null,
+    maturity: item.maturity || null,
  }
 }

@@ -42,12 +44,14 @@ function normalizeRankItem(item) {
    url,
    thumb: item.thumbnail_url || item.thumb || null,
    thumbSrcSet: null,
+    maturity: item.maturity || null,
  }
 }

 function dedupeByUrl(items) {
  const seen = new Set()
  return items.filter((item) => {
+    if (item?.maturity?.should_hide) return false
    if (!item?.url || seen.has(item.url)) return false
    seen.add(item.url)
    return true
@@ -57,6 +61,9 @@ function dedupeByUrl(items) {
 /* ── Large art card (matches homepage style) ─────────────────── */

 function RailCard({ item }) {
+  const shouldBlur = Boolean(item?.maturity?.should_blur)
+  const isMature = Boolean(item?.maturity?.is_mature_effective)
+
  return (
    <article className="w-[240px] shrink-0 snap-start sm:w-[220px] lg:w-[200px] xl:w-[210px] 2xl:w-[220px]">
      <a
@@ -72,11 +79,13 @@ function RailCard({ item }) {
            srcSet={item.thumbSrcSet || undefined}
            sizes="220px"
            alt={item.title || 'Artwork'}
-            className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
+            className={`h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04] ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
            loading="lazy"
            decoding="async"
            onError={(e) => { e.currentTarget.src = FALLBACK }}
          />
+          {isMature ? <div className="absolute left-3 top-3 z-20 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</div> : null}
+          {shouldBlur ? <div className="absolute inset-x-3 bottom-3 z-20 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">Blurred by your settings</div> : null}

          {/* Bottom info overlay */}
          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
--- a/resources/js/components/artwork/ArtworkShareButton.jsx
+++ b/resources/js/components/artwork/ArtworkShareButton.jsx
@@ -34,12 +34,21 @@ export default function ArtworkShareButton({ artwork, shareUrl, size = 'default'

  const { share } = useWebShare({ onFallback: openModal })

-  const handleClick = () => {
-    share({
+  const handleClick = async () => {
+    const result = await share({
      title: artwork?.title || 'Artwork',
      text: artwork?.description?.substring(0, 120) || '',
      url: shareUrl || artwork?.canonical_url || window.location.href,
    })
+    if (result?.shared && result?.native && artwork?.id) {
+      const csrfToken = document.head.querySelector('meta[name="csrf-token"]')?.content
+      fetch(`/api/artworks/${artwork.id}/share`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken || '' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ platform: 'native' }),
+      }).catch(() => {})
+    }
  }

  const isSmall = size === 'small'
--- a/resources/js/components/comments/EmojiPickerButton.jsx
+++ b/resources/js/components/comments/EmojiPickerButton.jsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import EmojiMartPicker from '../common/EmojiMartPicker'
+import extractNativeEmoji from '../common/extractNativeEmoji'
+import isEventWithinNode from '../common/isEventWithinNode'
 import loadEmojiMartData from '../common/loadEmojiMartData'

 /**
@@ -38,7 +40,7 @@ export default function EmojiPickerButton({ onEmojiSelect, disabled = false, cla
    if (!open) return

    function handleClick(e) {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
+      if (!isEventWithinNode(e, wrapRef.current)) {
        setOpen(false)
      }
    }
@@ -61,7 +63,10 @@ export default function EmojiPickerButton({ onEmojiSelect, disabled = false, cla

  const handleSelect = useCallback(
    (emoji) => {
-      onEmojiSelect?.(emoji.native)
+      const nativeEmoji = extractNativeEmoji(emoji)
+      if (nativeEmoji) {
+        onEmojiSelect?.(nativeEmoji)
+      }
      setOpen(false)
    },
    [onEmojiSelect],
--- a/resources/js/components/comments/ReactionBar.jsx
+++ b/resources/js/components/comments/ReactionBar.jsx
@@ -152,16 +152,25 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
        <button
          type="button"
          onClick={() => {
+            if (isArtworkVariant) {
+              setPickerOpen((value) => !value)
+              return
+            }
+
            if (myReaction) {
-              // Quick-toggle: remove own reaction
              toggle(myReaction)
            } else {
-              // Quick-like with thumbs_up
              toggle('thumbs_up')
            }
          }}
          className={triggerClassName}
-          aria-label={myReaction ? `You reacted with ${myReactionData?.label}. Click to remove.` : 'React to this comment'}
+          aria-label={isArtworkVariant
+            ? (myReaction
+              ? `Open reaction picker. Current reaction: ${myReactionData?.label}.`
+              : 'Open reaction picker for this artwork')
+            : (myReaction
+              ? `You reacted with ${myReactionData?.label}. Click to remove.`
+              : 'React to this comment')}
        >
          {myReaction ? (
            <span className={isArtworkVariant ? 'text-xl leading-none' : 'text-base leading-none'}>{myReactionData?.emoji}</span>
--- a/resources/js/components/common/EmojiMartPicker.jsx
+++ b/resources/js/components/common/EmojiMartPicker.jsx
@@ -1,39 +1,18 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useCallback } from 'react'

-let emojiMartRegistrationPromise = null
+let emojiMartPromise = null

-function ensureEmojiMartRegistered() {
-  if (!emojiMartRegistrationPromise) {
-    emojiMartRegistrationPromise = import('emoji-mart')
+function ensureEmojiMart() {
+  if (!emojiMartPromise) {
+    emojiMartPromise = import('emoji-mart')
  }
-
-  return emojiMartRegistrationPromise
-}
-
-function applyPickerProps(element, props) {
-  if (!element) {
-    return
-  }
-
-  element.data = props.data
-  element.onEmojiSelect = props.onEmojiSelect
-  element.theme = props.theme
-  element.previewPosition = props.previewPosition
-  element.skinTonePosition = props.skinTonePosition
-  element.maxFrequentRows = props.maxFrequentRows
-  element.perLine = props.perLine
-  element.navPosition = props.navPosition
-  element.set = props.set
-  element.locale = props.locale
-  element.autoFocus = props.autoFocus
-  element.searchPosition = props.searchPosition
-  element.dynamicWidth = props.dynamicWidth
-  element.noCountryFlags = props.noCountryFlags
+  return emojiMartPromise
 }

 export default function EmojiMartPicker({
  data,
  onEmojiSelect,
+  onClickOutside,
  theme = 'auto',
  previewPosition = 'bottom',
  skinTonePosition = 'preview',
@@ -51,56 +30,66 @@ export default function EmojiMartPicker({
  const hostRef = useRef(null)
  const pickerRef = useRef(null)

+  // Keep refs pointing at the latest callback props so stable wrappers
+  // never capture a stale closure.
+  const onEmojiSelectRef = useRef(onEmojiSelect)
+  const onClickOutsideRef = useRef(onClickOutside)
+  onEmojiSelectRef.current = onEmojiSelect
+  onClickOutsideRef.current = onClickOutside
+
+  // Stable wrappers with fixed identity — safe to pass once to the Picker
+  // constructor without needing to re-initialise the element on every render.
+  const stableOnEmojiSelect = useCallback((emoji) => {
+    onEmojiSelectRef.current?.(emoji)
+  }, [])
+
+  const stableOnClickOutside = useCallback((e) => {
+    onClickOutsideRef.current?.(e)
+  }, [])
+
  useEffect(() => {
    let cancelled = false

-    ensureEmojiMartRegistered().then(() => {
-      if (cancelled || !hostRef.current) {
-        return
-      }
+    // emoji-mart's Picker stores callbacks in `this.props` during construction.
+    // connectedCallback reads from `this.props`, NOT from plain element
+    // properties set after construction, so we MUST use `new Picker(props)`
+    // rather than `document.createElement('em-emoji-picker')` + property
+    // assignment, which would leave onEmojiSelect as null internally.
+    ensureEmojiMart().then(({ Picker }) => {
+      if (cancelled || !hostRef.current) return

      if (!pickerRef.current) {
-        pickerRef.current = document.createElement('em-emoji-picker')
-        hostRef.current.replaceChildren(pickerRef.current)
-      }
+        const pickerProps = {
+          data,
+          onEmojiSelect: stableOnEmojiSelect,
+          onClickOutside: stableOnClickOutside,
+          theme,
+          previewPosition,
+          skinTonePosition,
+          maxFrequentRows,
+          perLine,
+          navPosition,
+          set,
+          locale,
+          autoFocus,
+        }
+        if (searchPosition !== undefined) pickerProps.searchPosition = searchPosition
+        if (dynamicWidth !== undefined) pickerProps.dynamicWidth = dynamicWidth
+        if (noCountryFlags !== undefined) pickerProps.noCountryFlags = noCountryFlags

-      applyPickerProps(pickerRef.current, {
-        data,
-        onEmojiSelect,
-        theme,
-        previewPosition,
-        skinTonePosition,
-        maxFrequentRows,
-        perLine,
-        navPosition,
-        set,
-        locale,
-        autoFocus,
-        searchPosition,
-        dynamicWidth,
-        noCountryFlags,
-      })
+        const el = new Picker(pickerProps)
+        pickerRef.current = el
+        hostRef.current.replaceChildren(el)
+      }
    })

    return () => {
      cancelled = true
    }
-  }, [
-    data,
-    onEmojiSelect,
-    theme,
-    previewPosition,
-    skinTonePosition,
-    maxFrequentRows,
-    perLine,
-    navPosition,
-    set,
-    locale,
-    autoFocus,
-    searchPosition,
-    dynamicWidth,
-    noCountryFlags,
-  ])
+  // Run once on mount. Callbacks stay fresh via refs; static display options
+  // (theme, perLine, etc.) don't change during a single picker session.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])

  useEffect(() => {
    return () => {
--- a/resources/js/components/common/extractNativeEmoji.js
+++ b/resources/js/components/common/extractNativeEmoji.js
@@ -0,0 +1,19 @@
+export default function extractNativeEmoji(selection) {
+  if (typeof selection === 'string') {
+    return selection
+  }
+
+  const detail = selection?.detail ?? null
+
+  return (
+    selection?.native
+    ?? selection?.emoji
+    ?? selection?.unicode
+    ?? selection?.skins?.[0]?.native
+    ?? detail?.native
+    ?? detail?.emoji
+    ?? detail?.unicode
+    ?? detail?.skins?.[0]?.native
+    ?? ''
+  )
+}
--- a/resources/js/components/common/isEventWithinNode.js
+++ b/resources/js/components/common/isEventWithinNode.js
@@ -0,0 +1,11 @@
+export default function isEventWithinNode(event, node) {
+  if (!event || !node) {
+    return false
+  }
+
+  if (typeof event.composedPath === 'function') {
+    return event.composedPath().includes(node)
+  }
+
+  return node.contains(event.target)
+}
--- a/resources/js/components/forum/EmojiPicker.jsx
+++ b/resources/js/components/forum/EmojiPicker.jsx
@@ -1,6 +1,8 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import EmojiMartPicker from '../common/EmojiMartPicker'
+import extractNativeEmoji from '../common/extractNativeEmoji'
+import isEventWithinNode from '../common/isEventWithinNode'
 import loadEmojiMartData from '../common/loadEmojiMartData'

 /**
@@ -58,8 +60,7 @@ export default function EmojiPicker({ onSelect, editor }) {
  useEffect(() => {
    if (!open) return
    const handler = (e) => {
-      if (panelRef.current && !panelRef.current.contains(e.target) &&
-          buttonRef.current && !buttonRef.current.contains(e.target)) {
+      if (!isEventWithinNode(e, panelRef.current) && !isEventWithinNode(e, buttonRef.current)) {
        setOpen(false)
      }
    }
@@ -76,7 +77,12 @@ export default function EmojiPicker({ onSelect, editor }) {
  }, [open])

  const handleSelect = useCallback((emoji) => {
-    const native = emoji.native ?? ''
+    const native = extractNativeEmoji(emoji)
+    if (!native) {
+      setOpen(false)
+      return
+    }
+
    onSelect?.(native)
    if (editor) {
      editor.chain().focus().insertContent(native).run()
--- a/resources/js/components/groups/GroupDiscoveryCard.jsx
+++ b/resources/js/components/groups/GroupDiscoveryCard.jsx
@@ -18,7 +18,7 @@ export default function GroupDiscoveryCard({ group, className = '', compact = fa
      <div className="flex items-start gap-4">
        <div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
          {group.avatar_url ? (
-            <img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" loading="lazy" />
+            <img src={group.avatar_url} alt="" className="h-full w-full object-cover" loading="lazy" />
          ) : (
            <i className="fa-solid fa-people-group text-slate-300" />
          )}
--- a/resources/js/components/groups/GroupPromoCard.jsx
+++ b/resources/js/components/groups/GroupPromoCard.jsx
@@ -33,7 +33,7 @@ export default function GroupPromoCard({ group, eyebrow = 'Groups spotlight', ti
        <div className="rounded-[28px] border border-white/10 bg-black/25 p-5 backdrop-blur-sm">
          <div className="flex items-center gap-4">
            <div className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
-              {group.avatar_url ? <img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
+                {group.avatar_url ? <img src={group.avatar_url} alt="" className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
            </div>
            <div className="min-w-0">
              <div className="truncate text-lg font-semibold text-white">{group.name}</div>
--- a/resources/js/components/profile/CreatorJourneySection.jsx
+++ b/resources/js/components/profile/CreatorJourneySection.jsx
@@ -0,0 +1,477 @@
+import React from 'react'
+
+function formatDate(value) {
+  if (!value) return null
+
+  try {
+    return new Intl.DateTimeFormat('en', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(new Date(value))
+  } catch {
+    return null
+  }
+}
+
+function formatYear(value) {
+  if (!value) return null
+  try {
+    return new Intl.DateTimeFormat('en', { year: 'numeric' }).format(new Date(value))
+  } catch {
+    return null
+  }
+}
+
+function iconForType(type) {
+  switch (type) {
+    case 'first_upload':
+      return 'fa-solid fa-seedling'
+    case 'first_featured_artwork':
+      return 'fa-solid fa-star'
+    case 'first_group_release':
+      return 'fa-solid fa-people-group'
+    case 'biggest_download_spike':
+      return 'fa-solid fa-bolt'
+    case 'best_performing_work':
+      return 'fa-solid fa-trophy'
+    case 'most_productive_year':
+      return 'fa-solid fa-calendar-check'
+    case 'yearly_recap':
+      return 'fa-solid fa-chart-column'
+    // v2
+    case 'comeback_minor':
+      return 'fa-solid fa-rotate-right'
+    case 'comeback_major':
+      return 'fa-solid fa-person-walking-arrow-right'
+    case 'comeback_legendary':
+      return 'fa-solid fa-fire-flame-curved'
+    case 'upload_streak_3':
+    case 'upload_streak_6':
+    case 'upload_streak_12':
+      return 'fa-solid fa-fire'
+    case 'active_year_streak_3':
+    case 'active_year_streak_5':
+      return 'fa-solid fa-calendar-days'
+    case 'before_now':
+      return 'fa-solid fa-arrows-rotate'
+    case 'era_started':
+      return 'fa-solid fa-flag'
+    default:
+      return 'fa-solid fa-sparkles'
+  }
+}
+
+function milestoneHref(item) {
+  return item?.artwork?.url || item?.release?.url || null
+}
+
+function StatPill({ label, value }) {
+  if (value === null || value === undefined || value === '') return null
+
+  return (
+    <div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2.5">
+      <div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-sky-200/60">{label}</div>
+      <div className="mt-1 text-sm font-semibold text-white">{value}</div>
+    </div>
+  )
+}
+
+function EmptyJourneyState({ username, memberSinceYear, yearsOnSkinbase }) {
+  return (
+    <div className="rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-200">
+          <i className="fa-solid fa-route text-lg" />
+        </div>
+        <div>
+          <div className="text-lg font-semibold text-white">Creator Journey is just getting started</div>
+          <div className="mt-1 text-sm text-slate-400">
+            Public milestones will appear here as @{username} builds more history on Skinbase.
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <StatPill label="Member since" value={memberSinceYear || 'Unknown'} />
+        <StatPill label="Years on Skinbase" value={yearsOnSkinbase ?? 0} />
+        <StatPill label="Milestones saved" value="0" />
+      </div>
+    </div>
+  )
+}
+
+// ── v2: Era strip ─────────────────────────────────────────────────────────────
+
+const ERA_COLORS = {
+  early_years:  { bg: 'bg-slate-800/60',   border: 'border-slate-600/40',   text: 'text-slate-300',   icon: 'fa-solid fa-seedling',          dot: 'bg-slate-400' },
+  breakthrough: { bg: 'bg-amber-900/30',   border: 'border-amber-600/30',   text: 'text-amber-200',   icon: 'fa-solid fa-star',              dot: 'bg-amber-400' },
+  experimental: { bg: 'bg-violet-900/30',  border: 'border-violet-600/30',  text: 'text-violet-200',  icon: 'fa-solid fa-flask',             dot: 'bg-violet-400' },
+  comeback:     { bg: 'bg-emerald-900/30', border: 'border-emerald-600/30', text: 'text-emerald-200', icon: 'fa-solid fa-rotate-right',      dot: 'bg-emerald-400' },
+  current:      { bg: 'bg-sky-900/30',     border: 'border-sky-600/30',     text: 'text-sky-200',     icon: 'fa-solid fa-bolt',             dot: 'bg-sky-400' },
+}
+
+function EraStrip({ eras }) {
+  if (!eras?.length) return null
+
+  return (
+    <div className="mt-7">
+      <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-3">Creator Eras</div>
+      <div className="flex flex-wrap gap-3">
+        {eras.map((era, i) => {
+          const style = ERA_COLORS[era.type] ?? ERA_COLORS.current
+          return (
+            <div
+              key={i}
+              className={`flex items-start gap-3 rounded-2xl border ${style.border} ${style.bg} px-4 py-3 min-w-[180px] max-w-xs flex-1`}
+            >
+              <div className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-white/5 ${style.text}`}>
+                <i className={style.icon} />
+              </div>
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className={`text-sm font-semibold ${style.text}`}>{era.title}</span>
+                  {era.is_current && (
+                    <span className="rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-slate-300">
+                      Now
+                    </span>
+                  )}
+                </div>
+                <div className="mt-0.5 text-[11px] text-slate-500">
+                  {formatYear(era.starts_at)}
+                  {era.ends_at ? ` – ${formatYear(era.ends_at)}` : era.is_current ? ' – present' : ''}
+                </div>
+                {era.description && (
+                  <p className="mt-1.5 text-[11px] leading-relaxed text-slate-400 line-clamp-2">{era.description}</p>
+                )}
+                {(era.stats?.uploads_count ?? 0) > 0 && (
+                  <div className="mt-2 text-[10px] text-slate-500">
+                    {era.stats.uploads_count} upload{era.stats.uploads_count !== 1 ? 's' : ''}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ── v2: Streaks ──────────────────────────────────────────────────────────────
+
+function StreakBadge({ label, value, active = false }) {
+  if (!value) return null
+  return (
+    <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 ${active ? 'border-orange-500/30 bg-orange-900/20' : 'border-white/10 bg-white/[0.03]'}`}>
+      <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${active ? 'bg-orange-500/15 text-orange-300' : 'bg-white/5 text-slate-400'}`}>
+        <i className={`fa-solid fa-fire${active ? '' : ''}`} />
+      </div>
+      <div>
+        <div className={`text-base font-bold tabular-nums ${active ? 'text-orange-200' : 'text-white'}`}>{value}</div>
+        <div className="text-[11px] text-slate-500">{label}</div>
+      </div>
+    </div>
+  )
+}
+
+function StreaksSection({ streaks }) {
+  if (!streaks) return null
+  const { current_monthly_upload_streak, best_monthly_upload_streak, current_active_year_streak, best_active_year_streak } = streaks
+  const hasAny = current_monthly_upload_streak > 0 || best_monthly_upload_streak > 0 || best_active_year_streak > 0
+
+  if (!hasAny) return null
+
+  return (
+    <div className="mt-7">
+      <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-3">Creative Streaks</div>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {current_monthly_upload_streak > 0 && (
+          <StreakBadge label="Current monthly streak" value={`${current_monthly_upload_streak}mo`} active />
+        )}
+        {best_monthly_upload_streak > 0 && (
+          <StreakBadge label="Best monthly streak" value={`${best_monthly_upload_streak}mo`} />
+        )}
+        {current_active_year_streak > 0 && (
+          <StreakBadge label="Active year streak" value={`${current_active_year_streak}yr`} active={current_active_year_streak >= 3} />
+        )}
+        {best_active_year_streak > 0 && (
+          <StreakBadge label="Best year streak" value={`${best_active_year_streak}yr`} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ── v2: Growth & Evolution ───────────────────────────────────────────────────
+
+const RELATION_LABELS = {
+  remake_of:           'Remake',
+  remaster_of:         'Remaster',
+  revision_of:         'Revision',
+  inspired_by:         'Inspired by own work',
+  variation_of:        'Variation',
+}
+
+function EvolutionSection({ evolution }) {
+  if (!evolution?.length) return null
+
+  return (
+    <div className="mt-7 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+      <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Growth &amp; Evolution</div>
+      <div className="mt-1 text-lg font-semibold text-white">Then &amp; Now</div>
+
+      <div className="mt-5 space-y-5">
+        {evolution.map((item) => (
+          <div key={item.id} className="grid gap-3 sm:grid-cols-[1fr_auto_1fr]">
+            {/* Original */}
+            <a
+              href={item.target_artwork?.url}
+              className="group flex items-start gap-3 rounded-2xl border border-white/8 bg-white/[0.03] p-3 transition-colors hover:border-white/20 hover:bg-white/[0.06]"
+            >
+              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/5 text-slate-500 group-hover:text-slate-300">
+                <i className="fa-solid fa-image" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-600">Original</div>
+                <div className="mt-0.5 truncate text-sm font-medium text-slate-300 group-hover:text-white">{item.target_artwork?.title}</div>
+                <div className="text-[10px] text-slate-600">{formatYear(item.target_artwork?.published_at)}</div>
+              </div>
+            </a>
+
+            {/* Arrow + relation type */}
+            <div className="flex flex-col items-center justify-center gap-1 py-2 text-slate-600">
+              <i className="fa-solid fa-arrow-right-long" />
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-600">
+                {RELATION_LABELS[item.relation_type] ?? item.relation_type}
+              </span>
+              {item.years_between > 0 && (
+                <span className="text-[10px] text-slate-700">{item.years_between}yr later</span>
+              )}
+            </div>
+
+            {/* New version */}
+            <a
+              href={item.source_artwork?.url}
+              className="group flex items-start gap-3 rounded-2xl border border-emerald-700/30 bg-emerald-900/10 p-3 transition-colors hover:border-emerald-600/50 hover:bg-emerald-900/20"
+            >
+              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-400">
+                <i className="fa-solid fa-wand-magic-sparkles" />
+              </div>
+              <div className="min-w-0">
+                <div className="text-[10px] font-semibold uppercase tracking-[0.2em] text-emerald-600">New version</div>
+                <div className="mt-0.5 truncate text-sm font-medium text-emerald-200 group-hover:text-white">{item.source_artwork?.title}</div>
+                <div className="text-[10px] text-emerald-800">{formatYear(item.source_artwork?.published_at)}</div>
+              </div>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default function CreatorJourneySection({ journey, username }) {
+  const summary = journey?.summary ?? {}
+  const highlights = Array.isArray(journey?.highlights) ? journey.highlights : []
+  const timeline = Array.isArray(journey?.timeline) ? journey.timeline.slice(0, 6) : []
+  const recaps = Array.isArray(journey?.yearly_recaps) ? journey.yearly_recaps.slice(0, 3) : []
+  const eras = Array.isArray(journey?.eras) ? journey.eras : []
+  const evolution = Array.isArray(journey?.evolution) ? journey.evolution : []
+  const streaks = journey?.streaks ?? null
+  const latestMilestone = summary.latest_milestone ?? null
+  const available = !!summary.available
+
+  if (!available) {
+    return (
+      <section className="rounded-[34px] border border-white/10 bg-[linear-gradient(145deg,rgba(17,24,39,0.96),rgba(15,23,42,0.9))] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.28)] sm:p-7">
+        <div className="mb-5 flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.3em] text-sky-200/70">Creator Journey</div>
+            <h2 className="mt-2 text-2xl font-semibold text-white">A profile built as a story, not only a feed</h2>
+          </div>
+        </div>
+
+        <EmptyJourneyState
+          username={username}
+          memberSinceYear={summary.member_since_year}
+          yearsOnSkinbase={summary.years_on_skinbase}
+        />
+      </section>
+    )
+  }
+
+  return (
+    <section className="rounded-[34px] border border-white/10 bg-[linear-gradient(145deg,rgba(15,23,42,0.98),rgba(8,15,28,0.92))] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.32)] sm:p-7">
+      <div className="flex flex-wrap items-start justify-between gap-5">
+        <div className="max-w-2xl">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.3em] text-sky-200/70">Creator Journey</div>
+          <h2 className="mt-2 text-2xl font-semibold text-white">A profile shaped by milestones, turning points, and yearly chapters.</h2>
+          {latestMilestone && (
+            <p className="mt-3 max-w-xl text-sm leading-relaxed text-slate-300">
+              Latest moment: <span className="font-semibold text-white">{latestMilestone.title}</span>
+              {latestMilestone.headline ? ` - ${latestMilestone.headline}` : ''}
+            </p>
+          )}
+        </div>
+
+        <div className="grid min-w-[18rem] gap-3 sm:grid-cols-3">
+          <StatPill label="Member since" value={summary.member_since_year} />
+          <StatPill label="Years on Skinbase" value={summary.years_on_skinbase ?? 0} />
+          <StatPill label="Milestones" value={summary.milestone_count ?? 0} />
+        </div>
+      </div>
+
+      {/* ── v2: Era strip ── */}
+      <EraStrip eras={eras} />
+
+      {highlights.length > 0 && (
+        <div className="mt-7 grid gap-4 xl:grid-cols-2">
+          {highlights.map((item) => {
+            const href = milestoneHref(item)
+
+            return (
+              <article
+                key={item.id}
+                className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] p-5"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex min-w-0 items-start gap-3">
+                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-sky-400/12 text-sky-200">
+                      <i className={iconForType(item.type)} />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">{item.title}</div>
+                      <div className="mt-1 text-lg font-semibold text-white">{item.headline || item.value}</div>
+                    </div>
+                  </div>
+                  {item.value && (
+                    <div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-medium text-slate-200">
+                      {item.value}
+                    </div>
+                  )}
+                </div>
+
+                {item.summary && (
+                  <p className="mt-4 text-sm leading-relaxed text-slate-300">{item.summary}</p>
+                )}
+
+                {href && (
+                  <a
+                    href={href}
+                    className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-sky-200 transition-colors hover:text-white"
+                  >
+                    Open source moment
+                    <i className="fa-solid fa-arrow-up-right-from-square text-xs" />
+                  </a>
+                )}
+              </article>
+            )
+          })}
+        </div>
+      )}
+
+      <div className="mt-7 grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.95fr)]">
+        <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Timeline</div>
+              <div className="mt-1 text-lg font-semibold text-white">Important creator milestones</div>
+            </div>
+          </div>
+
+          <div className="mt-5 space-y-4">
+            {timeline.map((item, index) => {
+              const href = milestoneHref(item)
+
+              return (
+                <div key={item.id} className="grid grid-cols-[2.5rem_minmax(0,1fr)] gap-3">
+                  <div className="flex flex-col items-center">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-100">
+                      <i className={iconForType(item.type)} />
+                    </div>
+                    {index < timeline.length - 1 && <div className="mt-2 h-full w-px bg-white/10" />}
+                  </div>
+                  <div className="pb-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <div className="text-base font-semibold text-white">{item.title}</div>
+                      {formatDate(item.occurred_at) && (
+                        <div className="text-xs uppercase tracking-[0.2em] text-slate-500">{formatDate(item.occurred_at)}</div>
+                      )}
+                    </div>
+                    {item.headline && <div className="mt-1 text-sm font-medium text-sky-100">{item.headline}</div>}
+                    {item.summary && <div className="mt-1 text-sm leading-relaxed text-slate-400">{item.summary}</div>}
+                    {href && (
+                      <a href={href} className="mt-2 inline-flex items-center gap-2 text-sm text-slate-200 transition-colors hover:text-white">
+                        View linked work
+                        <i className="fa-solid fa-arrow-right text-xs" />
+                      </a>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+          <div>
+            <div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Yearly recap</div>
+            <div className="mt-1 text-lg font-semibold text-white">Recent chapters</div>
+          </div>
+
+          <div className="mt-5 space-y-3">
+            {recaps.map((item) => {
+              const status = item.metrics?.year_status
+              const statusColors = {
+                breakout:     'bg-emerald-400/12 text-emerald-200',
+                steady:       'bg-sky-400/12 text-sky-200',
+                experimental: 'bg-violet-400/12 text-violet-200',
+                comeback:     'bg-amber-400/12 text-amber-200',
+                quiet:        'bg-slate-700 text-slate-400',
+              }
+              return (
+                <article key={item.id} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">{item.value}</div>
+                        {status && (
+                          <span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold capitalize ${statusColors[status] ?? statusColors.steady}`}>
+                            {status}
+                          </span>
+                        )}
+                      </div>
+                      <div className="mt-1 text-lg font-semibold text-white">{item.headline}</div>
+                    </div>
+                    <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-amber-400/12 text-amber-200">
+                      <i className="fa-solid fa-chart-column" />
+                    </div>
+                  </div>
+                  <p className="mt-3 text-sm leading-relaxed text-slate-300">{item.summary}</p>
+
+                  <div className="mt-4 grid gap-2 sm:grid-cols-2">
+                    <StatPill label="Views" value={(item.metrics?.views ?? 0).toLocaleString()} />
+                    <StatPill label="Downloads" value={(item.metrics?.downloads ?? 0).toLocaleString()} />
+                    {(item.metrics?.featured_count ?? 0) > 0 && (
+                      <StatPill label="Featured" value={item.metrics.featured_count} />
+                    )}
+                    {item.metrics?.top_category && (
+                      <StatPill label="Top category" value={item.metrics.top_category} />
+                    )}
+                  </div>
+                </article>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* ── v2: Streaks ── */}
+      <StreaksSection streaks={streaks} />
+
+      {/* ── v2: Growth & Evolution ── */}
+      <EvolutionSection evolution={evolution} />
+    </section>
+  )
+}
--- a/resources/js/components/profile/ProfileHero.jsx
+++ b/resources/js/components/profile/ProfileHero.jsx
@@ -23,7 +23,6 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
  const joinDate = user.created_at
    ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
    : null
-  const bio = profile?.bio || profile?.about || ''
  const progressPercent = Math.round(Number(user?.progress_percent ?? 0))
  const heroStats = [
    { label: 'Followers', value: formatCompactNumber(count) },
@@ -156,12 +155,6 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
                      ) : null}
                    </div>

-                    {bio ? (
-                      <p className="mx-auto mt-4 max-w-2xl text-sm leading-relaxed text-slate-300/90 md:mx-0 md:text-[15px]">
-                        {bio}
-                      </p>
-                    ) : null}
-
                    <XPProgressBar
                      xp={user?.xp}
                      currentLevelXp={user?.current_level_xp}
--- a/resources/js/components/profile/collections/CollectionCard.jsx
+++ b/resources/js/components/profile/collections/CollectionCard.jsx
@@ -46,8 +46,35 @@ function StatPill({ icon, label, value }) {
  )
 }

-export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
+function CoverMedia({ collection, isOwner }) {
  const coverImage = collection?.cover_image
+  const coverMaturity = !isOwner && collection?.cover_image_maturity ? 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,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
+        <i className="fa-solid fa-layer-group text-4xl" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative aspect-[16/10] overflow-hidden bg-slate-950">
+      <img
+        src={coverImage}
+        alt={collection?.title || 'Collection cover'}
+        className={`h-full w-full object-cover transition-[transform,filter] duration-500 group-hover:scale-[1.04] ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
+        loading="lazy"
+      />
+      {isMature ? <div className="absolute left-3 top-3 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-3 bottom-3 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">Blurred by your settings</div> : null}
+    </div>
+  )
+}
+
+export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
  const [saved, setSaved] = React.useState(Boolean(collection?.saved))
  const [saveBusy, setSaveBusy] = React.useState(false)

@@ -113,20 +140,7 @@ export default function CollectionCard({ collection, isOwner, onDelete, onToggle
    >
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.12),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(249,115,22,0.12),transparent_28%)] opacity-0 transition duration-300 group-hover:opacity-100" />
      <div className="relative">
-        {coverImage ? (
-          <div className="aspect-[16/10] overflow-hidden bg-slate-950">
-            <img
-              src={coverImage}
-              alt={collection?.title || 'Collection cover'}
-              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
-              loading="lazy"
-            />
-          </div>
-        ) : (
-          <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
-            <i className="fa-solid fa-layer-group text-4xl" />
-          </div>
-        )}
+        <CoverMedia collection={collection} isOwner={isOwner} />

        <div className="p-5">
          <div className="mb-3 flex flex-wrap items-center gap-2">
--- a/resources/js/components/profile/tabs/TabAbout.jsx
+++ b/resources/js/components/profile/tabs/TabAbout.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import CreatorJourneySection from '../CreatorJourneySection'

 const SOCIAL_ICONS = {
  twitter:    { icon: 'fa-brands fa-x-twitter',  label: 'X / Twitter' },
@@ -169,7 +170,7 @@ function SectionCard({ icon, eyebrow, title, children, className = '' }) {
 * TabAbout
 * Bio, social links, metadata - replaces old sidebar profile card.
 */
-export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory }) {
+export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory, journey }) {
  const uname = user.username || user.name
  const displayName = user.name || uname
  const about = profile?.about
@@ -240,6 +241,8 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
            )}
          </SectionCard>

+          <CreatorJourneySection journey={journey} username={uname} />
+
          <SectionCard icon="fa-solid fa-address-card" eyebrow="Details" title="Profile information">
            <div className="grid gap-3 md:grid-cols-2">
              {displayName && displayName !== uname ? (
--- a/resources/js/components/profile/tabs/TabArtworks.jsx
+++ b/resources/js/components/profile/tabs/TabArtworks.jsx
@@ -90,6 +90,8 @@ function FeaturedShowcase({ featuredArtworks }) {
  const secondaryArtworks = featuredArtworks.slice(1, 4)
  const leadMeta = artworkMeta(leadArtwork)
  const leadStats = artworkStats(leadArtwork)
+  const leadShouldBlur = Boolean(leadArtwork?.maturity?.should_blur)
+  const leadIsMature = Boolean(leadArtwork?.maturity?.is_mature_effective)

  return (
    <section className="relative mt-8 overflow-hidden rounded-[36px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.14),rgba(255,255,255,0.04),rgba(249,115,22,0.12))] shadow-[0_30px_90px_rgba(2,6,23,0.3)]">
@@ -104,10 +106,12 @@ function FeaturedShowcase({ featuredArtworks }) {
            <img
              src={leadArtwork.thumb}
              alt={leadArtwork.name}
-              className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.05]"
+              className={`h-full w-full object-cover transition-[transform,filter] duration-700 group-hover:scale-[1.05] ${leadShouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
              loading="lazy"
            />
          </div>
+          {leadIsMature ? <div className="absolute left-5 top-20 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 content</div> : null}
+          {leadShouldBlur ? <div className="absolute inset-x-5 bottom-28 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 className="absolute inset-x-0 top-0 flex items-start justify-between p-5 md:p-7">
            <div className="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100 backdrop-blur-sm">
              <i className="fa-solid fa-star text-[10px]" />
@@ -174,7 +178,7 @@ function FeaturedShowcase({ featuredArtworks }) {
                  <img
                    src={art.thumb}
                    alt={art.name}
-                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
+                    className={`h-full w-full object-cover transition-[transform,filter] duration-300 group-hover:scale-[1.04] ${art?.maturity?.should_blur ? 'scale-[1.02] blur-xl' : ''}`}
                    loading="lazy"
                  />
                </div>
--- a/resources/js/components/profile/tabs/TabPosts.jsx
+++ b/resources/js/components/profile/tabs/TabPosts.jsx
@@ -5,10 +5,6 @@ import PostComposer    from '../../Feed/PostComposer'
 import PostCardSkeleton from '../../Feed/PostCardSkeleton'
 import FeedSidebar     from '../../Feed/FeedSidebar'

-function formatCompactNumber(value) {
-  return Number(value ?? 0).toLocaleString()
-}
-
 function EmptyPostsState({ isOwner, username }) {
  return (
    <div className="flex flex-col items-center justify-center rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-20 text-center">
@@ -78,7 +74,6 @@ export default function TabPosts({
  suggestedUsers,
  socialLinks,
  countryName,
-  profileUrl,
  onTabChange,
 }) {
  const [posts,    setPosts]    = useState([])
@@ -116,78 +111,14 @@ export default function TabPosts({
    setPosts((prev) => prev.filter((p) => p.id !== postId))
  }, [])

-  const summaryCards = [
-    { label: 'Followers', value: formatCompactNumber(followerCount), icon: 'fa-user-group' },
-    { label: 'Uploads', value: formatCompactNumber(stats?.uploads_count ?? 0), icon: 'fa-image' },
-    { label: 'Awards', value: formatCompactNumber(stats?.awards_received_count ?? 0), icon: 'fa-trophy' },
-    { label: 'Location', value: countryName || 'Unknown', icon: 'fa-location-dot' },
-  ]
-
  return (
    <div className="py-6">
-      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
-        <section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.06))] p-6 shadow-[0_20px_60px_rgba(2,6,23,0.24)]">
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-            <div className="max-w-3xl">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Profile posts</p>
-              <h2 className="mt-2 text-3xl font-semibold tracking-[-0.03em] text-white">
-                Updates, thoughts, and shared work from @{username}
-              </h2>
-              <p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
-                This stream adds the human layer to the profile: quick notes, shared artwork posts, and announcements that do not belong inside the gallery grid.
-              </p>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              <button
-                type="button"
-                onClick={() => onTabChange?.('artworks')}
-                className="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/[0.06] px-4 py-2.5 text-sm font-medium text-slate-200 transition-colors hover:bg-white/[0.1]"
-              >
-                <i className="fa-solid fa-images fa-fw" />
-                View artworks
-              </button>
-              <button
-                type="button"
-                onClick={() => onTabChange?.('about')}
-                className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
-              >
-                <i className="fa-solid fa-id-card fa-fw" />
-                About creator
-              </button>
-              {profileUrl ? (
-                <a
-                  href={profileUrl}
-                  className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
-                >
-                  <i className="fa-solid fa-user fa-fw" />
-                  Canonical profile
-                </a>
-              ) : null}
-            </div>
-          </div>
-        </section>
-
-        <section className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-2">
-          {summaryCards.map((card) => (
-            <div
-              key={card.label}
-              className="rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
-            >
-              <div className="flex items-center justify-between gap-3">
-                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{card.label}</div>
-                <i className={`fa-solid ${card.icon} text-slate-500`} />
-              </div>
-              <div className="mt-3 text-xl font-semibold tracking-tight text-white">{card.value}</div>
-            </div>
-          ))}
-        </section>
-      </div>
-
-      <div className="mt-6 grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
+      <div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <div className="min-w-0 space-y-4">
        {isOwner && authUser && (
-          <PostComposer user={authUser} onPosted={handlePosted} />
+          <div className="sticky top-24 z-20">
+            <PostComposer user={authUser} onPosted={handlePosted} />
+          </div>
        )}

        {!loaded && loading && (
--- a/resources/js/components/profile/tabs/TabStats.jsx
+++ b/resources/js/components/profile/tabs/TabStats.jsx
@@ -19,6 +19,7 @@ function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
 * KPI overview cards. Charts can be added here once chart infrastructure exists.
 */
 export default function TabStats({ stats, followerCount, followAnalytics }) {
+  const medalTotals = stats?.medal_totals ?? null
  const kpis = [
    { icon: 'fa-eye',           label: 'Profile Views',     value: stats?.profile_views_count,            color: 'text-sky-400' },
    { icon: 'fa-images',        label: 'Uploads',           value: stats?.uploads_count,                  color: 'text-violet-400' },
@@ -62,6 +63,31 @@ export default function TabStats({ stats, followerCount, followAnalytics }) {
              <KpiCard key={kpi.label} {...kpi} />
            ))}
          </div>
+          <div className="mt-8 rounded-2xl border border-white/10 bg-white/4 p-5 shadow-xl shadow-black/20">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <h3 className="text-xs font-semibold uppercase tracking-widest text-slate-500">Medal Breakdown</h3>
+                <p className="mt-2 text-sm text-slate-400">Real medal totals collected across all public artworks.</p>
+              </div>
+              <div className="text-right">
+                <div className="text-xs uppercase tracking-widest text-slate-500">Weighted Score</div>
+                <div className="mt-1 text-2xl font-bold text-white tabular-nums">{Number(medalTotals?.score_total ?? 0).toLocaleString()}</div>
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
+              {[
+                { label: 'Gold', value: medalTotals?.gold ?? 0, color: 'text-amber-300' },
+                { label: 'Silver', value: medalTotals?.silver ?? 0, color: 'text-slate-300' },
+                { label: 'Bronze', value: medalTotals?.bronze ?? 0, color: 'text-orange-300' },
+                { label: 'Total Medals', value: medalTotals?.count ?? 0, color: 'text-cyan-300' },
+              ].map((item) => (
+                <div key={item.label} className="rounded-2xl border border-white/10 bg-black/15 px-4 py-4">
+                  <div className="text-[11px] uppercase tracking-widest text-slate-500">{item.label}</div>
+                  <div className={`mt-2 text-2xl font-semibold tabular-nums ${item.color}`}>{Number(item.value).toLocaleString()}</div>
+                </div>
+              ))}
+            </div>
+          </div>
          <h3 className="mt-8 mb-4 text-xs font-semibold uppercase tracking-widest text-slate-500 flex items-center gap-2">
            <i className="fa-solid fa-user-group text-emerald-400 fa-fw" />
            Follow Growth
--- a/resources/js/components/tags/TagInput.jsx
+++ b/resources/js/components/tags/TagInput.jsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { getMaxUserTags } from '../../config/tags'

-const DEFAULT_MAX_TAGS = 15
 const DEFAULT_MIN_LENGTH = 2
 const DEFAULT_MAX_LENGTH = 32
 const DEBOUNCE_MS = 300
@@ -155,6 +155,7 @@ function SearchInput({
      onFocus={onFocus}
      disabled={disabled}
      type="text"
+      role="combobox"
      className="w-full rounded-xl border border-white/10 bg-white/10 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
      placeholder={placeholder}
      aria-label="Tag input"
@@ -407,7 +408,7 @@ export default function TagInput({
  onChange,
  suggestedTags = [],
  disabled = false,
-  maxTags = DEFAULT_MAX_TAGS,
+  maxTags = getMaxUserTags(),
  minLength = DEFAULT_MIN_LENGTH,
  maxLength = DEFAULT_MAX_LENGTH,
  placeholder = 'Type tags…',
--- a/resources/js/components/tags/TagInput.test.jsx
+++ b/resources/js/components/tags/TagInput.test.jsx
@@ -3,6 +3,17 @@ import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import TagInput from './TagInput'
+import { getMaxUserTags } from '../../config/tags'
+
+const MAX_TAGS = getMaxUserTags()
+
+function tagsAtLimitMinus(remaining) {
+  return Array.from({ length: MAX_TAGS - remaining }, (_, index) => `t${index + 1}`)
+}
+
+function tagsAtLimit() {
+  return Array.from({ length: MAX_TAGS }, (_, index) => `a${index + 1}`)
+}

 function Harness({ initial = [] }) {
  const [tags, setTags] = React.useState(initial)
@@ -103,13 +114,13 @@ describe('TagInput', () => {
  })

  it('warns when pasted tags exceed the max and only adds the allowed tags', async () => {
-    render(<Harness initial={['t1', 't2', 't3', 't4', 't5', 't6', 't7', 't8', 't9', 't10', 't11', 't12', 't13', 't14']} />)
+    render(<Harness initial={tagsAtLimitMinus(1)} />)

    const input = screen.getByLabelText('Tag input')
    await userEvent.click(input)
    await userEvent.paste('alpha, beta, gamma')

-    expect(screen.getByText('Only 1 tag can be added because the limit is 15. 2 pasted tags will be skipped.')).not.toBeNull()
+    expect(screen.getByText(`Only 1 tag can be added because the limit is ${MAX_TAGS}. 2 pasted tags will be skipped.`)).not.toBeNull()

    await userEvent.click(screen.getByRole('button', { name: 'Add tags' }))

@@ -134,7 +145,7 @@ describe('TagInput', () => {
  })

  it('enforces max tags limit', async () => {
-    render(<Harness initial={['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10', 'a11', 'a12', 'a13', 'a14', 'a15']} />)
+    render(<Harness initial={tagsAtLimit()} />)

    const input = screen.getByLabelText('Tag input')
    await userEvent.type(input, 'overflow{enter}')
--- a/resources/js/components/tags/TagPicker.jsx
+++ b/resources/js/components/tags/TagPicker.jsx
@@ -8,14 +8,14 @@
 *  - Selected chips shown above the list
 *  - AI-suggested tags shown with a purple badge
 *  - Search icon on the right side of the input
- *  - Counter footer: X/15 tags selected
+ *  - Counter footer: X/max tags selected
 *
 * Value format: string[] of tag slugs
 */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { getMaxUserTags } from '../../config/tags'

-const MAX_TAGS = 15
 const DEBOUNCE_MS = 250
 const MAX_RESULTS = 30
 const MIN_LENGTH = 2
@@ -339,7 +339,7 @@ export default function TagPicker({
  onChange,
  suggestedTags = [],
  disabled = false,
-  maxTags = MAX_TAGS,
+  maxTags = getMaxUserTags(),
  searchEndpoint = '/api/tags/search',
  popularEndpoint = '/api/tags/popular',
  placeholder,
--- a/resources/js/components/tags/TagPicker.test.jsx
+++ b/resources/js/components/tags/TagPicker.test.jsx
@@ -3,6 +3,13 @@ import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import TagPicker from './TagPicker'
+import { getMaxUserTags } from '../../config/tags'
+
+const MAX_TAGS = getMaxUserTags()
+
+function tagsAtLimitMinus(remaining) {
+  return Array.from({ length: MAX_TAGS - remaining }, (_, index) => `t${index + 1}`)
+}

 function Harness({ initial = [] }) {
  const [tags, setTags] = React.useState(initial)
@@ -92,13 +99,13 @@ describe('TagPicker', () => {
  })

  it('warns when pasted tags exceed the max and only applies the allowed tags', async () => {
-    render(<Harness initial={['t1', 't2', 't3', 't4', 't5', 't6', 't7', 't8', 't9', 't10', 't11', 't12', 't13', 't14']} />)
+    render(<Harness initial={tagsAtLimitMinus(1)} />)

    const input = screen.getByLabelText('Search or add tags')
    await userEvent.click(input)
    await userEvent.paste('alpha, beta, gamma')

-    expect(screen.getByText('Only 1 tag can be added because the limit is 15. 2 pasted tags will be skipped.')).not.toBeNull()
+    expect(screen.getByText(`Only 1 tag can be added because the limit is ${MAX_TAGS}. 2 pasted tags will be skipped.`)).not.toBeNull()

    await userEvent.click(screen.getByRole('button', { name: 'Add tags' }))

--- a/resources/js/components/ui/Select.jsx
+++ b/resources/js/components/ui/Select.jsx
@@ -16,7 +16,7 @@ import React, { forwardRef } from 'react'
 * @prop {string}  size        - 'sm' | 'md' | 'lg'
 */
 const Select = forwardRef(function Select(
-  { label, error, hint, required, options, placeholder, size = 'md', id, className = '', children, ...rest },
+  { label, error, hint, required, options, placeholder, size = 'md', id, className = '', children, style, ...rest },
  ref,
 ) {
  const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined)
@@ -57,6 +57,13 @@ const Select = forwardRef(function Select(
          ref={ref}
          className={inputClass}
          aria-invalid={!!error}
+          style={{
+            appearance: 'none',
+            WebkitAppearance: 'none',
+            MozAppearance: 'none',
+            backgroundImage: 'none',
+            ...style,
+          }}
          {...rest}
        >
          {placeholder && <option value="" className="bg-nova-900">{placeholder}</option>}
--- a/resources/js/components/upload/UploadSidebar.jsx
+++ b/resources/js/components/upload/UploadSidebar.jsx
@@ -76,7 +76,6 @@ export default function UploadSidebar({
            value={metadata.tags}
            onChange={(nextTags) => onChangeTags?.(nextTags)}
            suggestedTags={suggestedTags}
-            maxTags={15}
            searchEndpoint="/api/tags/search"
            popularEndpoint="/api/tags/popular"
            error={errors.tags}