Editor: interactive composition wireframe — drag to reorder and restructure

Drag a view's box (or Alt+up/down) to reorder it within its container; drag onto another view's edge to pair the two in a new row/column, move across containers, or insert. Each leaf shows a glyph of its mark type.

Core: spec-restructure.wrapViews (wrap, with flatten-to-insert, collapse, and data-pin invariants) and spec-insert.moveViewTo; the editor applies every drag as one undoable edit via AppStore.composeRequest, keeping the editor the single text source.
This commit is contained in:
2026-06-29 14:25:31 +03:00
parent 57604a80a6
commit 216797ff9b
16 changed files with 1160 additions and 56 deletions
@@ -222,17 +222,38 @@ _(Consulted via `/council` → WAI-ARIA APG `windowsplitter`. This bullet is the
cite it, not the APG file.)_
**Resolved — composition structure wireframe.** The preview toolbar's structure disclosure (a
read-only schematic of the spec's multi-view composition — `CompositionWireframe`, arch 08) is a
schematic of the spec's multi-view composition — `CompositionWireframe`, arch 08) is a
**WAI-ARIA APG `tree`** inside a disclosure popover (`usePopover`): bare nested boxes are
`tree``treeitem``group`, single-select via `aria-selected`, **one tab stop with a roving
tabindex**, arrow keys in **logical (document) order** — Up/Down between nodes, Left → parent,
Right → first child, Home/End, Enter/Space activate — not spatial, since a mixed horizontal/
vertical layout makes spatial arrows ambiguous. Selecting a box reveals + selects that view's
source range in the editor (`AppStore.requestRevealView`) but **does not steal focus**, so the
wireframe stays the active surface while the editor scrolls to follow; the editor selection is the
single source of truth. The toolbar glyph appears **only for a composed spec** — a single-view
spec hides the affordance rather than disclosing an empty tree. _(Council: APG treeview; the
cursor-scoping reachability rationale is in [arch 08](08-vega-editor-techniques.md).)_
vertical layout makes spatial arrows ambiguous. Each leaf carries a glyph of its mark type (the
`mark-*` icon sub-family, arch 09 §5) so views read apart at a glance. Selecting a box reveals +
selects that view's source range in the editor (`AppStore.requestRevealView`) but **does not steal
focus**, so the wireframe stays the active surface while the editor scrolls to follow; the editor
selection is the single source of truth. The toolbar glyph appears **only for a composed spec**
a single-view spec hides the affordance rather than disclosing an empty tree. _(Council: APG
treeview; the cursor-scoping reachability rationale is in [arch 08](08-vega-editor-techniques.md).)_
On the **editable draft** the tree restructures the composition. Every restructure is **applied by
the editor** (which owns the one-⌘Z edit) via `AppStore.requestComposeMove`/`requestComposeWrap`,
never by writing the draft text directly — so the wireframe and editor share one undo history.
- **Reorder within a container — APG rearrangeable-listbox.** `Alt+↑`/`Alt+↓` moves the focused
view among its siblings: a direct modifier+arrow move, **not** a grab/drop mode. Focus follows
the moved box for consecutive moves (so a screen reader re-announces its new position), a
**polite** live region states the result, and `aria-keyshortcuts` advertises the keys. _(Council:
APG listbox-rearrangeable.)_
- **Restructure by drag — edge-zone (dock) model.** The nearest edge of the box under the pointer
picks the **axis** (left/right → a row `hconcat`, top/bottom → a column `vconcat`) and **side**.
A drop **along** a sibling's own container reorders within it; a drop **across** it — or onto an
opaque `layer`/`facet`/`repeat` box — pairs the two in a new concat. The hit-test descends only
through `hconcat`/`vconcat` and treats `layer`/`facet`/`repeat`/grid as **opaque** targets (their
children overlap or are data-generated, so the unit is the target, never inside it). A 3px accent
line marks the landing edge; a `wrap` drop also rings + tints the partner box. The drag is a
pointer accelerator over capabilities that stay keyboard-reachable (in-container reorder via
`Alt+↑/↓`; cross-container wrap via the editor's wrap actions), so it adds **no keyboard-only
gap**. Transform invariants in [arch 08](08-vega-editor-techniques.md).
**Resolved — pane toggle strip.** The persistent show/hide strip (spec §01A) is a **WAI-ARIA
APG `toolbar`** (`role="toolbar"`, `aria-orientation="vertical"`, an `aria-label` such as