qol-tray-page-creationlisted

# qol-tray Page Creation Reference ## Model recap Pages are entries in the world registry at integer `layer` values: - `layer: 0`: top-level views declared by `WORLD_PAGES` - `layer: -1`: sub-pages (editors, detail panels, plugin sections, gallery showcases) - `layer: -2, -3, ...`: deeper dives (rare; reserved) A **dive target** binds a `sourceSelector` (DOM matcher) to a `claim` rect and a list of `pages`. `diveInto(selector)` pushes a frame onto the dive stack, sets `currentConfinedPages` to `target.pages`, and lands the camera on `pages[0]` (or the remembered page). Component-depth (dropdown open, edit-mode, modal, palette) is NOT a layer change. See `qol-tray-ui-systems` for component-depth handling. ## Build a page from scratch (walkthrough) Follow these steps in order. Each step links to a recipe or section below for the concrete code. The walkthrough is intentionally abstract: it describes the decisions, not the code, so it stays stable as the underlying primitives evolve. 1. **Classify the page.** Pick the row in the *Page type matrix* below that fits: top-level (a sidebar entry), single-page dive (one detail per host), multi-page dive (siblings to tab between), or plugin section (driven by a plugin contract). Type drives every later step. 2. **Sketch the shell.** Every page renders inside the standard shell (`view-container`, `PageHeader`, `SurfaceContainer`, `view-body`). See *SurfaceContainer is mandatory inside a page* below. Without the