Hero Phase 4: moon/badge/image elements + resize + snap grid

Final phase of the hero canvas editor (see HERO_EDITOR.md) — v1 complete.

- element tray adds moon, badge, and image; property panels:
  - moon: size / glow / color
  - badge: text / background / text color / corner radius
  - image: upload (/admin/uploads, >1MB warning) / width% / alt
- corner resize handle on selected elements (image→width%, moon→size,
  text_block→box width)
- 8px snap-grid toggle with a faint canvas grid overlay; drag snaps when on
- HeroElement: image element shows an "Upload an image" placeholder until a
  source is set (a srcless image never ships live)

Verified in-browser: all five element types add + edit; moon resized 64->104px
via the handle; snap grid overlays; a published moon + badge render on the live
portal; no console errors.

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

client/src/components/HeroElement.jsx

@@ -79,6 +79,17 @@ function Badge({ props }) {
 }
 
 function HeroImage({ props }) {
+  if (!props.src) {
+    // Editor placeholder until an image is chosen (a srcless image never ships live).
+    return (
+      <div
+        className="sans"
+        style={{ width: 160, height: 100, display: 'grid', placeItems: 'center', border: '1px dashed var(--accent)', borderRadius: 8, color: 'var(--muted)', fontSize: '0.8rem', background: 'rgba(11,22,48,0.4)' }}
+      >
+        Upload an image
+      </div>
+    )
+  }
   return (
     <img
       src={props.src}