Hierarchy Tree

The governed content-tree pattern for browsing, selecting, renaming, nesting, and restructuring pages while preserving a calm shell-attached posture.

Status: Signed-off for reference-pack and verification work
Host posture: Reference proof uses a shell-attached drawer over a background page
Inherited families: `context-nav`, `context-nav drawer`, and `display settings` stay host-owned

Reference Surface

Review This Pattern

This route is now the live hierarchy-tree reference page. Use it to review the signed-off drawer-hosted pattern before creating dedicated canonicals.

Reference pattern Hierarchy-tree signed-off reference surface host Context-nav host family payload Display-settings payload family

Contract Highlights

What This Pattern Governs

The pattern governs hybrid tree editing, separate current and selected states, protected roots, explicit delete choices, compressed deep nesting, desktop resize, mobile full-screen drawers, and RTL mirroring.

Editing model

Inline first, menus for risk

Rename and new-page creation stay direct inside the tree, while structural or destructive actions such as move fallbacks and delete stay behind row menus.

State model

Current and selected can diverge

The tree keeps one current open page and one separate selected row so people can restructure nearby pages without losing their place in the background page.

Responsive rule

Resize on desktop, full-screen on mobile

Desktop supports drag-and-drop plus a resizable hierarchy drawer, while mobile switches to menu-only structural edits and full-screen drawer behavior.

Reference Preview

Growth planning workspace

The hierarchy should feel like a shell-attached tool layered over a real working page, not a page split into competing specimens.

Current page

Loading...

Visible work area

Selection summary