Describe the bands that head the groups of the inspector (#290)

Concepts has the groups, the fold and where it is remembered. Architecture names the bricks in the toolkit, Scenes says where the switch sits now, Development has the new sum of e2e checks.

Architecture.md

@@ -18,6 +18,13 @@
   popups. The only lasting DOM element is a hidden `<input>` used as a keyboard bridge (IME,
   mobile keyboard, clipboard) while a canvas text field is focused; *Upload…* adds a short-lived
   file input.
+  **Columns of rows are grouped by bands** (#290, `ui/sections.ts`): a `SectionStack` lays a
+  `SectionHeader` across its padding and the rows after it inside, and hides the rows of a folded
+  header down to the next one (`hiddenBySections`, `sectionOffsets` are the rules, as pure
+  functions). A `SortableList` with a title opens a group the same way and draws its band past its
+  own edges. The toolkit only folds; which groups are folded is kept by the editor
+  (`editor/sectionFolds.ts`, one entry in `localStorage`). Every title of the inspector goes through
+  `addTitle` or `sectionHeader` in `inspector/host.ts`, so a new section gets the band by itself.
   Double-clicks are counted in `clicks.ts`, not read off the event: Pixi only puts a click count
   on the `click` it synthesises and leaves `detail` at 0 on `pointerdown`, so every press handler
   that trusted `e.detail` never saw a second click. Presses are counted per key rather than per

Concepts.md

@@ -207,6 +207,27 @@ A placed object's **Asset** row (and **Part of** for content of a container) wor
 the label is the link, the field beside it shows the asset's name and only reads. It follows a
 rename of the asset right away.
 
+**Groups in the inspector** (#290). The rows stand in groups, and each group has a **band** as
+its head: from edge to edge of the panel, in the header colour, with the title in it and a mark
+in front that says whether the group is open. A placed object shows its name, asset and parent
+first, then **Switches** (*Enabled*, *Keep on scene load*, and a behavior's *Run in editor* and
+*Run while paused*), **Position**, **Transform**, **Editor offset** and **Properties** (a
+behavior: **Variables**). An asset shows its name, then **Switches** and **Properties**; a group
+without rows is left out.
+
+- **A click on a band folds its group**: the rows go, the band stays, and the next band moves up
+  against it. Another click brings the rows back. A control in the band (*Open*, *+ Variable*,
+  *+ Property*) does its own job and folds nothing, also while it is greyed out.
+- **A fold is remembered by title, per panel, in this browser.** *Transform* folded once is folded
+  for every object and asset, and after a reload. A number in a title does not count, so
+  *Key at frame 12* and *Key at frame 3* are one group. The inspector, the tilemap panel, the
+  Variables tab and the side of the Pixel art tab each keep their own.
+- **The same bands head the other columns built this way**: the tilemap panel (*Painting*,
+  *Tiles*, *Layers*), the Variables tab, the side of the Pixel art tab (*Tools*, *Colors*,
+  *Layers*, *Frames*, *View*, *Preview*) and the shape list of vector art in the inspector. A list
+  with a header of its own (*Layers*, *Frames*, *Shapes*) folds with a click on that header, clear
+  of its plus, and takes the notes and buttons under it along.
+
 The asset panel and **Scene objects** share the left column; the divider between them drags
 the height from one to the other, and dragged all the way either keeps its header. The split is a
 share of the column, so a taller or shorter window keeps it.

Development.md

@@ -18,7 +18,7 @@ php tests/php/accounts.test.php                               # the API's accoun
                                                               #   has and the web server's container has not (SKIP there)
 php tests/php/snapshots.test.php                              # the snapshot store (#231), the same way
 php tests/php/releases.test.php                               # the release store (#266), the same way
-node tools/seed-e2e.mjs && node tools/e2e.mjs                 # 1635 editor checks, screenshots in /tmp/gm-e2e-*.png
+node tools/seed-e2e.mjs && node tools/e2e.mjs                 # 1639 editor checks, screenshots in /tmp/gm-e2e-*.png
 GM_STEPS=20 node tools/e2e.mjs                                # or 1-12, or 6,20 — a subset while working on one step
 ./e2e.sh start [GM_STEPS]                                     # the same run detached, see below
 ./e2e.sh status                                               # live progress, or the last run's result

Scenes.md

@@ -99,7 +99,7 @@ moves into the next scene as it is, with everything below it:
 - **its animations**, playing on from where they are,
 - **how its body moves**: a dynamic rigidbody arrives with the velocity and spin it had.
 
-The switch sits right under *Enabled*, on the asset and on a placed object, so a `Player` asset can
+The switch sits right under *Enabled* in the group *Switches*, on the asset and on a placed object, so a `Player` asset can
 say it once for all its placements. Like every property it can be set while the game runs, with a
 `Properties` node whose port is on *Set*.