From 3a2cf0e8f278f20b22f0d78503c67504ed554f9c Mon Sep 17 00:00:00 2001
From: doxa-maps-88655c70
<88627970+doxa-maps-88655c70@users.noreply.github.com>
Date: Thu, 24 Sep 2026 19:03:37 +0000
Subject: [PATCH] Research Gallery: embed on someone else's page, in both modes
The gallery is going onto the DX-life research page, and nothing had tried
it on a page it didn't generate. From a second origin, a bare
`
+ return `host
+
+${embed}`
+}
+const tree = spawn(process.execPath, ['internal/serve-strict.mjs', '--port', String(TREE_PORT)], { cwd: ROOT, stdio: 'ignore' })
+const host = createServer((_, r) => { r.writeHead(200, { 'content-type': 'text/html' }); r.end(hostPage()) }).listen(HOST_PORT, 'localhost')
+const cleanup = () => { try { tree.kill() } catch {} try { host.close() } catch {} }
+await new Promise(r => setTimeout(r, 800))
+
+const browser = await chromium.launch({ args: ['--enable-unsafe-swiftshader', '--use-gl=angle', '--use-angle=swiftshader'] })
+const fails = []
+try {
+ for (mode of MODES) {
+ const page = await browser.newPage({ viewport: { width: 1400, height: 900 } })
+ const own = new Set(), foreign = new Set()
+ const note = (url, why) => (url.startsWith(`http://127.0.0.1:${TREE_PORT}/`) ? own : foreign).add(why + ' ' + url.split('?')[0])
+ page.on('response', r => { if (r.status() >= 400) note(r.url(), String(r.status())) })
+ 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 })
+
+ if (mode === 'js') {
+ const g = await page.evaluate(() => {
+ const s = document.querySelector('doxa-maps-spa'), v = s.shadowRoot.querySelector('.vtl')
+ const a = s.getBoundingClientRect(), b = v.getBoundingClientRect()
+ return { host: [a.top, a.left, a.width, a.height].map(Math.round), vtl: [b.top, b.left, b.width, b.height].map(Math.round) }
+ })
+ const inside = g.vtl[0] >= g.host[0] - 1 && g.vtl[1] >= g.host[1] - 1 && g.vtl[2] <= g.host[2] + 1 && g.vtl[3] <= g.host[3] + 1 && g.host[3] >= 400
+ console.log(`${inside ? 'PASS' : 'FAIL'} [js] layout inside the host box — host ${g.host} layout ${g.vtl}`)
+ if (!inside) fails.push(`[js] layout escaped the box (host ${g.host}, layout ${g.vtl})`)
+ }
+
+ const tabs = await frame.evaluate(() => document.querySelector('doxa-maps-spa')._instance.proxy.tabs.map(t => ({ id: t.id, discovered: !!t.discovered })))
+ for (const { id, discovered } of tabs) {
+ if (ONLY && !ONLY.includes(id)) continue
+ await frame.evaluate(id => document.querySelector('doxa-maps-spa')._instance.proxy.onSelect(id), id)
+ let v
+ for (let k = 0; k < 50; k++) {
+ await page.waitForTimeout(400)
+ v = await frame.evaluate(id => {
+ const vm = document.querySelector('doxa-maps-spa')._instance.proxy
+ const i = vm.tabs.findIndex(x => x.id === id), t = vm.tabs[i]
+ const el = vm._slots && vm._slots[i] && vm._slots[i].firstElementChild
+ let canvas = 0
+ const walk = r => { for (const n of r.querySelectorAll('*')) { if (n.tagName === 'CANVAS') canvas++; if (n.shadowRoot) walk(n.shadowRoot) } }
+ if (el) { walk(el); if (el.shadowRoot) walk(el.shadowRoot) }
+ return { state: t.state, error: t.error, canvas }
+ }, id)
+ if (v.state === 'error' || (v.state === 'ready' && (v.canvas || discovered && k > 5))) break
+ }
+ const needCanvas = !discovered
+ const ok = v.state === 'ready' && (!needCanvas || v.canvas > 0)
+ const why = v.state !== 'ready' ? `state ${v.state}${v.error ? ' — ' + v.error : ''}` : (needCanvas && !v.canvas ? 'mounted but painted no map canvas' : '')
+ console.log(`${ok ? 'PASS' : 'FAIL'} [${mode}] ${id}${why ? ' — ' + why : ''}`)
+ if (!ok) fails.push(`[${mode}] ${id}: ${why}`)
+ }
+ for (const f of own) { console.log(`FAIL [${mode}] tree request failed: ${f}`); fails.push(`[${mode}] ${f}`) }
+ for (const f of foreign) console.log(`note [${mode}] third-party request failed (not gated): ${f}`)
+ await page.close()
+ }
+} finally { await browser.close(); cleanup() }
+
+if (fails.length) {
+ console.log(`\ncheck-research-gallery-embed: FAIL (${fails.length})`); for (const f of fails) console.log(' - ' + f)
+ process.exit(1)
+}
+console.log('\ncheck-research-gallery-embed: PASS — the Research Gallery embeds on a foreign origin in ' + MODES.join(' + ') + ' mode')
diff --git a/internal/generate-tree.mjs b/internal/generate-tree.mjs
index 03ce1a3a5..0c55e4d6c 100644
--- a/internal/generate-tree.mjs
+++ b/internal/generate-tree.mjs
@@ -1233,6 +1233,16 @@ function writeManifestAndHtml(root, bundles, tokenUrlExpr, bakedToken) {
embedBase: EMBED_BASE,
bundleCount: bundles.length,
profileCount: bundles.reduce((n, b) => n + b.profiles.length, 0),
+ // THE PAGE GLOBALS A LEAF PAGE BAKES, published for embeds that have no leaf page. A composed
+ // surface (the cap-5 Research Gallery) mounted by `
+
+```
+
+That is the whole embed. The element finds its tree from its own `