id: fragment.editor-navigator.001 freshvibe_way_version: v8 date: 2026-07-10 last_rewritten: 2026-07-11 (Elementor-parity expansion per operator) # editor-navigator — structure tree of the page ## What it does Renders a tree view of every editable element on the page. Sections and containers nest; widgets sit inside their containers. **The Navigator is the Elementor Navigator.** Same shape, same six behaviors, same interactions. The operator already knows how to use it because Elementor trained them. ## Why this is its own feature The Navigator is a cluster of related capabilities (cluster rule holds): 1. **Walk the live DOM** — find every element with a recognised framework class token (Elementor, Gutenberg, Webflow) 2. **Build a nested tree** — top-level sections, their columns/containers, their widgets 3. **Render with icons + labels** — type pill (S for Section, C for Column, H, P, I, B… for widgets) + a human label from the element's content 4. **Click to select** — sets the shared selection state, page scrolls to the element, the appropriate panel opens in the dock 5. **Hover to highlight** — the live page element gets a thin blue outline so the operator can see which tree node corresponds to which on-page thing 6. **Drag to reorder** — uses native HTML5 drag-and-drop, mutates the live DOM via insertBefore. The physical element on the page moves to match the new tree position. This is the killer feature. 7. **Visibility toggle (eye icon)** — per-row eye icon, click to hide that element on the page, click again to show 8. **Inline rename** — double-click the row label to edit the display name. The canonical type never changes — only the display label. (Per invariant I-010.) 9. **Right-click context menu** — Duplicate, Delete, Copy, Paste, Rename (per editor-context-menu feature) 10. **Expand/collapse** — per-node state, persisted across re-renders 11. **Live updates** — when the page changes (new section added, etc.), the tree refreshes Removing any one of these breaks the operator's ability to navigate. Cluster rule holds. ## The six Elementor-parity behaviors (operator-locked 2026-07-11) These are the explicit, named behaviors. Each must work. Each has a test. ### B1 — Click an item in the tree - Page scrolls to the element - The element gets a blue focus outline on the page - The element's panel opens in the dock (region panel for sections, module panel for widgets) - The tree row gets a yellow background indicating "this is what's selected" - Selection state is set: `selection.kind = 'region' | 'module'`, `selection.id = ...` ### B2 — Hover an item in the tree - The corresponding on-page element gets a thin blue outline (Elementor's hover highlight) - The outline follows the element if the page scrolls while hovering - Move the mouse away → outline disappears ### B3 — Drag an item to a new position - Grab any row, drag it to another position in the tree (or to a different column/section) - The on-page element physically moves to match - Implementation: `parentNode.insertBefore(draggedEl, targetEl)`, NOT clone-and-replace, NOT innerHTML wipe - The DOM identity is preserved (same element moves, no new element created) - After drop, the tree rebuilds to reflect the new structure - The "drop here" indicator is visible during drag (Elementor shows a thin blue line between rows where the drop will land) ### B4 — Visibility toggle (eye icon) - Each row has a small eye icon on the left (before the icon) - Click the eye → the on-page element gets `style.display = 'none'` - Click the eye again → display restored - The eye icon changes appearance (open eye / closed eye / crossed-out eye) to reflect state - Per-element state is in-memory only (reloading the page restores the original visibility) ### B5 — Inline rename - Double-click the row label → the label becomes a text input with the current label selected - Type a new name, press Enter → the canonical `displayLabel` is updated - Press Escape → cancel, no change - Click outside → commit, same as Enter - The canonical type (`moduleId`, `regionId`) never changes — only the display name (per invariant I-010) ### B6 — Right-click context menu - Right-click any row → the FES context menu opens - Menu items: Edit, Rename, Duplicate, Delete, Copy, Paste - Per editor-context-menu fragment ## Tree shape ``` 📁 Section 1 👁 📦 Column 1 👁 🔘 H "Learn with Nature" 👁 🔘 P "Bring nature into..." 👁 📦 Column 2 👁 🔘 I oscar-tree-photo.jpg 👁 🔘 B "Contact" 👁 📁 Section 2 (Post grid) 👁 📦 Column 1 👁 🔘 C [carousel of books] 👁 ``` The eye icon (👁) is on the right of each row, on the same row. (Elementor puts it on the left; either is fine — pick one and be consistent.) The folder icon (📁) is for sections/columns (containers). The square icon (🔘) is for widgets. Type pills: H = heading, P = paragraph, I = image, B = button, C = carousel. Single letter when unambiguous, two letters when needed. ## Inputs - `buildNavigator()` — returns a DOM tree element ready to be inserted into a panel - `refreshNavigator()` — re-walks the DOM, rebuilds the tree (called when data changes) - Selection is read from `window.FreshVibeCmsSelection`. Click handlers route through selection. - Drag-drop uses native HTML5 drag events; no third-party library. ## Outputs - A DOM tree where each node is a `
` containing: - A drag handle (the row itself is draggable, or a small grip on the left) - A visibility eye icon (`