RunicGateway/docs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Colby Whitlock
2026-06-28 02:32:09 -05:00
parent 2e382893fe
commit 3b076df09b
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
website/HERO_EDITOR.md
View File

@@ -98,13 +98,16 @@ layout adapts across viewports without breakpoint data. `version` is validated
## 7. Phased build (each phase: build → verify in preview → commit) ## 7. Phased build (each phase: build → verify in preview → commit)
- **Phase 0 — Spec** ✅ this document. - **Phase 0 — Spec** ✅ this document.
- **Phase 1 — Data path & renderer.** Add `hero_layout` to the public whitelist; - **Phase 1 — Data path & renderer** ✅ (verified 2026-06-28). `hero_layout`
`HeroElement.jsx`; Portal reads the layout and renders elements with a whitelisted; `HeroElement.jsx`; Portal renders the layout with a `DEFAULT_LAYOUT`
`DEFAULT_LAYOUT` fallback (pre-populated current hero). *Exit:* portal looks fallback. Default render matches the old hero; publishing a layout re-renders;
identical with no key set; setting `hero_layout` by hand re-renders the hero. draft key not exposed publicly. Shared helpers moved to `client/src/lib/heroLayout.js`.
- **Phase 2 — Editor shell + background/overlay.** `/admin/hero` view + nav; canvas - **Phase 2 — Editor shell + background/overlay** ✅ (verified 2026-06-28).
preview; background image upload + 3×3 position + opacity slider; draft auto-save, `/admin/hero` view + sidebar nav; canvas live-preview; background upload + 3×3
publish, preview, revert. *Exit:* change the background image WYSIWYG and publish. position + overlay opacity; debounced draft auto-save; publish; `?preview=1`
reads the draft (admin) with a banner; revert. Verified: overlay/position update
the canvas, auto-save writes the draft, publish writes live, preview shows the
draft while the normal portal shows live.
- **Phase 3 — Elements: select / drag / text_block / buttons.** Add/select/move - **Phase 3 — Elements: select / drag / text_block / buttons.** Add/select/move
(native pointer)/delete/z-order; text_block + buttons property panels. *Exit:* (native pointer)/delete/z-order; text_block + buttons property panels. *Exit:*
add a heading + CTA row, drag to place, publish, see it live. add a heading + CTA row, drag to place, publish, see it live.