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

package/bundled-test-harness/assets/choreo-gallery-subdivision-test-BZ9-cDFh.js

@@ -0,0 +1,138 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { M as waitUntil, a as find, l as triggerEvent } from "./dist-BOAdzfkP.js";
+import { rn as whatIsBusy, tn as isMotionIdle } from "./layout-group-BS0gklZp.js";
+import "./src-CbBcj3xm.js";
+import { i as setMotionSpeed } from "./speed-bIo0tyrM.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-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-subdivision-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+/**
+* The demo sizes itself in CONTAINER units — `.ex` is the query container
+* and `.subdivide` is `min(92cqw, 340px)` wide — so rendered bare it
+* inherits whatever box the ambient test container happens to have. Wrap
+* it in a stage of its own, big enough that both the width and the height
+* clamp to the demo's own maxima.
+*
+* Every query is scoped to that fixture. A document-wide `.sub-tile` is
+* how this test used to report `{ before: 48, after: 48 }` — a collapsed
+* leftover, not the grid the seam actually moved.
+*
+* WHY THIS FILE IS PARANOID ABOUT TIME
+* It used to fail only in a loaded full suite and pass alone, which is the
+* signature of a test racing the clock rather than testing behaviour. Two
+* things caused it, and both are fixed here rather than papered over with a
+* longer sleep:
+*
+*   The fixture was measured as soon as `animationsSettled()` returned, but
+*   settled means "nothing is animating", not "the container query has
+*   resolved and the grid has a width". On a busy machine the first
+*   measurement could land on a collapsed grid, and a width that never
+*   changed reads exactly like a seam that did not move.
+*
+*   The "springs rather than snaps" case asserted that an animation was in
+*   flight one frame after the double-click. At 1x that is a coin toss under
+*   load: the spring can finish inside the gap. `setMotionSpeed` stretches
+*   the transition so being mid-flight is a fact rather than a hope — the
+*   speed is reset for us by `setupMotion`'s beforeEach.
+*
+* A third cause outlived both, and it was not this file's fault: this test
+* reads its geometry out of the demo's own stylesheet, so a window in which
+* that stylesheet is out of the cascade measures an untouched `button` —
+* 95x21 — rather than the grid. `stageCss` is reported below so that a
+* fourth cause has to name itself.
+*/
+async function mount() {
+	await gallery.renderStage(Subdivision, {
+		width: 600,
+		height: 500
+	});
+	await animationsSettled();
+	const stage = find(".choreo-stage-well");
+	await waitUntil(() => {
+		const t = stage.querySelector("[data-test-tile=\"atlas\"]");
+		if (!t) return false;
+		const box = t.getBoundingClientRect();
+		return box.width > 20 && box.height > 20;
+	}, { timeout: 4e3 }).catch(() => {});
+	const root = stage.querySelector("[data-test-subdivision]");
+	const grid = root?.querySelector("[data-test-grid]");
+	const tile = root?.querySelector("[data-test-tile=\"atlas\"]");
+	return {
+		grid,
+		root,
+		seam: root?.querySelector("[data-test-seam=\"col\"]"),
+		stage,
+		tile
+	};
+}
+/**
+* whether the stage's scoped stylesheet is in the cascade at all: `.ex` is
+* `absolute` there and `static` everywhere else, so one computed value
+* separates "the demo laid out wrong" from "the demo had no CSS".
+*/
+function stageCss(root) {
+	return root ? getComputedStyle(root).position : "(no root)";
+}
+function report(parts) {
+	return JSON.stringify(parts);
+}
+var gallery;
+var Subdivision;
+(0, import_qunit.module)("Integration | Choreo gallery | subdivision", function(hooks) {
+	gallery = setupChoreoGalleryTest(hooks);
+	hooks.beforeEach(async function() {
+		Subdivision = await gallery.stage("subdivision", "Subdivision");
+	});
+	(0, import_qunit.test)("evening a seam commits a new column split", async function(assert) {
+		const { grid, root, seam, stage, tile } = await mount();
+		const mounted = Boolean(grid && tile && seam);
+		assert.true(mounted, "the fixture mounted its grid, tile, seam");
+		if (!grid || !tile || !seam) throw new Error("the fixture has no grid, tile or seam to measure");
+		const tileBox = bounds(tile);
+		const real = tileBox.width > 20 && tileBox.height > 20;
+		assert.true(real, `the demo came up with real tiles ${report({
+			grid: bounds(grid),
+			stage: bounds(stage),
+			stageCss: stageCss(root),
+			tile: tileBox
+		})}`);
+		assert.true(grid.contains(tile), "the measured tile belongs to this fixture’s grid");
+		const before = bounds(tile);
+		await triggerEvent(seam, "dblclick");
+		await animationsSettled();
+		const after = bounds(tile);
+		assert.true(Math.abs(after.width - before.width) > 8, `the tile resizes ${report({
+			after,
+			before,
+			grid: bounds(grid),
+			stage: bounds(stage),
+			stageCss: stageCss(root),
+			tileConnected: tile.isConnected
+		})}`);
+	});
+	(0, import_qunit.test)("evening a seam springs the tiles rather than snapping them", async function(assert) {
+		const { seam, tile } = await mount();
+		const mounted = Boolean(tile && seam);
+		assert.true(mounted, "the fixture mounted its tile and seam");
+		if (!tile || !seam) throw new Error("the fixture has no tile or seam to measure");
+		setMotionSpeed(8);
+		try {
+			await triggerEvent(seam, "dblclick");
+			if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+				let started = false;
+				await waitUntil(() => {
+					started ||= !isMotionIdle();
+					return started;
+				}, { timeout: 2e3 }).catch(() => void 0);
+				assert.true(started, `the seam animated rather than snapping: ${whatIsBusy().join("; ") || "(nothing ever reported busy)"}`);
+			}
+			await animationsSettled({ timeout: 12e3 });
+			assert.true(isMotionIdle(), "the spring finishes");
+		} finally {
+			setMotionSpeed(1);
+		}
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-table-plan-test-7uP6mZpo.js

@@ -0,0 +1,144 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { a as setupChoreoGalleryTest, l as trigger, o as setupStageViewport, r as frames, s as sleep, t as $ } from "./choreo-gallery-stage-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-table-plan-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var CARD = ".tp-card";
+var GRIP = ".tp-grip";
+var TABLE = ".tp-table";
+var seats = () => document.querySelectorAll(".tp-seat").length;
+var cards = () => document.querySelectorAll(CARD).length;
+var tally = () => $(".tp-tally").textContent.trim();
+var firstName = () => $(`${CARD} .tp-who b`).textContent.trim();
+/**
+* Lift a guest by the corner tab and let go over `to`.
+*
+* The press goes on the GRIP, because the card's own listener is off — that is
+* the thing being tested. Everything after it is dispatched from a STATIONARY
+* element, and that is not a detail: `trigger` re-reads its target's rect on
+* every call, and the card is moving, so dispatching the moves from the card
+* adds its own displacement to each coordinate. The pointer runs away from the
+* hand — six moves aimed at x=500 arrived at x=2082 — and every drop lands off
+* the board. The tables do not move, so they are safe to measure from.
+*/
+async function carry(to) {
+	const grip = $(`${CARD} ${GRIP}`);
+	const card = $(CARD);
+	const start = grip.getBoundingClientRect();
+	const anchor = $(".tp-tables").getBoundingClientRect();
+	trigger(grip, "pointerdown", start.width / 2, start.height / 2);
+	await sleep(20);
+	const c = card.getBoundingClientRect();
+	const dx = to ? to.x - (c.left + c.width / 2) : 6;
+	const dy = to ? to.y - (c.top + c.height / 2) : 6;
+	const x0 = start.left + start.width / 2 - anchor.left;
+	const y0 = start.top + start.height / 2 - anchor.top;
+	const STEPS = 10;
+	for (let i = 1; i <= STEPS; i++) {
+		trigger(rest(), "pointermove", x0 + dx * i / STEPS, y0 + dy * i / STEPS);
+		await frames(2);
+	}
+	trigger(rest(), "pointerup", x0 + dx, y0 + dy);
+	await frames(4);
+}
+/** a target that does not move while the card does — see the note above */
+var rest = () => $(".tp-tables");
+var centreOf = (index) => {
+	const r = document.querySelectorAll(TABLE)[index].getBoundingClientRect();
+	return {
+		x: r.left + r.width / 2,
+		y: r.top + r.height / 2
+	};
+};
+var gallery;
+var Grip;
+(0, import_qunit.module)("Integration | Choreo gallery | table plan", function(hooks) {
+	gallery = setupChoreoGalleryTest(hooks);
+	setupStageViewport(hooks);
+	hooks.beforeEach(async function() {
+		Grip = await gallery.stage("grip", "Grip");
+	});
+	(0, import_qunit.test)("a guest dropped on a table takes a chair", async function(assert) {
+		await gallery.renderStage(Grip);
+		assert.strictEqual(cards(), 12, "twelve on the list");
+		assert.strictEqual(seats(), 0, "and nobody seated");
+		const moving = firstName();
+		await carry(centreOf(0));
+		assert.strictEqual(seats(), 1, `${moving} took a chair`);
+		assert.strictEqual(cards(), 11, "and left the list");
+		assert.strictEqual(tally(), "11 to seat");
+	});
+	/**
+	* The refusal. Released over nothing at all — above the board, clear of both
+	* the list and the tables — the guest is unchanged, which is what
+	* `dragSnapToOrigin` is there to make legible and the one case where
+	* "nothing happened" is the right outcome rather than a bug.
+	*/
+	(0, import_qunit.test)("a guest dropped on nothing comes back", async function(assert) {
+		await gallery.renderStage(Grip);
+		await carry({
+			x: 500,
+			y: 2
+		});
+		assert.strictEqual(seats(), 0, "nobody was seated");
+		assert.strictEqual(cards(), 12, "and nobody left the list");
+		assert.true($(".tp-note").textContent.includes("that was not a table"), "and the stage says why");
+	});
+	/**
+	* The list is a drop target too, so a seated guest can be carried back to it.
+	* Everything done by dragging is undone by dragging — there is no × on a
+	* chair, because a second gesture for the same idea is a second thing to
+	* learn.
+	*/
+	(0, import_qunit.test)("a seated guest can be carried back to the list", async function(assert) {
+		await gallery.renderStage(Grip);
+		await carry(centreOf(0));
+		assert.strictEqual(seats(), 1, "seated");
+		assert.strictEqual(cards(), 11, "and off the list");
+		const chair = $(".tp-seat");
+		const c = chair.getBoundingClientRect();
+		const r = $(".tp-rail").getBoundingClientRect();
+		const anchor = $(".tp-tables").getBoundingClientRect();
+		trigger(chair, "pointerdown", c.width / 2, c.height / 2);
+		await sleep(20);
+		const x0 = c.left + c.width / 2 - anchor.left;
+		const y0 = c.top + c.height / 2 - anchor.top;
+		const dx = r.left + r.width / 2 - (c.left + c.width / 2);
+		const dy = r.top + 20 - (c.top + c.height / 2);
+		for (let i = 1; i <= 10; i++) {
+			trigger(rest(), "pointermove", x0 + dx * i / 10, y0 + dy * i / 10);
+			await frames(2);
+		}
+		trigger(rest(), "pointerup", x0 + dx, y0 + dy);
+		await frames(4);
+		assert.strictEqual(seats(), 0, "the chair is empty again");
+		assert.strictEqual(cards(), 12, "and they are back on the list");
+	});
+	(0, import_qunit.test)("a full table refuses the fifth guest", async function(assert) {
+		await gallery.renderStage(Grip);
+		for (let i = 0; i < 4; i++) await carry(centreOf(0));
+		assert.strictEqual(seats(), 4, "four chairs, four guests");
+		await carry(centreOf(0));
+		assert.strictEqual(seats(), 4, "the fifth was handed back");
+		assert.strictEqual(cards(), 8, "and is still on the list");
+		assert.true($(".tp-note").textContent.includes("full"), "and the stage says why");
+	});
+	/**
+	* `onPanSessionStart` fires at POINTERDOWN, before the threshold that decides
+	* this is a drag. Arming the tables from it is the only reason the stage can
+	* show you where a guest may go while you are still deciding to move them —
+	* every other drag callback is too late to be useful for that.
+	*/
+	(0, import_qunit.test)("taking hold of a guest lights the tables that have room", async function(assert) {
+		await gallery.renderStage(Grip);
+		assert.strictEqual(document.querySelectorAll(`${TABLE}.is-live`).length, 0, "nothing is lit before a hand is on anybody");
+		const grip = $(`${CARD} ${GRIP}`);
+		const r = grip.getBoundingClientRect();
+		trigger(grip, "pointerdown", r.width / 2, r.height / 2);
+		await sleep(30);
+		assert.strictEqual(document.querySelectorAll(`${TABLE}.is-live`).length, 3, "all three light at pointerdown, before any movement at all");
+		trigger(grip, "pointerup", r.width / 2, r.height / 2);
+		await frames(2);
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-theater-test-DgEue9FD.js

@@ -0,0 +1,252 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { r as CardCrudFunctionsContextName } from "./constants-Icc0nFW-.js";
+import { c as triggerKeyEvent, d as click, o as waitFor } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.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 { t as animationsSettled } from "./test-support-BOFeeYuE.js";
+import { i as setupChoreo } from "./test-support-Tr-PYFgc.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";
+import { r as frames } from "./choreo-gallery-stage-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-theater-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var FILM_PAGE = "<!doctype html><html><head><title>Film</title></head><body></body></html>";
+var FILMS = [
+	{
+		slug: "towers",
+		className: "TowersDemo"
+	},
+	{
+		slug: "sagrada",
+		className: "SagradaDemo"
+	},
+	{
+		slug: "sylva",
+		className: "SylvaDemo"
+	}
+];
+var VIEWPORTS = [
+	[390, 844],
+	[430, 932],
+	[844, 390],
+	[1440, 1e3]
+];
+/** the element that scrolls the card: the test's own container, here */ function scrollerOf(el) {
+	let node = el.parentElement;
+	while (node) {
+		let { overflowY } = getComputedStyle(node);
+		if (overflowY === "auto" || overflowY === "scroll") return node;
+		node = node.parentElement;
+	}
+	return document.scrollingElement;
+}
+/**
+* Lays the rendered page out again in an iframe of the given size, with every
+* stylesheet the page has, so viewport units resolve against that size. The
+* test window has one viewport; sizing is layout alone, so a static copy of
+* the page sizes exactly as the live one would in a window that size. The
+* copy's film frames load nothing, and it drops the sizes the live page
+* measured for theater, so it lays out as a page whose document is its own
+* scroller: as tall as the window, inside the page's measure.
+*/
+function layOutAt(page, width, height, siteWidth) {
+	let css = "";
+	for (let sheet of Array.from(document.styleSheets)) try {
+		for (let rule of Array.from(sheet.cssRules)) css += `${rule.cssText}\n`;
+	} catch {}
+	let copy = page.cloneNode(true);
+	for (let frame of Array.from(copy.querySelectorAll("iframe"))) {
+		frame.removeAttribute("src");
+		frame.removeAttribute("srcdoc");
+	}
+	for (let el of Array.from(copy.querySelectorAll("[style]"))) {
+		el.style.removeProperty("--view-h");
+		el.style.removeProperty("--site-w");
+	}
+	let iframe = document.createElement("iframe");
+	iframe.style.cssText = `position: fixed; top: 0; left: -${width + 100}px; width: ${width}px; height: ${height}px; border: 0;`;
+	document.body.append(iframe);
+	let doc = iframe.contentDocument;
+	doc.open();
+	doc.write(`<!doctype html><html><head><style>${css}</style><style>body { margin: 0; }</style></head><body>${siteWidth ? `<div style="width: ${siteWidth}px">${copy.outerHTML}</div>` : copy.outerHTML}</body></html>`);
+	doc.close();
+	return iframe;
+}
+(0, import_qunit.module)("Integration | Choreo gallery | theater", function(hooks) {
+	setupRenderingTest(hooks);
+	setupBaseRealm(hooks);
+	setupChoreo(hooks);
+	let loader;
+	setupLocalIndexing(hooks);
+	setupCardLogs(hooks, async () => await 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;
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				...choreoGalleryContents(),
+				"film-app/index.html": FILM_PAGE
+			},
+			skipBootIndex: true
+		});
+	});
+	async function film(slug, className) {
+		return new (await (loader.import(`${testRealmURL}stages/${slug}`)))[className]({
+			slug,
+			title: slug,
+			group: "Film",
+			lede: `The ${slug} film`,
+			apis: [],
+			sample: "",
+			slowmo: false,
+			theater: true
+		});
+	}
+	(0, import_qunit.test)("a film’s tile opens its page in theater, and only the way out is on screen", async function(assert) {
+		let opened = [];
+		provide(CardCrudFunctionsContextName, {
+			createCard: () => {},
+			saveCard: () => {},
+			editCard: () => {},
+			deleteCard: async () => {},
+			viewCard: (card) => {
+				opened.push(card.slug ?? "");
+			}
+		});
+		let { ChoreoGallery } = await loader.import(`${testRealmURL}gallery`);
+		let towers = await film("towers", "TowersDemo");
+		await renderCard(loader, new ChoreoGallery({ demos: [towers] }), "isolated");
+		await waitFor("[data-gallery-tile=\"towers\"] .ft-play");
+		await click("[data-gallery-tile=\"towers\"] .ft-play");
+		assert.deepEqual(opened, ["towers"], "the door opens the film’s card");
+		await renderCard(loader, towers, "isolated");
+		await waitFor("[data-test-film=\"towers\"]");
+		await animationsSettled();
+		assert.dom("[data-test-choreo-site]").hasAttribute("data-test-theater", "", "the page opens in theater");
+		assert.dom("[data-test-theater-enter]").doesNotExist("the way in does not overlap the way out");
+		assert.dom("[data-test-theater-exit]").isVisible("the way out stays on screen");
+		await renderCard(loader, towers, "isolated");
+		await waitFor("[data-test-film=\"towers\"] [data-test-theater-enter]");
+		assert.dom("[data-test-choreo-site]").doesNotHaveAttribute("data-test-theater", "opened again without the door, the film opens on its page");
+	});
+	(0, import_qunit.test)("the way in and the way out of theater hand focus to each other", async function(assert) {
+		await renderCard(loader, await film("towers", "TowersDemo"), "isolated");
+		await waitFor("[data-test-film=\"towers\"] [data-test-theater-enter]");
+		await animationsSettled();
+		await click("[data-test-theater-enter]");
+		await waitFor("[data-test-theater-exit]");
+		assert.dom("[data-test-theater-exit]").isFocused("entering theater puts focus on the way out");
+		await click("[data-test-theater-exit]");
+		await waitFor("[data-test-theater-enter]");
+		assert.dom("[data-test-theater-enter]").isFocused("leaving puts it back on the way in");
+		await click("[data-test-theater-enter]");
+		await waitFor("[data-test-theater-exit]");
+		let escapes = 0;
+		let hear = () => escapes++;
+		document.addEventListener("keydown", hear);
+		await triggerKeyEvent("[data-test-theater-exit]", "keydown", "Escape");
+		document.removeEventListener("keydown", hear);
+		await waitFor("[data-test-theater-enter]");
+		assert.dom("[data-test-choreo-site]").doesNotHaveAttribute("data-test-theater", "Escape leaves theater");
+		assert.strictEqual(escapes, 0, "and goes no further than the page");
+		assert.dom("[data-test-theater-enter]").isFocused("with focus on the way back in");
+	});
+	(0, import_qunit.test)("switching theater on and off carries the stage between its two boxes", async function(assert) {
+		await renderCard(loader, await film("towers", "TowersDemo"), "isolated");
+		await waitFor("[data-test-film=\"towers\"] [data-test-theater-enter]");
+		await animationsSettled();
+		let stage = document.querySelector("[data-test-stage]");
+		let frame = stage.querySelector("iframe");
+		for (let [label, selector] of [["in", "[data-test-theater-enter]"], ["out", "[data-test-theater-exit]"]]) {
+			await click(selector);
+			await frames(1);
+			let glide = stage.getAnimations().find((animation) => animation.effect?.getKeyframes().some((keyframe) => typeof keyframe.transform === "string"));
+			assert.ok(glide, `going ${label}, the stage glides rather than snaps`);
+			glide?.finish();
+		}
+		assert.strictEqual(stage.querySelector("iframe"), frame, "the frame kept its parent through both switches");
+	});
+	(0, import_qunit.test)("in theater the way out is a target on screen at every width", async function(assert) {
+		await renderCard(loader, await film("towers", "TowersDemo"), "isolated");
+		await waitFor("[data-test-film=\"towers\"] [data-test-theater-enter]");
+		await click("[data-test-theater-enter]");
+		await animationsSettled();
+		let page = document.querySelector("[data-test-choreo-site]");
+		for (let [width, siteWidth] of [
+			[320],
+			[375],
+			[600],
+			[768],
+			[1440],
+			[1440, 600]
+		]) {
+			let label = siteWidth ? `${siteWidth}px in ${width}px` : `${width}px`;
+			let shown = (siteWidth ?? width) > 700;
+			let iframe = layOutAt(page, width, 800, siteWidth);
+			try {
+				let exit = iframe.contentDocument.querySelector("[data-test-theater-exit]");
+				let words = exit.querySelector(".theater-built");
+				let box = exit.getBoundingClientRect();
+				assert.strictEqual(exit.textContent?.trim(), "How this is built", `${label}: the way out is named`);
+				assert.true(Math.min(box.width, box.height) >= 24, `${label}: the way out is a ${box.width}×${box.height} target`);
+				assert.true(box.left >= 0, `${label}: the way out starts on screen (${box.left})`);
+				assert.true(box.right <= width, `${label}: the way out ends on screen (${box.right})`);
+				let wordsShown = words.getBoundingClientRect().width > 1;
+				assert.strictEqual(wordsShown, shown, `${label}: the words are ${wordsShown ? "shown" : "left to the name"}`);
+			} finally {
+				iframe.remove();
+			}
+		}
+	});
+	for (let { slug, className } of FILMS) {
+		(0, import_qunit.test)(`${slug}: in theater the stage spans the site and fills what its scroller shows`, async function(assert) {
+			await renderCard(loader, await film(slug, className), "isolated");
+			await waitFor(`[data-test-film="${slug}"] [data-test-theater-enter]`);
+			await click("[data-test-theater-enter]");
+			await animationsSettled();
+			await frames(1);
+			await Promise.all(document.querySelector("[data-test-stage]").getAnimations().map((animation) => animation.finished));
+			let scroller = scrollerOf(document.querySelector("[data-test-stage-row]"));
+			let siteEl = document.querySelector("[data-test-choreo-site]");
+			let stageEl = document.querySelector(`[data-test-stage]:has([data-test-film="${slug}"])`);
+			let site = siteEl.getBoundingClientRect();
+			let stage = stageEl.getBoundingClientRect();
+			let view = scroller.getBoundingClientRect();
+			assert.true(Math.abs(stage.left - site.left) < 1, `the stage starts at the site's left edge (${stage.left} against ${site.left})`);
+			assert.true(Math.abs(stageEl.offsetWidth - siteEl.clientWidth) < 1, `the stage is as wide as the site (${stageEl.offsetWidth} against ${siteEl.clientWidth})`);
+			assert.true(Math.abs(stageEl.offsetHeight - Math.min(scroller.clientHeight, stageEl.offsetWidth)) < 1, `the stage is ${stageEl.offsetHeight}px tall: the lesser of the ${scroller.clientHeight}px its scroller shows and its own width, not the window's ${window.innerHeight}px`);
+			assert.true(stage.bottom <= view.bottom + 1, `the film's foot is in view (${stage.bottom} within ${view.bottom})`);
+		});
+		(0, import_qunit.test)(`${slug}: in theater the stage fills the window, capped at a square`, async function(assert) {
+			await renderCard(loader, await film(slug, className), "isolated");
+			await waitFor(`[data-test-film="${slug}"] [data-test-theater-enter]`);
+			await click("[data-test-theater-enter]");
+			await animationsSettled();
+			let page = document.querySelector("[data-test-choreo-site]");
+			assert.dom("[data-test-demo-body]").hasAttribute("data-test-theater");
+			for (let [width, height] of VIEWPORTS) {
+				let iframe = layOutAt(page, width, height);
+				try {
+					let doc = iframe.contentDocument;
+					let row = doc.querySelector("[data-test-stage-row]");
+					let rowStyle = iframe.contentWindow.getComputedStyle(row);
+					let rowWidth = row.clientWidth - parseFloat(rowStyle.paddingLeft) - parseFloat(rowStyle.paddingRight);
+					let stage = doc.querySelector(`[data-test-stage]:has([data-test-film="${slug}"])`).getBoundingClientRect();
+					assert.true(Math.abs(stage.height - Math.min(height, rowWidth)) < 1, `${width}×${height}: the stage is ${stage.height}px tall, the lesser of the window's height and the stage row's ${rowWidth}px width`);
+					assert.true(stage.height <= stage.width + .5, `${width}×${height}: the stage is never taller than it is wide`);
+				} finally {
+					iframe.remove();
+				}
+			}
+		});
+	}
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-tuning-test-CfPx5iCp.js

@@ -0,0 +1,95 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-tuning-test.ts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var tuning;
+(0, import_qunit.module)("Integration | Choreo gallery | tuning", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	hooks.beforeEach(async function() {
+		tuning = await gallery.import("lib/tuning");
+	});
+	(0, import_qunit.test)("defaults preserve the exact demo values and object identities", function(assert) {
+		const { demoTuning, tuneMotion, tuneNumber } = tuning;
+		const original = {
+			type: "spring",
+			stiffness: 130,
+			damping: 15
+		};
+		assert.strictEqual(tuneMotion("test-default", original, "Carry"), original);
+		assert.strictEqual(tuneNumber("test-default", .62, "Timed rail"), .62);
+		assert.deepEqual(Object.keys(demoTuning("test-default").definitions), ["Carry", "Timed rail"]);
+	});
+	(0, import_qunit.test)("editing one named spring leaves other springs and tweens unchanged", function(assert) {
+		const { demoTuning, tuneMotion } = tuning;
+		const carry = {
+			type: "spring",
+			stiffness: 130,
+			damping: 15
+		};
+		const fade = { duration: .55 };
+		demoTuning("test-independent").values = { Carry: {
+			type: "spring",
+			stiffness: 200,
+			damping: 20
+		} };
+		assert.strictEqual(tuneMotion("test-independent", carry, "Carry").stiffness, 200);
+		assert.strictEqual(tuneMotion("test-independent", carry, "Return"), carry);
+		assert.strictEqual(tuneMotion("test-independent", fade, "Light"), fade);
+		assert.strictEqual(tuneMotion("another-demo", carry, "Carry"), carry);
+	});
+	(0, import_qunit.test)("variant controls change the intended property without flattening the scene", function(assert) {
+		const { demoTuning, tuneVariants } = tuning;
+		const original = {
+			press: { scale: .44 },
+			hover: { scale: 1.1 }
+		};
+		demoTuning("test-variants").values = { "Body press scale (×)": .7 };
+		const result = tuneVariants("test-variants", original, "Body");
+		assert.strictEqual(result.press.scale, .7);
+		assert.strictEqual(result.hover, original.hover);
+		assert.strictEqual(original.press.scale, .44);
+	});
+	(0, import_qunit.test)("the named keyframe transition consumes curve edits and preserves repetition", function(assert) {
+		const { demoTuning, tuneMotion } = tuning;
+		const original = {
+			duration: 1.35,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			],
+			repeat: Infinity
+		};
+		demoTuning("test-curve").values = { transition: {
+			type: "easing",
+			duration: 2,
+			ease: [
+				.1,
+				.2,
+				.3,
+				1
+			]
+		} };
+		const tween = tuneMotion("test-curve", original, "transition");
+		assert.strictEqual(tween.duration, 2);
+		assert.deepEqual(tween.ease, [
+			.1,
+			.2,
+			.3,
+			1
+		]);
+		assert.strictEqual(tween.repeat, Infinity);
+		demoTuning("test-curve").values = { transition: {
+			type: "spring",
+			stiffness: 200,
+			damping: 20
+		} };
+		const spring = tuneMotion("test-curve", original, "transition");
+		assert.strictEqual(spring.stiffness, 200);
+		assert.strictEqual(spring.duration, void 0);
+		assert.strictEqual(spring.repeat, Infinity);
+	});
+});
+//#endregion