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

package/bundled-test-harness/assets/choreo-gallery-navigation-test-CWzXkvbW.js

@@ -0,0 +1,193 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL, Ir as testHostModeRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { t as getOwner } from "./owner-BT6cj890.js";
+import { t as HostModeService } from "./host-mode-service-B4bisRdR.js";
+import { M as waitUntil, T as settled, d as click, k as visit, o as waitFor, y as currentURL } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { F as setupLocalIndexing, I as setupOnSave, ct as setupApplicationTest, j as setupAcceptanceTestRealm, mt as setupAuthEndpoints, st as visitOperatorMode, t as setupMockMatrix, z as setupUserSubscription } from "./mock-matrix-FjsXmU7-.js";
+import { a as choreoGalleryRealmOf } from "./choreo-gallery-DZm1KZ20.js";
+//#region tests/acceptance/choreo-gallery-navigation-test.gts
+/**
+* Moving around the Choreo gallery is the host's: each tile is the demo
+* card's fitted format, so a click opens the demo card in the stack in
+* interact mode and as a stack item of the published site in host mode, and
+* the demo page's pager opens its neighbours the same way.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+/** three light demos, in the order the test gallery links them */
+var DEMOS = [
+	"keyframes",
+	"enter",
+	"stagger"
+];
+var tile = (slug) => `[data-gallery-tile="${slug}"] .tile-title`;
+/** the element the gallery scrolls in, as the stage-resting code finds it */
+function scrollerOf(selector) {
+	let node = document.querySelector(selector)?.parentElement ?? null;
+	while (node) {
+		let { overflowY } = getComputedStyle(node);
+		if (overflowY === "auto" || overflowY === "scroll") return node;
+		node = node.parentElement;
+	}
+	return document.scrollingElement;
+}
+(0, import_qunit.module)("Acceptance | Choreo gallery | navigation in interact mode", function(hooks) {
+	setupApplicationTest(hooks);
+	setupLocalIndexing(hooks);
+	setupOnSave(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [testRealmURL]
+	});
+	hooks.beforeEach(async function() {
+		mockMatrixUtils.createAndJoinRoom({
+			sender: "@testuser:localhost",
+			name: "room-test"
+		});
+		setupUserSubscription();
+		setupAuthEndpoints();
+		await setupAcceptanceTestRealm({
+			mockMatrixUtils,
+			contents: choreoGalleryRealmOf(DEMOS)
+		});
+	});
+	const gallery = `${testRealmURL}index`;
+	const demo = (slug) => `${testRealmURL}demos/${slug}`;
+	const stackCard = (stack, index) => `[data-test-operator-mode-stack="${stack}"] [data-test-stack-card-index="${index}"]`;
+	(0, import_qunit.test)("a tile opens its demo card in the stack, and closing it returns to the grid", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: gallery,
+			format: "isolated"
+		}]] });
+		await waitFor(`${stackCard(0, 0)} ${tile("enter")}`);
+		await click(`${stackCard(0, 0)} ${tile("enter")}`);
+		await waitFor(`${stackCard(0, 1)}[data-test-stack-card="${demo("enter")}"]`);
+		assert.dom(`${stackCard(0, 1)} .demo-head h1`).hasText("Enter", "the demo card opens over the gallery");
+		await click(`${stackCard(0, 1)} [data-test-close-button]`);
+		await waitFor(stackCard(0, 1), { count: 0 });
+		assert.dom(`${stackCard(0, 0)}[data-test-stack-card="${gallery}"]`).exists("the gallery is back on top");
+		assert.dom(`${stackCard(0, 0)} ${tile("enter")}`).exists("with its grid");
+	});
+	(0, import_qunit.test)("closing the demo returns to the grid at the place it was left", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: gallery,
+			format: "isolated"
+		}]] });
+		await waitFor(`${stackCard(0, 0)} ${tile("stagger")}`);
+		let grid = scrollerOf(`${stackCard(0, 0)} [data-gallery-tile]`);
+		let scrolled = new Promise((resolve) => grid.addEventListener("scroll", resolve, { once: true }));
+		document.querySelector(`${stackCard(0, 0)} ${tile("stagger")}`).scrollIntoView({ block: "center" });
+		await scrolled;
+		let left = grid.scrollTop;
+		assert.true(left > 0, `the grid is scrolled (${left}px)`);
+		await click(`${stackCard(0, 0)} ${tile("stagger")}`);
+		await waitFor(`${stackCard(0, 1)} .demo-head h1`);
+		await click(`${stackCard(0, 1)} [data-test-close-button]`);
+		await waitFor(stackCard(0, 1), { count: 0 });
+		await waitUntil(() => grid.scrollTop === left, {
+			timeout: 3e3,
+			timeoutMessage: `the grid stays at ${grid.scrollTop}px`
+		});
+		await settled();
+		assert.strictEqual(grid.scrollTop, left, "the grid is where it was left");
+	});
+	(0, import_qunit.test)("with two stacks, a tile opens its demo in its own stack", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: gallery,
+			format: "isolated"
+		}], [{
+			id: gallery,
+			format: "isolated"
+		}]] });
+		await waitFor(`${stackCard(1, 0)} ${tile("stagger")}`);
+		await click(`${stackCard(1, 0)} ${tile("stagger")}`);
+		await waitFor(`${stackCard(1, 1)}[data-test-stack-card="${demo("stagger")}"]`);
+		assert.dom(stackCard(0, 1)).doesNotExist("the other stack still shows its gallery");
+		await click(`${stackCard(1, 1)} [data-test-close-button]`);
+		await waitFor(stackCard(1, 1), { count: 0 });
+		assert.dom(`${stackCard(1, 0)} ${tile("stagger")}`).exists();
+	});
+	(0, import_qunit.test)("the pager opens the next demo in catalog order", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: demo("keyframes"),
+			format: "isolated"
+		}]] });
+		await waitFor(`${stackCard(0, 0)} .next-demo`);
+		assert.dom(`${stackCard(0, 0)} .next-demo b`).hasText("Enter", "the next demo in the gallery");
+		await click(`${stackCard(0, 0)} .next-demo`);
+		await waitFor(`${stackCard(0, 1)}[data-test-stack-card="${demo("enter")}"]`);
+		assert.dom(`${stackCard(0, 1)} .pager a`).exists({ count: 2 }, "the middle demo pages both ways");
+	});
+});
+var StubHostModeService = class extends HostModeService {
+	get isActive() {
+		return true;
+	}
+	get hostModeOrigin() {
+		return testHostModeRealmURL.replace(/\/test\/?$/, "");
+	}
+};
+(0, import_qunit.module)("Acceptance | Choreo gallery | navigation on a published site", function(hooks) {
+	setupApplicationTest(hooks);
+	setupLocalIndexing(hooks);
+	setupOnSave(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [testHostModeRealmURL]
+	});
+	hooks.beforeEach(async function() {
+		let owner = getOwner(this);
+		owner.unregister?.("service:host-mode-service");
+		owner.register("service:host-mode-service", StubHostModeService);
+		mockMatrixUtils.createAndJoinRoom({
+			sender: "@testuser:localhost",
+			name: "room-test"
+		});
+		setupUserSubscription();
+		setupAuthEndpoints();
+		await setupAcceptanceTestRealm({
+			realmURL: testHostModeRealmURL,
+			mockMatrixUtils,
+			permissions: { "*": ["read"] },
+			contents: choreoGalleryRealmOf(DEMOS)
+		});
+		mockMatrixUtils.setActiveRealms([testHostModeRealmURL]);
+	});
+	const demo = (slug) => `${testHostModeRealmURL}demos/${slug}`;
+	const stackItem = (slug) => `[data-test-host-mode-stack-item="${demo(slug)}"]`;
+	const stackParam = () => new URL(currentURL(), "http://localhost").searchParams.get("hostModeStack");
+	(0, import_qunit.test)("a tile opens its demo with the URL updating, and Back returns to the grid", async function(assert) {
+		await visit("/test");
+		await waitFor(tile("enter"));
+		await click(tile("enter"));
+		await waitFor(`${stackItem("enter")} .demo-head h1`);
+		assert.dom(`${stackItem("enter")} .demo-head h1`).hasText("Enter");
+		assert.strictEqual(stackParam(), JSON.stringify([demo("enter")]), "the URL names the open demo");
+		await visit("/test");
+		await waitFor(stackItem("enter"), { count: 0 });
+		assert.strictEqual(stackParam(), null, "the URL is the gallery again");
+		assert.dom(tile("enter")).exists("and the grid is what shows");
+	});
+	(0, import_qunit.test)("Back returns to the grid at the place it was left", async function(assert) {
+		await visit("/test");
+		await waitFor(tile("stagger"));
+		document.querySelector(tile("stagger")).scrollIntoView({ block: "center" });
+		let left = scrollerOf("[data-gallery-tile]").scrollTop;
+		assert.true(left > 0, `the grid is scrolled (${left}px)`);
+		await click(tile("stagger"));
+		await waitFor(`${stackItem("stagger")} .demo-head h1`);
+		await visit("/test");
+		await waitFor(stackItem("stagger"), { count: 0 });
+		await settled();
+		assert.strictEqual(scrollerOf("[data-gallery-tile]").scrollTop, left, "the grid is where it was left");
+	});
+	(0, import_qunit.test)("a demo's URL loads that demo directly, and its pager opens the next", async function(assert) {
+		await visit(`/test?hostModeStack=${encodeURIComponent(JSON.stringify([demo("keyframes")]))}`);
+		await waitFor(`${stackItem("keyframes")} .demo-head h1`);
+		assert.dom(`${stackItem("keyframes")} .demo-head h1`).hasText("Keyframes");
+		await waitFor(`${stackItem("keyframes")} .next-demo`);
+		await click(`${stackItem("keyframes")} .next-demo`);
+		await waitFor(`${stackItem("enter")} .demo-head h1`);
+		assert.strictEqual(stackParam(), JSON.stringify([demo("keyframes"), demo("enter")]), "the next demo stacks over it, in the URL too");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-playhead-transport-test-CwdiZWeI.js

@@ -0,0 +1,111 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { M as waitUntil, T as settled } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { a as setupChoreoGalleryTest, r as frames } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-playhead-transport-test.gts
+/**
+* The Playhead demo on `c.run` — the score is a <c.Sequence>, the presses
+* are named dips of the hand, and the transport folds the app's state from
+* the presses behind the playhead. The old private sampler is gone; these
+* pin what replaced it.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+function run() {
+	return document.querySelector(".ph-stage")?.playhead?.c?.run ?? null;
+}
+function styleOf(selector) {
+	return document.querySelector(selector)?.getAttribute("style") ?? "";
+}
+function scrubTo(seconds) {
+	const range = document.querySelector(".ph-range");
+	range.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+	range.value = String(seconds);
+	range.dispatchEvent(new Event("input", { bubbles: true }));
+	range.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+}
+(0, import_qunit.module)("Integration | Choreo gallery | playhead transport", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	let Playhead;
+	hooks.beforeEach(async function() {
+		Playhead = await gallery.stage("playhead", "Playhead");
+	});
+	(0, import_qunit.test)("the parked opening, a scrub, and the fold", async function(assert) {
+		await gallery.renderStage(Playhead);
+		await waitUntil(() => run() != null, { timeout: 4e3 });
+		await frames(6);
+		const r = run();
+		assert.ok(Math.abs(r.duration - 6.16) < .05, `the score compiles to its full length — ${r.duration.toFixed(2)}s`);
+		assert.ok(r.time < .2, `parked near zero, waiting for Play — at ${r.time.toFixed(2)}`);
+		assert.strictEqual(document.querySelectorAll(".ph-mark").length, 4, "four press marks, read back from the compiled cues");
+		scrubTo(3.9);
+		await frames(6);
+		assert.true(styleOf(".ph-pill").includes("127"), `the pill sits at Express — got '${styleOf(".ph-pill")}'`);
+		assert.true(styleOf(".ph-receipt").includes("opacity: 1"), `the receipt is up — got '${styleOf(".ph-receipt")}'`);
+		assert.dom("[data-cue=\"express\"]").hasClass("is-on");
+		assert.dom("[data-cue=\"wrap\"]").hasAttribute("aria-pressed", "true");
+		scrubTo(.2);
+		await frames(6);
+		assert.false(styleOf(".ph-pill").includes("127"), `the pill is home again — got '${styleOf(".ph-pill")}'`);
+		assert.true(styleOf(".ph-receipt").includes("opacity: 0"), `the receipt is down — got '${styleOf(".ph-receipt")}'`);
+		assert.dom("[data-cue=\"standard\"]").hasClass("is-on");
+		run()?.cancel();
+		await settled();
+	});
+	(0, import_qunit.test)("played, paused mid-flight, scrubbed home: the whole scene rewinds", async function(assert) {
+		await gallery.renderStage(Playhead);
+		await waitUntil(() => run() != null, { timeout: 4e3 });
+		await frames(6);
+		document.querySelector(".ph-play").click();
+		await waitUntil(() => (run()?.time ?? 0) > 5.1, { timeout: 9e3 });
+		document.querySelector(".ph-play").click();
+		await frames(2);
+		scrubTo(0);
+		await frames(6);
+		const r = run();
+		assert.ok(r.time < .05, `the playhead stands at zero (${r.time.toFixed(2)})`);
+		assert.true(styleOf(".ph-receipt").includes("opacity: 0"), `the receipt rewinds away — got '${styleOf(".ph-receipt")}'`);
+		assert.strictEqual(getComputedStyle(document.querySelector(".ph-receipt")).opacity, "0", "the receipt is invisible on screen, not just in the attribute");
+		const walk = r.cues.filter((cue) => cue.sprite.id === "hand" && Array.isArray(cue.target?.x)).sort((a, b) => a.start - b.start)[0];
+		const home = {
+			x: walk.target.x[0],
+			y: walk.target.y[0]
+		};
+		const hand = document.querySelector(".ph-hand")?.style.transform ?? "";
+		const atHome = hand.includes(`translateX(${home.x}px)`) && hand.includes(`translateY(${home.y}px)`);
+		assert.true(atHome, `the hand waits at home again — got '${hand}', home (${home.x}, ${home.y})`);
+		run()?.cancel();
+		await settled();
+	});
+	(0, import_qunit.test)("played to the end, the park is clean: nothing resurrected stands", async function(assert) {
+		await gallery.renderStage(Playhead);
+		await waitUntil(() => run() != null, { timeout: 4e3 });
+		await frames(6);
+		document.querySelector(".ph-play").click();
+		await waitUntil(() => (run()?.time ?? 0) > 6.1, { timeout: 12e3 });
+		await frames(8);
+		const receipt = document.querySelector(".ph-receipt");
+		assert.strictEqual(getComputedStyle(receipt).opacity, "0", "at the park, the dialog is gone on SCREEN — done pressed it away");
+		assert.strictEqual(receipt.getAnimations().length, 0, "no stale animation stands on the receipt at the park");
+		run()?.cancel();
+		await settled();
+	});
+	(0, import_qunit.test)("playing dispatches real clicks; a live hand takes the scene", async function(assert) {
+		await gallery.renderStage(Playhead);
+		await waitUntil(() => run() != null, { timeout: 4e3 });
+		await frames(6);
+		document.querySelector(".ph-play").click();
+		await waitUntil(() => document.querySelector("[data-cue=\"express\"]")?.classList.contains("is-on") ?? false, { timeout: 4e3 });
+		assert.dom("[data-cue=\"express\"]").hasClass("is-on");
+		document.querySelector("[data-cue=\"standard\"]").click();
+		await frames(4);
+		assert.dom(".ph-transport").hasClass("is-off", "the transport steps aside for a live hand");
+		assert.dom("[data-cue=\"standard\"]").hasClass("is-on");
+		scrubTo(2);
+		await waitUntil(() => !(document.querySelector(".ph-transport")?.classList.contains("is-off") ?? true), { timeout: 4e3 });
+		await frames(8);
+		assert.dom("[data-cue=\"express\"]").hasClass("is-on");
+		assert.true(styleOf(".ph-pill").includes("127"), `the score's answer at 2.0s stands — got '${styleOf(".ph-pill")}'`);
+		run()?.cancel();
+		await settled();
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-poplayout-subtree-test-D55fxwTn.js

@@ -0,0 +1,127 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory, S as on, m as htmlSafe } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./modifier-D0EP-FQ7.js";
+import "./component-BJO47HTh.js";
+import { n as tracked } from "./tracking-800VJb8b.js";
+import "./template-factory-ds9s0u8l.js";
+import { t as templateOnly } from "./template-only-6nVzLWF-.js";
+import "./template-C81fYDrq.js";
+import { M as waitUntil, d as click, h as render } from "./dist-BOAdzfkP.js";
+import { rn as whatIsBusy, t as LayoutGroup } from "./layout-group-BS0gklZp.js";
+import "./src-CbBcj3xm.js";
+import { t as MotionModifier } from "./motion-BiMvMS08.js";
+import { t as Presence } from "./presence-BKkR2au7.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import "./test-support-BOFeeYuE.js";
+import { a as setupChoreoGalleryTest, c as stageWellStyle, o as setupStageViewport, s as sleep } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-poplayout-subtree-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var keyOf = (demo) => demo.slug;
+var gone = {
+	opacity: 0,
+	scale: .96
+};
+var here = {
+	opacity: 1,
+	scale: 1
+};
+var leaves = {
+	opacity: 0,
+	scale: .96
+};
+var quick = {
+	bounce: .12,
+	type: "spring",
+	visualDuration: .42
+};
+/** the size of the grid's window onto the tiles, and of each tile's stage */
+var VIEW = {
+	width: 1e3,
+	height: 660
+};
+var tileWell = stageWellStyle({
+	width: 400,
+	height: 400
+});
+var Shown = class {
+	static {
+		decorateFieldV2(this.prototype, "group", [tracked]);
+	}
+	#group = (initializeDeferredDecorator(this, "group"), void 0);
+	constructor(catalog) {
+		this.catalog = catalog;
+	}
+	/** the gallery's shape: a getter, so every read is a NEW array and
+	*  <Presence> re-diffs on every render rather than only when items change */
+	get demos() {
+		return this.group ? this.catalog.filter((demo) => demo.group === this.group) : this.catalog.slice();
+	}
+	/** the gallery changes the filter from inside a click handler, not from a
+	*  bare assignment: the runloop flush is not the same shape */
+	narrow = () => {
+		this.group = "Drag";
+	};
+};
+/**
+* Wait for the DOM to reach the shape under test, rather than sleeping and
+* hoping. The failure it falls through to names the stuck leavers, which is
+* the diagnostic this test exists to give.
+*/
+function until(count) {
+	return waitUntil(() => document.querySelectorAll("[data-test-demo]").length === count, { timeout: 8e3 }).catch(() => {});
+}
+/**
+* The grid lays every tile out at full size and draws the whole of it at a
+* quarter scale, so all of them are on screen at once. A demo that starts its
+* score once it is seen, and drives its run from a frame loop that stops when
+* it is scrolled away, only holds that run while it is visible, so the filter
+* has to fire with every tile in view.
+*/
+var gridStyle = htmlSafe("position: relative; display: flex; flex-wrap: wrap; width: 4000px; transform: scale(0.25); transform-origin: 0 0;");
+(0, import_qunit.module)("Integration | Choreo gallery | popLayout subtree", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	setupStageViewport(hooks, VIEW);
+	(0, import_qunit.test)("a leaver whose subtree is a whole demo is removed from the DOM", async function(assert) {
+		let catalog = await gallery.demos();
+		let state = new Shown(catalog);
+		let { DemoStage } = await gallery.import("shell/demo-stage");
+		let { ChoreoRoot } = await gallery.import("shell/choreo-root");
+		await render(setComponentTemplate(templateFactory({
+			"id": "JIKsgyIk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[11,\"button\"],[24,\"data-test-narrow\",\"\"],[24,4,\"button\"],[4,[32,1],[\"click\",[32,2,[\"narrow\"]]],null],[12],[1,\"\\n    Drag\\n  \"],[13],[1,\"\\n  \"],[8,[32,3],null,null,[[\"default\"],[[[[1,\"\\n    \"],[10,0],[14,0,\"grid\"],[15,5,[32,4]],[12],[1,\"\\n      \"],[8,[32,5],null,[[\"@items\",\"@key\",\"@mode\",\"@initial\"],[[32,2,[\"demos\"]],[32,6],\"popLayout\",false]],[[\"default\"],[[[[1,\"\\n        \"],[11,\"article\"],[16,\"data-test-demo\",[30,1,[\"slug\"]]],[4,[32,7],null,[[\"presence\",\"layout\",\"initial\",\"animate\",\"exit\",\"transition\"],[[30,2],true,[32,8],[32,9],[32,10],[32,11]]]],[12],[1,\"\\n          \"],[10,0],[15,5,[32,12]],[12],[1,\"\\n            \"],[8,[32,13],null,[[\"@demo\",\"@face\"],[[30,1],\"tile\"]],null],[1,\"\\n          \"],[13],[1,\"\\n        \"],[13],[1,\"\\n      \"]],[1,2]]]]],[1,\"\\n    \"],[13],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[\"demo\",\"h\"],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-poplayout-subtree-test.gts",
+			"scope": () => [
+				ChoreoRoot,
+				on,
+				state,
+				LayoutGroup,
+				gridStyle,
+				Presence,
+				keyOf,
+				MotionModifier,
+				gone,
+				here,
+				leaves,
+				quick,
+				tileWell,
+				DemoStage
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await until(catalog.length);
+		assert.strictEqual(document.querySelectorAll("[data-test-demo]").length, catalog.length, "everything is up");
+		const heldRuns = () => whatIsBusy().filter((reason) => reason.endsWith("run in flight"));
+		await waitUntil(() => heldRuns().length > 0, { timeout: 8e3 }).catch(() => {});
+		assert.ok(heldRuns().length > 0, "some demo is holding a run when the filter fires");
+		let drag = catalog.filter((demo) => demo.group === "Drag");
+		await click("[data-test-narrow]");
+		await until(drag.length);
+		await sleep(300);
+		let kept = new Set(drag.map(keyOf));
+		let stuck = [...document.querySelectorAll("[data-test-demo]")].map((el) => el.dataset["testDemo"]).filter((slug) => !kept.has(slug));
+		assert.deepEqual(stuck, [], "every leaver has left the DOM");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-presence-modes-test-D8Wxv0lb.js

@@ -0,0 +1,100 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { a as find, d as click } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { n as bounds, t as animationsSettled } from "./test-support-BOFeeYuE.js";
+import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-presence-modes-test.gts
+/**
+* What `sync` actually does to the layout — asserted, because it reads as a
+* bug and is not one.
+*
+* In `sync` both notices are mounted at once and the leaver stays IN FLOW for
+* the whole of its exit, so the newcomer is laid out BELOW it and then rises
+* as the leaver unmounts. Every time someone watches this demo they report
+* the newcomer "starting lower instead of at the same level" — which is the
+* mode working, and is the entire difference between it and `popLayout`,
+* where the leaver leaves flow immediately and the newcomer is already home.
+*
+* There was no coverage of this, so the question had to be re-answered from
+* the prose each time. These three cases answer it from the DOM instead.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+/** the slot for one mode, in the order the demo renders them */ var SLOT = {
+	popLayout: 2,
+	sync: 0,
+	wait: 1
+};
+function slot(which) {
+	return document.querySelectorAll(".mode-slot")[SLOT[which]];
+}
+/**
+* Every notice in that slot, top-first, as { title, top } within the slot —
+* where `top` is the LAYOUT position, not the painted one.
+*
+* `offsetTop`, deliberately, not `bounds()`. A notice enters with
+* `initial={ y: 18 }`, so its rect is offset by however much of that entrance
+* has played, and a first attempt at this file read that transform as a
+* layout difference and called popLayout broken. The question here is where
+* the box was PUT; the transform on top of it is a separate one.
+*/
+function notices(which) {
+	const box = slot(which);
+	return [...box.querySelectorAll(".toast")].map((el) => ({
+		title: el.querySelector("b")?.textContent?.trim() ?? "",
+		top: el.offsetTop - box.offsetTop
+	}));
+}
+async function mount() {
+	await gallery.renderStage(PresenceModes);
+	await animationsSettled();
+}
+/** swap the notice, and look BEFORE anything settles */
+async function swapAndPeek() {
+	await click([...document.querySelectorAll("button")].find((b) => b.textContent?.trim() === "Switch"));
+}
+var gallery;
+var PresenceModes;
+(0, import_qunit.module)("Integration | Choreo gallery | presence modes", function(hooks) {
+	gallery = setupChoreoGalleryTest(hooks);
+	hooks.beforeEach(async function() {
+		PresenceModes = await gallery.stage("presence", "PresenceModes");
+	});
+	(0, import_qunit.test)("sync holds both notices, and the newcomer is laid out below the leaver", async function(assert) {
+		await mount();
+		assert.deepEqual(notices("sync").map((n) => n.title), ["Build passed"], "one notice at rest");
+		await swapAndPeek();
+		const mid = notices("sync");
+		assert.strictEqual(mid.length, 2, "both are mounted during the exit");
+		assert.deepEqual(mid.map((n) => n.title), ["Build passed", "Tests failed"], "the leaver is still first in flow");
+		assert.true(mid[1].top > mid[0].top, `the newcomer starts BELOW the leaver — this is sync, not a bug ${JSON.stringify(mid)}`);
+		await animationsSettled();
+		const after = notices("sync");
+		assert.deepEqual(after.map((n) => n.title), ["Tests failed"], "the leaver unmounts");
+		assert.strictEqual(after[0].top, mid[0].top, "and the newcomer has risen into the place the leaver held");
+	});
+	(0, import_qunit.test)("popLayout is the mode where the newcomer is already home", async function(assert) {
+		await mount();
+		const restingTop = notices("popLayout")[0].top;
+		await swapAndPeek();
+		const mid = notices("popLayout");
+		const arriving = mid.find((n) => n.title === "Tests failed");
+		assert.ok(arriving, "the newcomer is mounted");
+		assert.strictEqual(arriving.top, restingTop, `the leaver left flow, so the newcomer takes its place immediately ${JSON.stringify(mid)}`);
+	});
+	(0, import_qunit.test)("wait mounts the newcomer only once the leaver is gone", async function(assert) {
+		await mount();
+		await swapAndPeek();
+		assert.deepEqual(notices("wait").map((n) => n.title), ["Build passed"], "the leaver is still alone: nothing enters until it has left");
+		await animationsSettled();
+		assert.deepEqual(notices("wait").map((n) => n.title), ["Tests failed"], "then the newcomer arrives");
+	});
+	(0, import_qunit.test)("the frame does not resize when sync briefly holds two", async function(assert) {
+		await mount();
+		const before = bounds(slot("sync"));
+		await swapAndPeek();
+		const during = bounds(slot("sync"));
+		assert.strictEqual(during.height, before.height, "the slot is a fixed height so the three modes stay comparable");
+		const rest = find(".mode-slot .mode-rest");
+		assert.ok(rest, "the \"Up next\" marker is what moves");
+	});
+});
+//#endregion