From 0cb19a08d58cd01d2b1ef9d03cf973183ad76df6 Mon Sep 17 00:00:00 2001 From: whitlocktech Date: Sun, 28 Jun 2026 08:40:52 -0500 Subject: [PATCH] Hero Phase 3: element select / drag / edit (text_block + buttons) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Third phase of the hero canvas editor (see HERO_EDITOR.md). - HeroElement: editor mode — inner content made non-interactive so the wrapper handles select/drag; selection outline; box width now canvas-relative (calc(100% - 36px)) so text blocks fit the smaller editor canvas - HeroEditor: element tray (+ Text / + Buttons), click-to-select, native Pointer Events drag (position as % of the canvas, clamped), Delete key + panel delete, z-order (send back / bring forward), and per-type property panels: - text_block: per-line text / tag / font size (px) / color / bold, add+remove lines, alignment - buttons: per-item label / path / variant, add+remove, alignment empty-canvas click deselects (back to the background panel) - theme.css: .hero-el-editable outline/hover/selected + grid helper Verified in-browser: selecting shows the line editor, editing updates the canvas live, drag repositions, add/delete and z-order work, deselect returns to the background panel; no console errors. Moon/badge/image + resize + snap are Phase 4. Co-Authored-By: Claude Opus 4.8 --- website/HERO_EDITOR.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/website/HERO_EDITOR.md b/website/HERO_EDITOR.md index 8dbc36c..0a3f50e 100644 --- a/website/HERO_EDITOR.md +++ b/website/HERO_EDITOR.md @@ -108,9 +108,13 @@ layout adapts across viewports without breakpoint data. `version` is validated 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 - (native pointer)/delete/z-order; text_block + buttons property panels. *Exit:* - add a heading + CTA row, drag to place, publish, see it live. +- **Phase 3 — Elements: select / drag / text_block / buttons** ✅ (verified + 2026-06-28). Element tray (+ Text / + Buttons); click-to-select with outline; + native Pointer Events drag (% of canvas); Delete key + panel delete; z-order + (send back / bring forward); text_block line editor (text/tag/size/color/bold, + add/remove lines, align) and buttons editor (label/path/variant, add/remove). + Verified: select shows the line editor, editing a line updates the canvas live, + drag moved 50%→65%, add→3/delete→2 elements, empty-canvas click deselects. - **Phase 4 — moon + badge + image + resize + snap grid.** Remaining element types, resize handles, 8px snap. *Exit:* place a moon and an uploaded image, resize, publish.