[LilianBarbe]

What

A denser, easier-to-scan navigator:

• Denser rows: 12px indent, regular-weight labels, rounded rows. Every density knob is a CSS custom property on .navigator in styles.css, so the look is tuned in one place.
• Hierarchy guides on hover: while the pointer is over the tree, a thin line drops from each open parent's chevron past its last child.
• Tinted subtree block: the selected row's open subtree sits in a lightly tinted block (--subtree-tint: 8%). It uses the accent colour, or green for components.
• No grip on leaves: the whole row is already draggable. The empty slot keeps icons aligned.
• Drop gaps take no room: they overlap row edges and only catch the pointer during a drag, so clicking a row's edge still selects the row. Where several levels end together, the deeper gap sits on top and the pointer's x position picks the level.

Why

On real pages (10+ sections, components inside components) the old tree was hard to scan: wide indent, bold labels, and no cue for where a parent ends. The guides and the tinted block answer "what is inside what" at a glance.

Notes for review

• Icons are untouched and use the Central set.
• TreeDropGap's marginLeft reads --navigator-indent with a 16px fallback, so the pages tree is unchanged.
• Rows carry data-depth. navigator.test.js compares nesting levels instead of a pixel step that now lives in CSS.

Testing

• npm run check:changed passes.
• All renderer/structure/* and renderer/pages/* suites pass (21/21).
• Checked by hand in the dev app on a real project: selection, collapse, hover guides, drag and drop between levels.
• Full gate (pre-push) on top of v1.2.2: 793/793 suites pass.

🤖 Generated with Claude Code