Research Gallery: a good guest on the partner's page

Embedded below the fold on a phone-width host page, the gallery disturbed
the page it was a guest on:

- The host's inherited typography flowed into the gallery. Shadow DOM
  isolates selectors, not inheritance, so a host with body{font:20px/3;
  letter-spacing:2px} re-flowed every rail row and legend (root measured at
  20px / 60px / 2px). :host now resets the inherited text properties to the
  gallery's own defaults (16px / normal / normal). Direction still inherits,
  so RTL hosts stay RTL.
- Nested maps wrote the host's URL and title. The gallery now tells every
  child urlSync:false. Regions needs to honour it (routed).

check:gallery-embed gains a good-neighbour phase: phone width, gallery
below the fold, hostile host CSS, the host's own #anchor and <title>. After
load and after every tab it asserts no host scroll, an unchanged URL, an
unchanged title, and no inherited typography. Two nested-plugin violations
are listed, owned and printed in NEIGHBOUR_KNOWN until their owners fix
them (same contract as MAPBOX_KNOWN):
- research-map.vue:647's scrollIntoView jumps the host to y=640 on load on
  a phone.
- Regions' unconditional URL/title sync.

A boot timeout is now a named FAIL instead of an uncaught crash. The gate
caught a real one on the way: a rebuilt bundle whose leaf page still
pinned the old SRI hash.

internal/check-research-gallery-embed.mjs

@@ -24,6 +24,10 @@
  *   2. every tab reaches state 'ready' (never 'error', never stuck 'idle'/'loading').
  *   3. every CURATED tab paints a WebGL canvas — they are all maps or map composites.
  *      Experimental tabs need only mount: some are cards or legacy frames with no canvas.
+ *   5. GOOD NEIGHBOUR (full runs only): embedded below the fold on a phone-width host page with hostile
+ *      typography, the gallery must not scroll the host, rewrite its URL or title, or inherit its
+ *      font metrics — after load and after every tab. Nested-plugin violations are listed, owned and
+ *      printed in NEIGHBOUR_KNOWN until their owners fix them.
  *   4. zero failed requests to the TREE's own origin (a 404/CORS on our assets is our bug; third-
  *      party tile/glyph hiccups are reported, not failed — they are not this repo's to fix).
  *
@@ -48,6 +52,22 @@ const ONLY = argOf('--only', '') ? argOf('--only', '').split(',') : null
 const PROVIDER = argOf('--provider', '')
 // KNOWN, ROUTED exemptions from the zero-Mapbox rule — each names its owner. Printed on every run so
 // it cannot become invisible; DELETE the entry when the owner lands the fix (the gate then enforces it).
+// KNOWN, ROUTED good-neighbour violations by NESTED plugins (key = '<tab id>:<scroll|url|title>').
+// Same contract as MAPBOX_KNOWN: printed on every run, owner named, and DELETED in the same commit
+// as the owner's fix so main never carries a stale exemption or a red gate on someone else's bug.
+const NEIGHBOUR_KNOWN = {
+  // doxa-research-map/research-map.vue:647 — btn.scrollIntoView({block:'nearest'}) on the active
+  // .rm-tab when it mounts. 'nearest' still scrolls the PAGE whenever the embed is below the fold:
+  // on a phone the DX-life page jumps to y≈640 on load. Fix = scroll the tab bar's own scrollLeft
+  // (the SemanticTreeLegend bringRowToTop pattern, regression 554bf10). Routed 2026-09-25.
+  'research-map-plus-grid:scroll': 'research-map owner (research-map.vue:647 scrollIntoView)',
+  'research-map:scroll': 'research-map owner (research-map.vue:647 scrollIntoView)',
+  // regions-dashboard/region-dashboards.vue:499 URL_SYNC is unconditional, so a nested Regions
+  // rewrites the host's #anchor (writeUrl) and document.title (syncTitle). The gallery passes
+  // profile-config.urlSync:false for exactly this; Regions needs to honour it. Routed 2026-09-25.
+  'regions-dashboard:url': 'regions owner (region-dashboards.vue URL_SYNC ignores urlSync:false)',
+  'regions-dashboard:title': 'regions owner (region-dashboards.vue syncTitle)',
+}
 const MAPBOX_KNOWN = {
   // EMPTY ON PURPOSE. The one entry here — my-upg-100-list/upg-100-list.vue:1464 pinning
   // mapbox-gl.css v3.3.0 regardless of engine — was fixed and the exemption deleted in the SAME
@@ -81,7 +101,13 @@ try { ({ chromium } = await import('playwright')) } catch {
 }
 
 let mode = 'js'
+// NEIGHBOUR mode: the partner-page shape that exposes a badly-behaved guest. The gallery sits BELOW
+// THE FOLD, under hostile inherited typography, on a page with its own #anchor and <title>.
+const NEIGHBOUR_TITLE = 'Host research page'
 const hostPage = () => {
+  if (mode === 'neighbour') return `<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>${NEIGHBOUR_TITLE}</title>
+<style>body{margin:0;font:20px/3 Georgia,serif;letter-spacing:2px;color:#900} .fold{height:1400px}</style></head>
+<body><div class=fold>host content above the fold</div><script src="${TREE}/doxa-maps-spa/doxa-maps-spa.js"></script><doxa-maps-spa${PROVIDER ? ` provider="${PROVIDER}"` : ''}></doxa-maps-spa><p>after</p></body></html>`
   const embed = mode === 'iframe'
     ? `<iframe src="${TREE}/doxa-maps-spa/doxa-maps-spa/index.html${PROVIDER ? '?provider=' + PROVIDER : ''}" style="width:100%;height:760px;border:0"></iframe>`
     : `<script src="${TREE}/doxa-maps-spa/doxa-maps-spa.js"></script><doxa-maps-spa${PROVIDER ? ` provider="${PROVIDER}"` : ''}></doxa-maps-spa>`
@@ -113,7 +139,10 @@ try {
     page.on('requestfailed', q => { const e = (q.failure() && q.failure().errorText) || ''; if (!/ABORTED/.test(e)) note(q.url(), e) })
     await page.goto(`http://localhost:${HOST_PORT}/`)
     const frame = mode === 'iframe' ? await (await page.waitForSelector('iframe')).contentFrame() : page.mainFrame()
-    await frame.waitForFunction(() => { const s = document.querySelector('doxa-maps-spa'); return s && s._instance && s._instance.proxy.tabs.some(t => t.resolved) }, null, { timeout: 30000 })
+    // A gallery that never boots is a named FAIL for this mode, never an uncaught crash: a crash
+    // skips every later mode and the summary, so it reads as "the gate broke" rather than a finding.
+    const booted = await frame.waitForFunction(() => { const s = document.querySelector('doxa-maps-spa'); return s && s._instance && s._instance.proxy.tabs.some(t => t.resolved) }, null, { timeout: 60000 }).then(() => true, () => false)
+    if (!booted) { console.log(`FAIL [${mode}] the gallery did not boot within 60s`); fails.push(`[${mode}] the gallery did not boot within 60s`); await page.close(); continue }
 
     if (mode === 'js') {
       const g = await page.evaluate(() => {
@@ -167,13 +196,61 @@ try {
     for (const f of foreign) console.log(`note [${mode}] third-party request failed (not gated): ${f}`)
     await page.close()
   }
+
+  // ── GOOD-NEIGHBOUR PHASE (script embed only: an iframe has its own document, title and URL) ──
+  // A guest on a partner page must leave the page as it found it. Four rules, each measured after the
+  // gallery loads and again after every tab opens, at PHONE width (where Simple Research is the
+  // default tab, and where a scroll jump on load was measured, 2026-09-25):
+  //   1. the host page does not SCROLL (scrollIntoView on a nested element scrolls every ancestor,
+  //      including the partner's page — a visitor is yanked down to the embed with no action);
+  //   2. the host URL (path, query, #anchor) is unchanged;  3. document.title is unchanged;
+  //   4. the host's inherited typography does not reach the gallery root.
+  if (!argOf('--mode', '') && !ONLY) {
+    mode = 'neighbour'
+    const page = await browser.newPage({ viewport: { width: 390, height: 800 } })
+    const START = `http://localhost:${HOST_PORT}/?page=research#top`
+    await page.goto(START)
+    const booted = await page.waitForFunction(() => { const s = document.querySelector('doxa-maps-spa'); return s && s._instance && s._instance.proxy.tabs.some(t => t.resolved) }, null, { timeout: 60000 }).then(() => true, () => false)
+    if (!booted) { fails.push('[neighbour] the gallery did not boot within 60s'); console.log('FAIL [neighbour] the gallery did not boot within 60s') }
+    await page.waitForTimeout(5000)
+    const look = () => page.evaluate(() => ({ y: Math.round(scrollY), href: location.href, title: document.title, active: document.querySelector('doxa-maps-spa')._instance.proxy.activeKey }))
+    const typo = await page.evaluate(() => { const c = getComputedStyle(document.querySelector('doxa-maps-spa').shadowRoot.querySelector('.vtl')); return { size: c.fontSize, ls: c.letterSpacing, lh: c.lineHeight } })
+    const typoOk = typo.size === '16px' && typo.ls === 'normal' && typo.lh === 'normal'
+    console.log(`${typoOk ? 'PASS' : 'FAIL'} [neighbour] host typography stops at the box — gallery root ${JSON.stringify(typo)}`)
+    if (!typoOk) fails.push(`[neighbour] host typography leaked into the gallery ${JSON.stringify(typo)}`)
+    const judge = (at, v) => {
+      const bad = []
+      if (v.y !== 0) bad.push(['scroll', `host page scrolled to y=${v.y}`])
+      if (v.href !== START) bad.push(['url', `host URL became ${v.href.replace(/^https?:\/\/[^/]+/, '')}`])
+      if (v.title !== NEIGHBOUR_TITLE) bad.push(['title', `host title became "${v.title}"`])
+      for (const [kind, why] of bad) {
+        const known = NEIGHBOUR_KNOWN[`${at}:${kind}`]
+        if (known) console.log(`KNOWN [neighbour] ${at}: ${why} — owner: ${known}`)
+        else { console.log(`FAIL [neighbour] ${at}: ${why}`); fails.push(`[neighbour] ${at}: ${why}`) }
+      }
+      if (!bad.length) console.log(`PASS [neighbour] ${at} leaves the host page alone`)
+      return bad.length
+    }
+    const first = await look()
+    judge(first.active, first)
+    const ids = await page.evaluate(() => document.querySelector('doxa-maps-spa')._instance.proxy.tabs.map(t => t.id))
+    for (const id of ids) {
+      // Reset the host between tabs, so each tab is judged on what IT did, not on a predecessor's.
+      await page.evaluate(({ u, t }) => { scrollTo(0, 0); history.replaceState(null, '', u); document.title = t }, { u: START, t: NEIGHBOUR_TITLE })
+      await page.evaluate(id => document.querySelector('doxa-maps-spa')._instance.proxy.onSelect(id), id)
+      await page.waitForTimeout(4000)
+      judge(id, await look())
+    }
+    checked.neighbour = ids.length
+    await page.close()
+  }
 } finally { await browser.close(); cleanup() }
 
 // ★ A MODE THAT RAN NOTHING HAS NOT PASSED. A flag lost on the way in (package.json once ended
 // this entry in an inline # comment, so an appended --mode landed inside the comment) must not
 // read as "both modes green": each requested mode has to have driven at least one tab.
 for (const m of MODES) if (!checked[m]) fails.push(`[${m}] checked 0 tabs — this mode did not run`)
-const tally = MODES.map(m => `${m} ${checked[m] || 0} tab(s)`).join(', ')
+const tally = [...MODES, ...(checked.neighbour ? ['neighbour'] : [])].map(m => `${m} ${checked[m] || 0} tab(s)`).join(', ')
 if (fails.length) {
   console.log(`\nchecked: ${tally}`)
   console.log(`\ncheck-research-gallery-embed: FAIL (${fails.length})`); for (const f of fails) console.log('  - ' + f)

plugin-designs/doxa-maps-spa/EMBED.md

@@ -59,6 +59,14 @@ document.querySelector('doxa-maps-spa')
   .addEventListener('tab-change', (e) => console.log(e.detail[0].id, e.detail[0].label))
 ```
 
+## A good guest on your page
+
+The gallery is tested to leave its host page as it found it: it does not scroll your page, rewrite
+your URL or `<title>`, or inherit your body typography (a blog's `font: 20px/3` stays outside the
+box). It does add `@font-face` rules and the map engine's stylesheet to your `<head>`; fonts have to
+be declared at document level to reach a shadow root, and the engine styles only target map classes.
+Right-to-left pages keep their direction. `bun run check:gallery-embed` enforces all of this.
+
 ## What the server must send
 
 Both headers are **required** on a host other than the one serving the tree:

plugin-designs/doxa-maps-spa/doxa-maps-spa.vue

@@ -1256,6 +1256,11 @@ export default defineComponent({
       // cannot guess it, and guessing is what produced the original 404 class.
       if (this.base) pc.treeBase = this.base
       if (this.assetsBase) pc.assetsBase = this.assetsBase
+      // THE HOST OWNS ITS URL AND TITLE. A nested map must not write the page's hash, history or
+      // document.title: measured 2026-09-25, opening Regions on a host page stripped the host's own
+      // #anchor and retitled the host's browser tab "Regions". A child that syncs its state into the
+      // URL standalone should read this and stand down; children that never write the URL ignore it.
+      pc.urlSync = false
       return pc
     },
     // The PAGE GLOBALS a generated leaf page bakes and a foreign host page does not — set here, and
@@ -1355,6 +1360,20 @@ export default defineComponent({
    style="height:…" (or any page rule) outranks :host, and --doxa-maps-spa-height tunes it without
    CSS specificity games. */
 :host { display: block; position: relative; height: var(--doxa-maps-spa-height, 85vh); min-height: 480px; }
+/* ★ THE HOST'S TYPOGRAPHY STOPS AT THE BOX. Shadow DOM isolates SELECTORS, not INHERITANCE: every
+   inherited property on the host page flows straight into the gallery and into every nested map.
+   Measured 2026-09-25 on a host with `body{font:20px/3 Georgia; letter-spacing:2px}`: the gallery
+   root computed font-size 20px, line-height 60px, letter-spacing 2px — every rail row and map legend
+   re-flowed by the partner's blog styles. These are reset to the values the gallery is designed
+   against (its own leaf page's defaults). `direction` is deliberately NOT reset, so an RTL host page
+   still lays the gallery out RTL; `all: initial` would have reset it too. Family and colour are set by
+   the layout itself (.vtl). */
+:host {
+  font-size: 16px; line-height: normal; font-weight: 400; font-style: normal; font-variant: normal;
+  font-stretch: normal; letter-spacing: normal; word-spacing: normal; text-transform: none;
+  text-align: start; text-indent: 0; text-shadow: none; white-space: normal; hyphens: manual;
+  visibility: visible; cursor: auto;
+}
 :host([hidden]) { display: none; }
 
 /* The shell (top bar + rail + content frame) is the shared VerticalTabsLayout. Only the PANE-local

public/doxa-maps/doxa-maps-spa/doxa-maps-spa/app/index.html

@@ -26,7 +26,7 @@
 
   <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
   <!-- Bundle IIFE — registers the <doxa-maps-spa> custom element. -->
-  <script src="../../doxa-maps-spa.js" integrity="sha384-j+2dQDsN+9KytIjgxVIRzcpXECccCuZhRT+CXc5B89vbo1IhaB8ogkO2Dc6KM1oy" crossorigin="anonymous"></script>
+  <script src="../../doxa-maps-spa.js" integrity="sha384-0kpyOLYSyDAS7sKrvfh60jFxPqlWP7Gi4ftn1rGwNmEzdSLY9ijkowlKw77v/3Xa" crossorigin="anonymous"></script>
 
   <script>
     // Mapbox token resolution — the A3 ladder, in precedence order:

public/doxa-maps/doxa-maps-spa/doxa-maps-spa/index.html

@@ -26,7 +26,7 @@
 
   <script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
   <!-- Bundle IIFE — registers the <doxa-maps-spa> custom element. -->
-  <script src="../doxa-maps-spa.js" integrity="sha384-j+2dQDsN+9KytIjgxVIRzcpXECccCuZhRT+CXc5B89vbo1IhaB8ogkO2Dc6KM1oy" crossorigin="anonymous"></script>
+  <script src="../doxa-maps-spa.js" integrity="sha384-0kpyOLYSyDAS7sKrvfh60jFxPqlWP7Gi4ftn1rGwNmEzdSLY9ijkowlKw77v/3Xa" crossorigin="anonymous"></script>
 
   <script>
     // Mapbox token resolution — the A3 ladder, in precedence order:

public/doxa-maps/manifest.json

@@ -302,7 +302,7 @@
       "bundle": "doxa-maps-spa",
       "scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
       "output": "doxa-maps/doxa-maps-spa/doxa-maps-spa.js",
-      "integrity": "sha384-j+2dQDsN+9KytIjgxVIRzcpXECccCuZhRT+CXc5B89vbo1IhaB8ogkO2Dc6KM1oy",
+      "integrity": "sha384-0kpyOLYSyDAS7sKrvfh60jFxPqlWP7Gi4ftn1rGwNmEzdSLY9ijkowlKw77v/3Xa",
       "elements": [
         "doxa-maps-spa"
       ],
@@ -327,7 +327,7 @@
           "scriptUrl": "./doxa-maps-spa/doxa-maps-spa.js",
           "embed": {
             "iframe": "<iframe src=\"./doxa-maps-spa/doxa-maps-spa/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=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-j+2dQDsN+9KytIjgxVIRzcpXECccCuZhRT+CXc5B89vbo1IhaB8ogkO2Dc6KM1oy\" crossorigin=\"anonymous\"></script>\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
+            "script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./doxa-maps-spa/doxa-maps-spa.js\" integrity=\"sha384-0kpyOLYSyDAS7sKrvfh60jFxPqlWP7Gi4ftn1rGwNmEzdSLY9ijkowlKw77v/3Xa\" crossorigin=\"anonymous\"></script>\n<doxa-maps-spa profile-config='{\"profile\":\"doxa-maps-spa\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-maps-spa>"
           },
           "instances": [
             {