Hero Phase 2: editor shell + background/overlay + draft/preview/publish

Second phase of the hero canvas editor (see HERO_EDITOR.md).

- new lib/heroLayout.js: shared defaultLayout/buildOverlay/heroBackground/
  parseLayout used by both the portal and the editor (Portal refactored onto it)
- new admin view HeroEditor.jsx at /admin/hero (+ sidebar nav + route):
  - live canvas preview (16:9) rendering the draft via HeroElement
  - background panel: image upload (/admin/uploads, >1MB warning), 3x3 position
    grid, overlay opacity slider — all update the canvas in real time
  - debounced (800ms) auto-save to hero_layout_draft
  - Publish (writes hero_layout + draft), Preview (opens /?preview=1), Revert
- Portal: ?preview=1 renders the draft via the admin settings endpoint, with a
  "showing unpublished draft" banner; normal load renders the published layout

No schema/dep changes. Verified end to end: overlay/position update the canvas,
auto-save writes the draft, publish updates the live portal, preview shows the
draft while the public page shows live. Element drag/properties land in Phase 3.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/src/routes/public/Portal.jsx

@@ -1,66 +1,10 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import PublicLayout from '../../components/PublicLayout.jsx'
 import HeroElement from '../../components/HeroElement.jsx'
 import { useSite } from '../../contexts/SiteContext.jsx'
-
-const DEFAULT_HERO_IMAGE = '/assets/img/uomysticmoon-main-hero.png'
-const HERO_BG =
-  "linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
-  DEFAULT_HERO_IMAGE +
-  "')"
-
-// Single-stop dark overlay driven by the editor's opacity slider.
-function buildOverlay(opacity) {
-  return `linear-gradient(180deg,rgba(11,15,20,${opacity * 0.15}) 0%,rgba(11,15,20,${opacity}) 100%)`
-}
-
-// The current hardcoded hero, expressed as a HeroLayout so the page is unchanged
-// until staff publish their own. Font sizes use the existing clamp() strings so
-// the default stays responsive (editor-created text uses px).
-function defaultLayout(teaser) {
-  return {
-    version: 1,
-    background: { image_url: null, position_x: 'left', position_y: 'center', size: 'cover' },
-    overlay: { opacity: 0.72 },
-    elements: [
-      {
-        id: 'default-text',
-        type: 'text_block',
-        x: 50,
-        y: 42,
-        z: 1,
-        anchor: 'center',
-        props: {
-          align: 'center',
-          width: 760,
-          lines: [
-            { text: 'Private shard project', tag: 'span', fontSize: '0.74rem', color: '#c2d2e6', weight: 700, letterSpacing: '0.22em', transform: 'uppercase', font: 'sans' },
-            { text: 'UOMysticmoon', tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
-            { text: 'A private Ultima Online world in progress', tag: 'p', fontSize: '1.32rem', color: '#dbe2ea', italic: true, marginTop: 22 },
-            { text: teaser, tag: 'p', fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
-          ],
-        },
-      },
-      {
-        id: 'default-buttons',
-        type: 'buttons',
-        x: 50,
-        y: 72,
-        z: 2,
-        anchor: 'center',
-        props: {
-          align: 'center',
-          gap: 12,
-          items: [
-            { label: 'Enter the Website', to: '/site', variant: 'primary' },
-            { label: 'Open the Wiki', to: '/wiki', variant: 'ghost' },
-          ],
-        },
-      },
-    ],
-  }
-}
+import { api } from '../../api/client.js'
+import { defaultLayout, parseLayout, heroBackground } from '../../lib/heroLayout.js'
 
 const QUICK = [
   { label: 'News', to: '/site/news' },
@@ -85,47 +29,57 @@ const DESTINATIONS = [
   },
 ]
 
+// Admin "Preview" opens the portal with ?preview=1 to render the unpublished draft.
+const PREVIEW = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('preview') === '1'
+
 export default function Portal() {
   const { settings } = useSite()
   const teaser =
     settings.homepage_teaser ||
     'Mysticmoon is still being shaped beneath a midnight sky — a quiet preview for the news, screenshots, guides, and community notes to come as the world wakes.'
 
-  // Parse the published layout; fall back to the pre-populated default if missing,
+  // Published layout (public). Falls back to the pre-populated default if missing,
   // malformed, the wrong version, or empty — so the hero is never blank.
-  const parsed = useMemo(() => {
-    try {
-      const l = settings.hero_layout ? JSON.parse(settings.hero_layout) : null
-      return l && l.version === 1 && Array.isArray(l.elements) && l.elements.length ? l : null
-    } catch {
-      return null
-    }
-  }, [settings.hero_layout])
+  const published = useMemo(() => parseLayout(settings.hero_layout), [settings.hero_layout])
 
-  const layout = parsed || defaultLayout(teaser)
-  const isDefault = !parsed
-  const bg = layout.background || {}
-  // Keep the exact multi-gradient look for the untouched default; otherwise build
-  // from the editor's overlay opacity over the chosen (or default) image.
-  const backgroundImage =
-    isDefault && !bg.image_url
-      ? HERO_BG
-      : `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || DEFAULT_HERO_IMAGE}')`
+  // In preview mode, pull the draft via the admin endpoint (requires a logged-in
+  // admin cookie); falls back silently to the published/default layout otherwise.
+  const [draft, setDraft] = useState(null)
+  useEffect(() => {
+    if (!PREVIEW) return
+    let active = true
+    api.admin
+      .getSettings()
+      .then((s) => active && setDraft(parseLayout(s.hero_layout_draft)))
+      .catch(() => {})
+    return () => {
+      active = false
+    }
+  }, [])
+
+  const active = (PREVIEW && draft) || (published && published.elements.length ? published : null)
+  const layout = active || defaultLayout(teaser)
+  const isDefault = !active
+  const bgStyle = heroBackground(layout, { isDefault })
   const elements = [...layout.elements].sort((a, b) => (a.z || 0) - (b.z || 0))
 
   return (
     <PublicLayout header={false}>
       <main style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+        {PREVIEW && draft && (
+          <div
+            className="sans"
+            style={{ background: 'var(--accent)', color: 'var(--bg-deep)', textAlign: 'center', padding: '6px 12px', fontSize: '0.8rem', fontWeight: 700, letterSpacing: '0.04em' }}
+          >
+            Preview — showing unpublished draft
+          </div>
+        )}
         <section
           style={{
             position: 'relative',
             minHeight: 'clamp(600px,72vh,860px)',
             overflow: 'hidden',
-            backgroundColor: 'var(--bg-deep)',
-            backgroundImage,
-            backgroundPosition: `${bg.position_x || 'left'} ${bg.position_y || 'center'}`,
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: bg.size || 'cover',
+            ...bgStyle,
           }}
         >
           <div style={{ position: 'absolute', inset: 0, padding: '0 max(18px,calc((100% - 1080px)/2))' }}>