@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.6

package/bundled-test-harness/assets/choreo-gallery-site-test-BhEBHdvI.js

@@ -0,0 +1,237 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { n as CardContextName } from "./constants-Icc0nFW-.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory, m as htmlSafe } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import "./template-factory-ds9s0u8l.js";
+import { t as templateOnly } from "./template-only-6nVzLWF-.js";
+import "./template-C81fYDrq.js";
+import { r as modifier } from "./dist-nMt-N14r.js";
+import { M as waitUntil, d as click, h as render, o as waitFor } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { nt as provide } from "./mock-matrix-FjsXmU7-.js";
+import { a as liveAll, i as live } from "./test-support-BOFeeYuE.js";
+import "./test-support-BcBv__98.js";
+import { a as setupChoreoGalleryTest, n as GALLERY_DEMOS } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-site-test.gts
+/**
+* The gallery site, whole: the gallery card as the realm serves it — every
+* demo its index links, in that order — rendered isolated, with the palette,
+* the theme switch, and each tile handing its demo card to the host to open.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var THEME_KEY = "choreo-theme";
+var tiles = () => liveAll("[data-gallery-tile]").map((tile) => tile.dataset["galleryTile"]);
+(0, import_qunit.module)("Integration | Choreo gallery | site", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	let storedTheme = null;
+	hooks.beforeEach(async function() {
+		try {
+			storedTheme = globalThis.localStorage.getItem(THEME_KEY);
+			globalThis.localStorage.removeItem(THEME_KEY);
+		} catch {
+			storedTheme = null;
+		}
+	});
+	hooks.afterEach(async function() {
+		let { setThemeMode } = await gallery.import("lib/theme");
+		setThemeMode("dark");
+		try {
+			if (storedTheme === null) globalThis.localStorage.removeItem(THEME_KEY);
+			else globalThis.localStorage.setItem(THEME_KEY, storedTheme);
+		} catch {}
+	});
+	(0, import_qunit.test)("the isolated gallery renders its hero and one tile per linked demo", async function(assert) {
+		await gallery.renderGallery();
+		assert.dom("[data-choreo-site] .hero").exists("the hero is there");
+		assert.dom(".hero h1").includesText("Choreographed", "with its headline");
+		assert.true(GALLERY_DEMOS.length > 0, "the index links demos");
+		assert.deepEqual(tiles(), GALLERY_DEMOS, "one tile per demo the index links, in its order");
+	});
+	(0, import_qunit.test)("the theme toggle switches the site between light and dark", async function(assert) {
+		await gallery.renderGallery();
+		let site = () => document.querySelector(".choreo-site");
+		let appearance = () => document.querySelector(".header-picker:has([role=\"radiogroup\"][aria-label=\"Appearance\"])");
+		let option = (label) => [...appearance().querySelectorAll("button")].find((button) => button.textContent?.trim() === label);
+		assert.strictEqual(site().dataset["theme"], "dark", "dark is the gallery’s default");
+		await click(appearance().querySelector("summary"));
+		await click(option("Light"));
+		assert.strictEqual(site().dataset["theme"], "light", "light, on request");
+		assert.strictEqual(option("Light").getAttribute("aria-checked"), "true", "and the picker says so");
+		await click(option("Dark"));
+		assert.strictEqual(site().dataset["theme"], "dark", "and dark again");
+	});
+	(0, import_qunit.test)("a narrow site keeps its appearance menu inside its bar, and two sites keep their own", async function(assert) {
+		let { SiteFrame } = await gallery.import("shell/site-frame");
+		let narrow = htmlSafe("width: 320px;");
+		let wide = htmlSafe("width: 1000px;");
+		await render(setComponentTemplate(templateFactory({
+			"id": "1+hphNuW",
+			"block": "[[[10,0],[14,0,\"narrow\"],[15,5,[32,0]],[12],[8,[32,1],null,null,null],[13],[1,\"\\n\"],[10,0],[14,0,\"wide\"],[15,5,[32,2]],[12],[8,[32,1],null,null,null],[13]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-site-test.gts",
+			"scope": () => [
+				narrow,
+				SiteFrame,
+				wide
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		let picker = (site) => document.querySelector(`.${site} .header-picker`);
+		for (let site of ["narrow", "wide"]) {
+			await click(picker(site).querySelector("summary"));
+			let bar = document.querySelector(`.${site} .topbar`).getBoundingClientRect();
+			let menu = picker(site).querySelector(".header-picker-menu").getBoundingClientRect();
+			assert.true(menu.left >= bar.left, `${site}: the menu starts inside the bar (${menu.left} against ${bar.left})`);
+			assert.true(menu.right <= bar.right, `${site}: the menu ends inside the bar (${menu.right} against ${bar.right})`);
+			if (site === "narrow") {
+				let topbar = document.querySelector(".narrow .topbar");
+				let scale = bar.width / topbar.offsetWidth;
+				let gutter = parseFloat(getComputedStyle(topbar).paddingLeft);
+				let inset = (menu.left - bar.left) / scale;
+				assert.true(Math.abs(inset - gutter) < 1, `the menu is inset ${inset}px, the bar's ${gutter}px gutter`);
+			}
+		}
+		assert.true(picker("narrow").open, "opening the other site’s picker leaves this one open");
+		assert.true(picker("wide").open, "and that one is open too");
+	});
+	(0, import_qunit.test)("the headline sizes to its site, not the window, as in a host stack", async function(assert) {
+		let demos = await gallery.demos(["keyframes"]);
+		let { ChoreoGallery } = await gallery.import("gallery");
+		let { getComponent } = await gallery.loader.import("@cardstack/base/card-api");
+		let Gallery = getComponent(new ChoreoGallery({
+			demos,
+			cardInfo: await gallery.cardInfo()
+		}));
+		let narrow = htmlSafe("width: 420px;");
+		await render(setComponentTemplate(templateFactory({
+			"id": "G7BCWCQ0",
+			"block": "[[[10,0],[14,0,\"narrow\"],[15,5,[32,0]],[12],[1,\"\\n  \"],[8,[32,1],null,[[\"@format\"],[\"isolated\"]],null],[1,\"\\n\"],[13]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-site-test.gts",
+			"scope": () => [narrow, Gallery],
+			"isStrictMode": true
+		}), templateOnly()));
+		let hero = document.querySelector(".narrow .hero");
+		let size = parseFloat(getComputedStyle(hero.querySelector("h1")).fontSize);
+		assert.true(size <= hero.clientWidth * .175 + .5, `the headline is ${size}px in a ${hero.clientWidth}px hero`);
+	});
+	(0, import_qunit.test)("a tile hands its demo card to the host, which opens it", async function(assert) {
+		let opened = gallery.provideViewCard();
+		await gallery.renderGallery();
+		await waitFor("[data-gallery-tile='keyframes'] .tile-stage");
+		await click(live("[data-gallery-tile='keyframes'] .tile-title"));
+		assert.deepEqual(opened, ["keyframes"], "a click on the tile opens it");
+		await click(live("[data-gallery-tile='keyframes'] .tile-stage"));
+		assert.deepEqual(opened, ["keyframes", "keyframes"], "and so does a click on the picture: the whole tile is the link");
+		let guide = live("[data-gallery-tile='keyframes'] .guide-link");
+		guide.addEventListener("click", (event) => event.preventDefault());
+		await click(guide);
+		assert.strictEqual(opened.length, 2, "the guide link keeps its click");
+		let link = live("[data-gallery-tile='enter'] a.tile-title");
+		assert.strictEqual(link.textContent?.trim(), "Enter", "named for its demo");
+		assert.strictEqual(link.getAttribute("href"), `${testRealmURL}demos/enter`, "and pointing at its card");
+		let navigated;
+		link.addEventListener("click", (event) => {
+			navigated = !event.defaultPrevented;
+		});
+		await click(link);
+		assert.deepEqual(opened, [
+			"keyframes",
+			"keyframes",
+			"enter"
+		], "following the link opens the card through the host");
+		assert.false(navigated, "and the link does not navigate the page itself");
+		assert.dom("[data-gallery-tile] [role=\"link\"], [data-gallery-tile][role=\"link\"]").doesNotExist("the tile holds its links side by side, none inside another");
+		assert.dom("[data-gallery-tile][tabindex]").doesNotExist("and the tile is one stop, its link, not a second");
+		assert.dom(".demo-head").doesNotExist("the gallery never shows a demo page itself");
+	});
+	(0, import_qunit.test)("a tap the stage uses for itself stays with the stage", async function(assert) {
+		let opened = gallery.provideViewCard();
+		await gallery.renderGallery();
+		await waitFor("[data-gallery-tile='slides'] .slide");
+		await waitFor("[data-gallery-tile='drift'] .drift-view");
+		await click(live("[data-gallery-tile='slides'] .slide"));
+		await click(live("[data-gallery-tile='drift'] .drift-view"));
+		assert.deepEqual(opened, [], "a tap that advances the slide or steers the car opens nothing");
+		await click(live("[data-gallery-tile='slides'] .tile-title"));
+		assert.deepEqual(opened, ["slides"], "the rest of the tile still opens it");
+	});
+	(0, import_qunit.test)("a tile with no room for a stage is just the demo’s name", async function(assert) {
+		let [keyframes] = await gallery.demos(["keyframes"]);
+		let { getComponent } = await gallery.loader.import("@cardstack/base/card-api");
+		let Fitted = getComponent(keyframes);
+		let small = htmlSafe("position: relative; width: 260px; height: 80px;");
+		let roomy = htmlSafe("position: relative; width: 420px; height: 540px;");
+		await render(setComponentTemplate(templateFactory({
+			"id": "tG3P2bCc",
+			"block": "[[[10,0],[14,0,\"small\"],[15,5,[32,0]],[12],[8,[32,1],null,[[\"@format\"],[\"fitted\"]],null],[13],[1,\"\\n\"],[10,0],[14,0,\"roomy\"],[15,5,[32,2]],[12],[8,[32,1],null,[[\"@format\"],[\"fitted\"]],null],[13]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-site-test.gts",
+			"scope": () => [
+				small,
+				Fitted,
+				roomy
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await waitFor(".roomy .tile-stage");
+		assert.dom(".small .tile-title").hasText("Keyframes", "the name");
+		assert.dom(".small .tile-stage").doesNotExist("no stage boots");
+		assert.dom(".small .guide-link").doesNotExist("and no guide link");
+		assert.dom(".roomy .tile-lede").exists("with room, what the demo is");
+		assert.dom(".roomy .guide-link").exists("and its guide");
+	});
+	(0, import_qunit.test)("a tile’s name too long for it ends in an ellipsis on a whole line, at every short size the host draws", async function(assert) {
+		let [keyframes] = await gallery.demos(["keyframes"]);
+		keyframes.title = "A demo with a name far too long for any tile the host draws, at any of its sizes, in whichever face the browser sets it";
+		let { getComponent } = await gallery.loader.import("@cardstack/base/card-api");
+		let Fitted = getComponent(keyframes);
+		let sizes = [
+			[150, 40],
+			[250, 40],
+			[150, 65],
+			[250, 65],
+			[400, 65],
+			[150, 105],
+			[250, 105],
+			[180, 120]
+		];
+		let boxes = sizes.map(([width, height]) => htmlSafe(`position: relative; width: ${width}px; height: ${height}px;`));
+		await render(setComponentTemplate(templateFactory({
+			"id": "hKTDWMhA",
+			"block": "[[[42,[28,[31,1],[[28,[31,1],[[32,0]],null]],null],null,[[[1,\"  \"],[10,0],[14,0,\"box\"],[15,5,[30,1]],[12],[8,[32,1],null,[[\"@format\"],[\"fitted\"]],null],[13],[1,\"\\n\"]],[1]],null]],[\"box\"],[\"each\",\"-track-array\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-site-test.gts",
+			"scope": () => [boxes, Fitted],
+			"isStrictMode": true
+		}), templateOnly()));
+		await waitUntil(() => document.querySelectorAll(".box .tile.is-tiny").length === 2);
+		let rendered = Array.from(document.querySelectorAll(".box"));
+		for (let [index, box] of rendered.entries()) {
+			let [width, height] = sizes[index];
+			let title = box.querySelector(".tile-title");
+			let lineHeight = parseFloat(getComputedStyle(title).lineHeight);
+			let lines = Math.max(1, Math.round(title.clientHeight / lineHeight));
+			let scale = box.getBoundingClientRect().height / box.offsetHeight;
+			let bottom = (title.getBoundingClientRect().bottom - box.getBoundingClientRect().top) / scale;
+			assert.true(title.scrollHeight > title.clientHeight, `${width}×${height}: the name runs past what the tile shows`);
+			assert.true(Math.abs(title.clientHeight - lines * lineHeight) < 2, `${width}×${height}: it shows ${lines} whole line(s) (${title.clientHeight}px at ${lineHeight}px a line)`);
+			assert.true(bottom <= height + .5, `${width}×${height}: the last line ends inside the tile (${bottom}px)`);
+		}
+	});
+	(0, import_qunit.test)("where the host opens cards on a click, the tile leaves the click to it", async function(assert) {
+		let overlay = [];
+		provide(CardContextName, { cardComponentModifier: modifier((element) => {
+			let open = (event) => {
+				event.stopPropagation();
+				overlay.push("card");
+			};
+			element.addEventListener("click", open);
+			return () => element.removeEventListener("click", open);
+		}) });
+		let opened = gallery.provideViewCard();
+		await gallery.renderGallery();
+		await waitFor("[data-gallery-tile='keyframes'] .tile-title");
+		await click(live("[data-gallery-tile='keyframes'] .tile-title"));
+		assert.deepEqual(overlay, ["card"], "the host takes the click");
+		assert.deepEqual(opened, [], "and the gallery does not open it again");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-stage-DcKKsdcu.js

@@ -0,0 +1,256 @@
+import "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { r as CardCrudFunctionsContextName } from "./constants-Icc0nFW-.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory, m as htmlSafe } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import "./template-factory-ds9s0u8l.js";
+import { t as templateOnly } from "./template-only-6nVzLWF-.js";
+import { $ as CardContainer } from "./components-Ck24ubaT.js";
+import "./template-C81fYDrq.js";
+import { h as render } from "./dist-BOAdzfkP.js";
+import { F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, nt as provide, t as setupMockMatrix } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { i as setupChoreo } from "./test-support-BcBv__98.js";
+import { vt as setupBaseRealm } from "./base-realm-B17zVqh6.js";
+import { t as choreoGalleryContents } from "./choreo-gallery-DZm1KZ20.js";
+import { t as renderCard } from "./render-component-B15Z0e2v.js";
+//#region tests/helpers/choreo-gallery-stage.gts
+/** a card instance document in the gallery realm, as much as the tests read */
+var CONTENTS = choreoGalleryContents();
+/** an instance document of the gallery realm, by its path: `demos/fold.json` */
+function galleryInstance(path) {
+	return JSON.parse(CONTENTS[path]);
+}
+/** the slugs of the demos the gallery's index links, in the order it links them */
+var GALLERY_DEMOS = Object.entries(galleryInstance("index.json").data.relationships ?? {}).map(([key, { links }]) => ({
+	at: Number(/^demos\.(\d+)$/.exec(key)?.[1] ?? NaN),
+	slug: links.self.replace(/^\.\/demos\//, "")
+})).filter(({ at }) => !Number.isNaN(at)).sort((a, b) => a.at - b.at).map(({ slug }) => slug);
+/**
+* A rendering test over the Choreo gallery realm: the gallery's own source is
+* served from a test realm, and its modules are imported through the loader,
+* so a test exercises the cards the gallery serves and the shimmed
+* glimmer-motion / Choreo the host hands them.
+*/
+function setupChoreoGalleryTest(hooks, opts = {}) {
+	setupRenderingTest(hooks);
+	setupBaseRealm(hooks);
+	setupChoreo(hooks);
+	let loader;
+	let theme;
+	setupLocalIndexing(hooks);
+	setupCardLogs(hooks, async () => await gallery.loader.import("@cardstack/base/card-api"));
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [testRealmURL],
+		autostart: true
+	});
+	hooks.beforeEach(async function() {
+		loader = getService("loader-service").loader;
+		theme = void 0;
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				...choreoGalleryContents(),
+				...opts.contents
+			},
+			skipBootIndex: true
+		});
+	});
+	let gallery = {
+		get loader() {
+			if (!loader) throw new Error("the gallery test realm is set up in beforeEach");
+			return loader;
+		},
+		/**
+		* The gallery's theme card, built from the realm's `theme.json`: the
+		* palette and type every gallery component reads. The cards the helpers
+		* build link it, as the realm's own instances do, and share the one
+		* instance a test builds.
+		*/
+		theme() {
+			theme ??= (async () => {
+				let doc = JSON.parse(CONTENTS["theme.json"]);
+				let { createFromSerialized } = await gallery.loader.import("@cardstack/base/card-api");
+				return await createFromSerialized(doc.data, doc, new URL(`${testRealmURL}theme`));
+			})();
+			return theme;
+		},
+		/** the `cardInfo` of a gallery card: its link to the gallery's theme */ async cardInfo() {
+			let { CardInfoField } = await gallery.loader.import("@cardstack/base/card-api");
+			return new CardInfoField({ theme: await gallery.theme() });
+		},
+		/** a module of the gallery realm, by its path there: `stages/fold` */ async import(path) {
+			return await gallery.loader.import(`${testRealmURL}${path}`);
+		},
+		/**
+		* Render the gallery card, isolated, linking every demo its index links.
+		* The test realm is not indexed, so the card is built from the realm's own
+		* instance documents rather than loaded through the store.
+		*/
+		async renderGallery() {
+			let demos = await gallery.demos();
+			let { ChoreoGallery } = await gallery.import("gallery");
+			await renderCard(gallery.loader, new ChoreoGallery({
+				demos,
+				cardInfo: await gallery.cardInfo()
+			}), "isolated");
+		},
+		/**
+		* Give the cards the test renders the host's `viewCard`, which records
+		* each card it is asked to open, by its slug, in the list it returns.
+		*/
+		provideViewCard() {
+			let opened = [];
+			provide(CardCrudFunctionsContextName, {
+				createCard: () => {},
+				saveCard: () => {},
+				editCard: () => {},
+				deleteCard: async () => {},
+				viewCard: (card) => {
+					opened.push(typeof card === "object" && "slug" in card ? card.slug ?? "" : String(card));
+				}
+			});
+			return opened;
+		},
+		/** Render one demo the index links as its card's page, isolated. */ async renderDemo(slug) {
+			let demo = (await gallery.demos([slug]))[0];
+			await renderCard(gallery.loader, demo, "isolated");
+		},
+		/**
+		* Every demo the gallery's index links, in its order, as card instances
+		* built from the realm's own instance documents.
+		*/
+		async demos(slugs = GALLERY_DEMOS) {
+			let { DemoLesson, WalkthroughStep } = await gallery.import("demo");
+			return await Promise.all(slugs.map(async (slug) => {
+				let { data } = galleryInstance(`demos/${slug}.json`);
+				let { module, name } = data.meta.adoptsFrom;
+				let classes = await gallery.import(module.replace(/^\.\.\//, ""));
+				let { lesson, walkthrough, ...attributes } = data.attributes;
+				return new classes[name]({
+					id: `${testRealmURL}demos/${slug}`,
+					...attributes,
+					cardInfo: await gallery.cardInfo(),
+					lesson: lesson ? new DemoLesson(lesson) : void 0,
+					walkthrough: (walkthrough ?? []).map((step) => new WalkthroughStep(step))
+				});
+			}));
+		},
+		/** a named export of one of the gallery's stage modules */ async stage(slug, name) {
+			let Stage = (await gallery.import(`stages/${slug}`))[name];
+			if (!Stage) throw new Error(`stages/${slug} has no export named ${name}`);
+			return Stage;
+		},
+		/**
+		* Render a stage the way the demo page places it: inside the gallery's
+		* root, under the card container that carries the gallery's theme (its
+		* palette and type), in a well of a fixed size that is the stage's
+		* platter container.
+		*/
+		async renderStage(Stage, { width = 1e3, height = 660 } = {}) {
+			let { ChoreoRoot } = await gallery.import("shell/choreo-root");
+			let theme = await gallery.theme();
+			let themeCss = theme.cssVariables;
+			let cssImports = theme.cssImports;
+			let well = stageWellStyle({
+				width,
+				height
+			});
+			let AnyStage = Stage;
+			await render(setComponentTemplate(templateFactory({
+				"id": "+/tnDilo",
+				"block": "[[[8,[32,0],null,[[\"@isThemed\",\"@themeCss\",\"@themeScope\",\"@cssImports\"],[true,[32,1],\"choreo-gallery-theme\",[32,2]]],[[\"default\"],[[[[1,\"\\n  \"],[8,[32,3],null,null,[[\"default\"],[[[[1,\"\\n    \"],[10,0],[14,0,\"choreo-stage-well\"],[15,5,[32,4]],[12],[1,\"\\n      \"],[8,[32,5],null,[[\"@face\"],[\"stage\"]],null],[1,\"\\n    \"],[13],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+				"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/helpers/choreo-gallery-stage.gts",
+				"scope": () => [
+					CardContainer,
+					themeCss,
+					cssImports,
+					ChoreoRoot,
+					well,
+					AnyStage
+				],
+				"isStrictMode": true
+			}), templateOnly()));
+		}
+	};
+	return gallery;
+}
+/**
+* The style of the well `renderStage` mounts a stage in: a box of a fixed size
+* that is the stage's platter container, as the demo page's well is.
+*/
+function stageWellStyle({ width = 1e3, height = 660 } = {}) {
+	return htmlSafe(`position: relative; width: ${width}px; height: ${height}px; container-name: platter; container-type: size; overflow: clip;`);
+}
+/**
+* Pin the test container to the viewport origin, unscaled, at a fixed size, so
+* a stage lays out at the size it is measured against. The default test page
+* draws the container at half scale, which halves every rectangle a test
+* reads.
+*/
+function setupStageViewport(hooks, { width = 1e3, height = 660 } = {}) {
+	let style;
+	hooks.beforeEach(function() {
+		style = document.createElement("style");
+		style.id = "choreo-stage-viewport";
+		style.textContent = `
+      #ember-testing-container { position: fixed !important; left: 0 !important; top: 0 !important; width: ${width}px !important; height: ${height}px !important; overflow: visible !important; transform: none !important; zoom: 1 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; z-index: 1; }
+      #ember-testing { position: relative !important; width: 100% !important; height: 100% !important; transform: none !important; zoom: 1 !important; margin: 0 !important; padding: 0 !important; }
+    `;
+		document.head.appendChild(style);
+		window.scrollTo(0, 0);
+	});
+	hooks.afterEach(function() {
+		style?.remove();
+		window.scrollTo(0, 0);
+	});
+}
+/**
+* Wait out the next animation frame and then `count` more: `frames(0)` is the
+* next frame. The demos drive their clocks from the frame loop, outside the
+* run loop `settled()` waits on, so a test that needs a demo to have advanced
+* waits on painted frames.
+*/
+function frames(count) {
+	return new Promise((resolve) => {
+		let step = () => count-- <= 0 ? resolve() : requestAnimationFrame(step);
+		requestAnimationFrame(step);
+	});
+}
+function sleep(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var $ = (selector) => document.querySelector(selector);
+/**
+* A pointer event at (x, y) relative to the element's current top-left (its
+* centre when omitted), re-measured for every event. It bubbles to the
+* window, where drag sessions listen for moves and ups.
+*/
+function trigger(target, type, x, y, init = {}) {
+	let el = typeof target === "string" ? $(target) : target;
+	let r = el.getBoundingClientRect();
+	let clientX = r.left + (x ?? r.width / 2);
+	let clientY = r.top + (y ?? r.height / 2);
+	let event = new PointerEvent(type, {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+		view: window,
+		clientX,
+		clientY,
+		screenX: clientX,
+		screenY: clientY,
+		pointerId: 1,
+		pointerType: "mouse",
+		isPrimary: true,
+		button: 0,
+		buttons: type === "pointerdown" || type === "pointermove" ? 1 : 0,
+		...init
+	});
+	el.dispatchEvent(event);
+	return event;
+}
+//#endregion
+export { setupChoreoGalleryTest as a, stageWellStyle as c, galleryInstance as i, trigger as l, GALLERY_DEMOS as n, setupStageViewport as o, frames as r, sleep as s, $ as t };

package/bundled-test-harness/assets/choreo-gallery-stage-keyboard-test-Fcc6SC3F.js

@@ -0,0 +1,102 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { M as waitUntil, c as triggerKeyEvent, d as click, f as focus } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { t as animationsSettled } from "./test-support-BOFeeYuE.js";
+import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-stage-keyboard-test.gts
+/**
+* The stages' keyboard paths: every focusable part of a stage shows the
+* site's focus ring, and what a pointer does on a stage's open surface a
+* key can do too.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+/** the focus ring the browser draws on `el` once it has keyboard focus */
+async function ringOn(el) {
+	await focus(el);
+	let style = getComputedStyle(el);
+	return {
+		focusVisible: el.matches(":focus-visible"),
+		outline: style.outlineStyle,
+		color: style.outlineColor
+	};
+}
+/** the theme's focus color, `--ring`, as it resolves where `el` sits */
+function themeRing(el) {
+	let probe = document.createElement("i");
+	probe.style.color = "var(--ring)";
+	el.parentElement.append(probe);
+	let color = getComputedStyle(probe).color;
+	probe.remove();
+	return color;
+}
+/** the keydown that reaches the document, if a stage lets it through */
+async function keyAtDocument(el, key) {
+	let seen;
+	let listen = (event) => seen = event;
+	document.addEventListener("keydown", listen);
+	try {
+		await triggerKeyEvent(el, "keydown", key);
+	} finally {
+		document.removeEventListener("keydown", listen);
+	}
+	return seen;
+}
+(0, import_qunit.module)("Integration | Choreo gallery | stage keyboard", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	(0, import_qunit.test)("a camera print shows the focus ring", async function(assert) {
+		await gallery.renderStage(await gallery.stage("camera", "Camera"));
+		let print = document.querySelector("[data-test-cam-print]");
+		let ring = await ringOn(print);
+		assert.true(ring.focusVisible, "the print has keyboard focus");
+		assert.notStrictEqual(ring.outline, "none", "the print draws a ring");
+		assert.strictEqual(ring.color, themeRing(print), "the ring is drawn in the theme's --ring");
+	});
+	(0, import_qunit.test)("Escape backs out of a camera dive and returns focus to the print", async function(assert) {
+		await gallery.renderStage(await gallery.stage("camera", "Camera"));
+		let print = document.querySelector("[data-test-cam-print]");
+		assert.strictEqual(print.getAttribute("aria-pressed"), "false");
+		await focus(print);
+		await click(print);
+		await waitUntil(() => document.querySelector("[data-test-cam-love]"));
+		assert.strictEqual(print.getAttribute("aria-pressed"), "true", "the open print reads as pressed");
+		let love = document.querySelector("[data-test-cam-love]");
+		await focus(love);
+		let reached = await keyAtDocument(love, "Escape");
+		await animationsSettled();
+		assert.strictEqual(reached, void 0, "the stage kept the key");
+		assert.dom("[data-test-cam-love]").doesNotExist("the dive closed");
+		assert.strictEqual(print.getAttribute("aria-pressed"), "false");
+		assert.strictEqual(document.activeElement, print, "focus is back on the print that was open");
+	});
+	(0, import_qunit.test)("a pointer dive leaves focus on the print, so Escape backs out of it", async function(assert) {
+		await gallery.renderStage(await gallery.stage("camera", "Camera"));
+		let print = document.querySelector("[data-test-cam-print]");
+		print.dispatchEvent(new MouseEvent("click", {
+			bubbles: true,
+			detail: 1
+		}));
+		await waitUntil(() => document.querySelector("[data-test-cam-love]"));
+		assert.strictEqual(document.activeElement, print, "the open print has focus");
+		assert.false(print.matches(":focus-visible"), "a pointer dive draws no focus ring");
+		let reached = await keyAtDocument(print, "Escape");
+		await animationsSettled();
+		assert.strictEqual(reached, void 0, "the stage kept the key");
+		assert.dom("[data-test-cam-love]").doesNotExist("the dive closed");
+	});
+	(0, import_qunit.test)("Escape with no dive open is left for the host", async function(assert) {
+		await gallery.renderStage(await gallery.stage("camera", "Camera"));
+		let print = document.querySelector("[data-test-cam-print]");
+		await focus(print);
+		let reached = await keyAtDocument(print, "Escape");
+		assert.ok(reached, "the key reaches the host");
+		assert.false(reached.defaultPrevented, "the stage left it alone");
+	});
+	(0, import_qunit.test)("a wires mark and comment show the focus ring", async function(assert) {
+		await gallery.renderStage(await gallery.stage("wires", "Wires"));
+		for (let selector of ["[data-test-wires-mark]", "[data-test-wires-note]"]) {
+			let ring = await ringOn(document.querySelector(selector));
+			assert.true(ring.focusVisible, `${selector} has keyboard focus`);
+			assert.notStrictEqual(ring.outline, "none", `${selector} draws a ring`);
+		}
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-stages-test-Cb-ADpxK.js

@@ -0,0 +1,35 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { T as settled } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { t as choreoGalleryContents } from "./choreo-gallery-DZm1KZ20.js";
+import { a as setupChoreoGalleryTest, r as frames } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-stages-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+/**
+* Every demo in the gallery whose card class supplies a live stage, other than
+* the films (their stage is a frame around a document of its own, covered by
+* the films test).
+*/
+var STAGED = Object.entries(choreoGalleryContents()).filter(([path]) => /^demos\/[^/]+\.json$/.test(path)).map(([, source]) => JSON.parse(source)).filter(({ data }) => data.meta.adoptsFrom.module.startsWith("../stages/") && !data.attributes.theater).map(({ data }) => ({
+	slug: data.attributes.slug,
+	module: data.meta.adoptsFrom.module.replace(/^\.\.\//, ""),
+	name: data.meta.adoptsFrom.name
+})).sort((a, b) => a.slug.localeCompare(b.slug));
+(0, import_qunit.module)("Integration | Choreo gallery | stages", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	for (let demo of STAGED) (0, import_qunit.test)(`the ${demo.slug} stage renders on its own`, async function(assert) {
+		let Stage = (await gallery.import(demo.module))[demo.name]?.stage;
+		assert.ok(Stage, `${demo.module} supplies ${demo.name}.stage`);
+		await gallery.renderStage(Stage);
+		await frames(4);
+		await settled();
+		let well = document.querySelector(".choreo-stage-well");
+		assert.ok(well.querySelector("*"), "the stage put something on the page");
+		let area = Math.max(...[...well.querySelectorAll("*")].map((el) => {
+			let r = el.getBoundingClientRect();
+			return r.width * r.height;
+		}));
+		assert.true(area > 0, `and it has a size (${Math.round(area)}px²)`);
+	});
+});
+//#endregion