README: capabilities most-advanced first, refreshed screenshots

README.md

@@ -12,18 +12,20 @@ This README has three parts, in the order you need them:
 
 ---
 
-## 1. The 5 plugin capabilities
+## 1. The 5 plugin capabilities — most advanced first
 
-A "capability" is **how much a plugin nests** — not how hard it is. Every screenshot below is a real
-bundle from this repo's build output.
+A "capability" is **how much a plugin nests** — not how hard it is to use. The tour below starts from
+the most advanced thing this repo produces (a whole app of apps) and walks down to the simplest
+(one element), because the top of the ladder is the point: every rung below it stays independently
+embeddable. Every screenshot is a real bundle from this repo's build output.
 
 | # | Capability | What it is | Example bundle |
 |---|------------|------------|----------------|
-| 1 | **Single element** | One folder → one bundle → one custom element. | `all-people-groups` |
-| 2 | **Prop-table element** | One `root.vue` + a preset table → many maps from one plugin. | `doxa-simple-map` |
-| 3 | **Monolithic element** | One `root.vue` nests many views internally → one element. | `doxa-research-map` |
-| 4 | **Nested-element SPA** | A composite that nests *other plugins* and wires them with props/events. | `big-picture` |
 | 5 | **Nested-SPA / app shell** | Many SPAs nested into one deep-linkable app. | `doxa-maps-spa` |
+| 4 | **Nested-element SPA** | A composite that nests *other plugins* and wires them with props/events. | `big-picture` |
+| 3 | **Monolithic element** | One `root.vue` nests many views internally → one element. | `doxa-research-map` |
+| 2 | **Prop-table element** | One `root.vue` + a preset table → many maps from one plugin. | `doxa-simple-map` |
+| 1 | **Single element** | One folder → one bundle → one custom element. | `all-people-groups` |
 
 > The tier is decided by the files, not by how simple a folder looks: an `*.instances.json` makes a
 > bundle **cap-2** however light it is, and a `meta.json` `type` declares tiers 3/4/5. The authoritative,
@@ -31,38 +33,7 @@ bundle from this repo's build output.
 > **[documentation/reference-capability-exemplars.md](./documentation/reference-capability-exemplars.md)**
 > — cite that file rather than remembering.
 
-### Capability 1 — single element
 
-One folder, one `.vue`, one embeddable element. `plugin-designs/all-people-groups/` shows every people
-group on one map.
-
-![Capability 1 — a single-element plugin (all-people-groups)](documentation/readme-images/cap1-single-element.png)
-
-### Capability 2 — prop-table element
-
-One `root.vue`, many maps. `plugin-designs/doxa-simple-map/` ships a preset prop-table
-(`simple-map.instances.json`) that renders it three ways — each a standalone embeddable page from the
-**same** code.
-
-| Prayer | Engagement | Adoption |
-|--------|------------|----------|
-| ![Capability 2 — prayer preset (doxa-simple-map)](documentation/readme-images/cap2-prayer.png) | ![Capability 2 — engagement preset (doxa-simple-map)](documentation/readme-images/cap2-engagement.png) | ![Capability 2 — adoption preset (doxa-simple-map)](documentation/readme-images/cap2-adoption.png) |
-
-### Capability 3 — monolithic element
-
-A whole multi-view map from one `root.vue`. The trade-off: you cannot embed just one of its tabs.
-
-![Capability 3 — the monolithic research map (doxa-research-map)](documentation/readme-images/cap3-monolithic-research.png)
-
-### Capability 4 — nested-element SPA
-
-A composite that nests **lower-tier plugins** and wires them with props and events. Each inner plugin
-stays independently embeddable, and the composite is embeddable too. `plugin-designs/my-upg-100-list/`
-ships three leaves:
-
-| Composite (`upg-100-mfe`) | List (`upg-100-list`) | Poster wall (`poster-wall`) |
-|---------------------------|-----------------------|-----------------------------|
-| ![Capability 4 — the UPG-100 composite (my-upg-100-list)](documentation/readme-images/cap4-upg100-mfe.png) | ![UPG-100 list leaf](documentation/readme-images/cap4-upg100-list.png) | ![UPG-100 poster-wall leaf](documentation/readme-images/cap4-upg100-poster-wall.png) |
 
 ### Capability 5 — nested-SPA / app shell
 
@@ -79,6 +50,39 @@ studio without any wiring. This is [section 3](#3-the-plugin-studio).
 
 ![Capability 5 — the developer studio (plugin-studio)](documentation/readme-images/cap5-plugin-studio.png)
 
+### Capability 4 — nested-element SPA
+
+A composite that nests **lower-tier plugins** and wires them with props and events. Each inner plugin
+stays independently embeddable, and the composite is embeddable too. `plugin-designs/my-upg-100-list/`
+ships three leaves:
+
+| Composite (`upg-100-mfe`) | List (`upg-100-list`) | Poster wall (`poster-wall`) |
+|---------------------------|-----------------------|-----------------------------|
+| ![Capability 4 — the UPG-100 composite (my-upg-100-list)](documentation/readme-images/cap4-upg100-mfe.png) | ![UPG-100 list leaf](documentation/readme-images/cap4-upg100-list.png) | ![UPG-100 poster-wall leaf](documentation/readme-images/cap4-upg100-poster-wall.png) |
+
+### Capability 3 — monolithic element
+
+A whole multi-view map from one `root.vue`. The trade-off: you cannot embed just one of its tabs.
+
+![Capability 3 — the monolithic research map (doxa-research-map)](documentation/readme-images/cap3-monolithic-research.png)
+
+### Capability 2 — prop-table element
+
+One `root.vue`, many maps. `plugin-designs/doxa-simple-map/` ships a preset prop-table
+(`simple-map.instances.json`) that renders it three ways — each a standalone embeddable page from the
+**same** code.
+
+| Prayer | Engagement | Adoption |
+|--------|------------|----------|
+| ![Capability 2 — prayer preset (doxa-simple-map)](documentation/readme-images/cap2-prayer.png) | ![Capability 2 — engagement preset (doxa-simple-map)](documentation/readme-images/cap2-engagement.png) | ![Capability 2 — adoption preset (doxa-simple-map)](documentation/readme-images/cap2-adoption.png) |
+
+### Capability 1 — single element
+
+One folder, one `.vue`, one embeddable element. `plugin-designs/all-people-groups/` shows every people
+group on one map.
+
+![Capability 1 — a single-element plugin (all-people-groups)](documentation/readme-images/cap1-single-element.png)
+
 ---
 
 ## 2. The 5 deployment methods