Wall of People Groups opens where the photos are, with rows as far apart as columns

The wall opened at the whole-wall view, where a card is 11-15 CSS px, under wallLod's 48 px photo
threshold, so every card showed its empty image slot: the README picture read as a blank grid (the
Driver: "zoomed too far out... hard to see the people groups"). It now opens at the top-left corner,
where the store puts the biggest clusters, with cards ~96 px wide. Checked headless with lodPlan on
the component's own geometry (2,107 groups, 53x40): desktop 1440x820 k=7.5, 77 photos; 1280x720
k=8.6, 60; phone 390x700 k=20 (max), 15 photos, all 'hd' and far under the 300 cap, so the memory
win holds. Reset Zoom still shows the whole wall. Rows were 3 units apart against 8 between columns
and left a 200-unit empty band at the bottom of the 4ft x 3ft canvas; 8 fills it exactly.

Built with BUNDLE=wall-of-people-groups only, then the tree; check:sri PASS.

plugin-designs/wall-of-people-groups/src/components/PeopleGroupsWall.vue

@@ -47,7 +47,7 @@ export default {
             cardWidth: 50,      
             cardHeight: 70,     
             cardSpacing: 8,        // Increased horizontal spacing (was 2)
-            cardVerticalSpacing: 3, // Separate vertical spacing
+            cardVerticalSpacing: 8, // same as the horizontal gap, so the rows don't read as one block
             canvasWidth: 0,
             canvasHeight: 0,
             isLandscape: true,
@@ -364,7 +364,7 @@ export default {
             
             this._imgNodes = imgNodes;
             this._hd = new Set();
-            this.$nextTick(() => this.updateLod());
+            this.$nextTick(() => { this.applyStartView(); this.updateLod(); });
 
             // Add action buttons row with FontAwesome icons - Instagram style
             const buttonY = this.cardHeight * 0.72;
@@ -467,6 +467,23 @@ export default {
             return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
         },
         
+        // ★ OPEN WHERE THE PHOTOS ARE. At the whole-wall view (zoom 1) a card is ~12-24 CSS px, under
+        // wallLod's 48 px threshold, so the wall opened as an empty grid of placeholders. Open instead at
+        // the top-left corner (the store sorts the biggest clusters first) with cards ~START_CARD_PX wide:
+        // photos show at once, and only the ~100 cards in view load (wallLod's cap is 300), so the memory
+        // win holds. The transform is in viewBox units; displayScale is computed exactly as updateLod does.
+        // "Reset Zoom" still goes to the whole wall.
+        applyStartView(tries = 0) {
+            if (!this.svg || !this._lodGrid || !this.zoom) return;
+            const r = this.svg.node().getBoundingClientRect();
+            const displayScale = Math.min(r.width / this.canvasWidth, r.height / this.canvasHeight) || 0;
+            if (!displayScale) { if (tries < 20) requestAnimationFrame(() => this.applyStartView(tries + 1)); return; }
+            const START_CARD_PX = 96;
+            const kMax = this.zoom.scaleExtent()[1];
+            const k = Math.max(1, Math.min(kMax, START_CARD_PX / (this._lodGrid.cw * displayScale)));
+            this.svg.call(this.zoom.transform, wallD3().zoomIdentity.scale(k));
+        },
+
         resetZoom() {
             this.svg.transition()
                 .duration(750)

public/dx-maps/doxa-maps-spa/manifest.json

@@ -1273,7 +1273,7 @@
       "bundle": "wall-of-people-groups",
       "scriptUrl": "./wall-of-people-groups/wall-of-people-groups.js",
       "output": "dx-maps/wall-of-people-groups/wall-of-people-groups.js",
-      "integrity": "sha384-nFtIFiBQNVNW1WE06Aq/jET98PlRZfFqZqpUU7Bggd4h9FcapPLRGUh10jDCXhTc",
+      "integrity": "sha384-9DA3cSBYXmzEI1y4Tuyp38ilxLTeLZ/H8hpoPQ7TFdLbg2cO8XUzvyB7TYXk2r1A",
       "elements": [
         "wall-of-people-groups"
       ],
@@ -1289,7 +1289,7 @@
           "scriptUrl": "./wall-of-people-groups/wall-of-people-groups.js",
           "embed": {
             "iframe": "<iframe src=\"./wall-of-people-groups/wall-of-people-groups/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
-            "script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./wall-of-people-groups/wall-of-people-groups.js\" integrity=\"sha384-nFtIFiBQNVNW1WE06Aq/jET98PlRZfFqZqpUU7Bggd4h9FcapPLRGUh10jDCXhTc\" crossorigin=\"anonymous\"></script>\n<wall-of-people-groups profile-config='{\"profile\":\"wall-of-people-groups\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></wall-of-people-groups>"
+            "script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./wall-of-people-groups/wall-of-people-groups.js\" integrity=\"sha384-9DA3cSBYXmzEI1y4Tuyp38ilxLTeLZ/H8hpoPQ7TFdLbg2cO8XUzvyB7TYXk2r1A\" crossorigin=\"anonymous\"></script>\n<wall-of-people-groups profile-config='{\"profile\":\"wall-of-people-groups\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></wall-of-people-groups>"
           },
           "bundle": "wall-of-people-groups"
         }

public/dx-maps/manifest.json

@@ -1273,7 +1273,7 @@
       "bundle": "wall-of-people-groups",
       "scriptUrl": "./wall-of-people-groups/wall-of-people-groups.js",
       "output": "dx-maps/wall-of-people-groups/wall-of-people-groups.js",
-      "integrity": "sha384-nFtIFiBQNVNW1WE06Aq/jET98PlRZfFqZqpUU7Bggd4h9FcapPLRGUh10jDCXhTc",
+      "integrity": "sha384-9DA3cSBYXmzEI1y4Tuyp38ilxLTeLZ/H8hpoPQ7TFdLbg2cO8XUzvyB7TYXk2r1A",
       "elements": [
         "wall-of-people-groups"
       ],
@@ -1289,7 +1289,7 @@
           "scriptUrl": "./wall-of-people-groups/wall-of-people-groups.js",
           "embed": {
             "iframe": "<iframe src=\"./wall-of-people-groups/wall-of-people-groups/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
-            "script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./wall-of-people-groups/wall-of-people-groups.js\" integrity=\"sha384-nFtIFiBQNVNW1WE06Aq/jET98PlRZfFqZqpUU7Bggd4h9FcapPLRGUh10jDCXhTc\" crossorigin=\"anonymous\"></script>\n<wall-of-people-groups profile-config='{\"profile\":\"wall-of-people-groups\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></wall-of-people-groups>"
+            "script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./wall-of-people-groups/wall-of-people-groups.js\" integrity=\"sha384-9DA3cSBYXmzEI1y4Tuyp38ilxLTeLZ/H8hpoPQ7TFdLbg2cO8XUzvyB7TYXk2r1A\" crossorigin=\"anonymous\"></script>\n<wall-of-people-groups profile-config='{\"profile\":\"wall-of-people-groups\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></wall-of-people-groups>"
           },
           "bundle": "wall-of-people-groups"
         }

public/dx-maps/wall-of-people-groups/wall-of-people-groups/index.html

@@ -32,7 +32,7 @@
 
   <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
   <!-- Bundle IIFE — registers the <wall-of-people-groups> custom element. -->
-  <script src="../wall-of-people-groups.js" integrity="sha384-nFtIFiBQNVNW1WE06Aq/jET98PlRZfFqZqpUU7Bggd4h9FcapPLRGUh10jDCXhTc" crossorigin="anonymous"></script>
+  <script src="../wall-of-people-groups.js" integrity="sha384-9DA3cSBYXmzEI1y4Tuyp38ilxLTeLZ/H8hpoPQ7TFdLbg2cO8XUzvyB7TYXk2r1A" crossorigin="anonymous"></script>
 
   <script>
     // Mapbox token resolution — the A3 ladder, in precedence order: