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

package/bundled-test-harness/assets/choreo-gallery-inline-edit-test-C5WvS67s.js

@@ -0,0 +1,370 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { a as find, d as click, s as fillIn } 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, o as setupStageViewport, r as frames } from "./choreo-gallery-stage-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-inline-edit-test.gts
+/**
+* The Inline Edit demo: a record read, then written.
+*
+* The cases here exist because of bugs the eye caught and the first
+* assertions did not, and they are all about the same thing — the type is
+* not laid out by the browser, so the assertions have to check the numbers
+* the demo computed rather than trusting that flow got it right.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var gallery;
+var InlineEdit;
+var card = () => find(".ie-card");
+var mode = () => card().dataset["mode"];
+var toggle = () => click("[data-test-toggle]");
+var field = (key) => find(`.ie-plate[data-field="${key}"]`);
+var words = (key) => [...document.querySelectorAll(`.ie-word[data-field="${key}"]`)];
+/**
+* Everything in CARD space, and in LAYOUT pixels.
+*
+* The type is no longer inside the platter it belongs to — it is a layer
+* over the whole card — so the only frame both layers share is the card's.
+* And `getBoundingClientRect` includes every transform above the element,
+* so any scale on the test container comes back out of the card, which
+* knows its own width in both spaces.
+*/
+var scale = () => card().getBoundingClientRect().width / card().offsetWidth;
+var left = (el) => (el.getBoundingClientRect().left - card().getBoundingClientRect().left) / scale();
+var round = (value) => +value.toFixed(1);
+var wordX = (key) => words(key).map((el) => round(left(el)));
+/**
+* Where each control PAINTS, not where its box starts. A text input draws
+* its value at its content edge, so the mark a word has to hit is the
+* control's left plus its own padding — which is exactly the inset the
+* component folded into pretext's numbers.
+*/
+var controlTextX = (key) => [...field(key).querySelectorAll(".pt-input")].map((el) => round(left(el) + parseFloat(getComputedStyle(el).paddingLeft)));
+(0, import_qunit.module)("Integration | Choreo gallery | inline edit", function(hooks) {
+	gallery = setupChoreoGalleryTest(hooks);
+	setupStageViewport(hooks);
+	hooks.beforeEach(async function() {
+		InlineEdit = await gallery.stage("inline-edit", "InlineEdit");
+	});
+	(0, import_qunit.test)("the record reads as a string and writes as real fields", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		assert.strictEqual(mode(), "view", "it opens on the reading view");
+		assert.strictEqual(find(".ie-value[data-value=\"name\"]")?.textContent?.trim(), "Marguerite Villanueva", "the reading view is an ordinary string in ordinary flow");
+		assert.dom(".pt-input").doesNotExist("and there is no form control anywhere in it");
+		await toggle();
+		await animationsSettled();
+		assert.strictEqual(mode(), "edit", "the toggle opens the form");
+		assert.dom(".ie-value").doesNotExist("the reading string is gone — these are not two skins of one element");
+		const name = find(".ie-plate[data-field=\"name\"] input");
+		const email = find(".ie-plate[data-field=\"email\"] input");
+		assert.strictEqual(name.type, "text", "the name is a text input");
+		assert.strictEqual(email.type, "email", "the email is an email input");
+		assert.strictEqual(email.autocomplete, "email", "and carries the autofill category that makes that worth doing");
+		assert.strictEqual(controlTextX("dob").length, 3, "the date is segmented — day, month and year, each its own control");
+	});
+	/**
+	* The assertion the whole design exists for.
+	*
+	* pretext computes where every word will sit in a pose that is NOT
+	* rendered. If that arithmetic and the stylesheet ever disagree, a word
+	* flies to a place its control is not, and the handover shows as a ghost
+	* a few pixels off the real glyphs. Nothing about the flight looks wrong
+	* in a still frame, which is exactly why this is a test.
+	*/
+	(0, import_qunit.test)("every word lands exactly where its control paints", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		await toggle();
+		await animationsSettled();
+		for (const key of ["name", "email"]) assert.strictEqual(wordX(key)[0], controlTextX(key)[0], `${key}'s first word lands exactly where its control paints`);
+		assert.deepEqual(wordX("dob"), controlTextX("dob"), "and every date word lands on its own segment, to the pixel");
+		const [day, month, year] = wordX("dob");
+		const inOrder = day < month && month < year;
+		assert.ok(inOrder, `the date lands on three segments in order (${wordX("dob")})`);
+	});
+	/**
+	* The redraw at the handover, which was a measurement error after all.
+	*
+	* The flight word and the real text have to be the SAME text — same size,
+	* same weight, same tracking, same line box — or the last frame of the
+	* flight and the first frame of the real thing are two different
+	* renderings of one word, and the swap reads as a redraw. Two of those
+	* were wrong: the reading view sets the name at -0.03em while `.ie-word`
+	* wore the shared -0.01em, which is the tracking pretext had NOT measured
+	* against, so every letter after the first drifted; and centring a 1.18
+	* line box is not centring a 40px one, because where a glyph sits inside a
+	* line box comes from the font's metrics, so the whole flight rode a
+	* pixel high.
+	*/
+	(0, import_qunit.test)("the flight and the real text are the same text, to the pixel", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		await toggle();
+		await animationsSettled();
+		await toggle();
+		await animationsSettled();
+		const glyphs = (el) => {
+			const range = document.createRange();
+			range.setStart(el.firstChild, 0);
+			range.setEnd(el.firstChild, Math.min(2, el.textContent.length));
+			return range.getBoundingClientRect();
+		};
+		for (const key of [
+			"name",
+			"email",
+			"dob"
+		]) {
+			const real = glyphs(find(`.ie-value[data-value="${key}"]`));
+			const flown = glyphs(words(key)[0]);
+			assert.deepEqual([
+				Math.round(flown.left - real.left),
+				Math.round(flown.top - real.top),
+				Math.round(flown.width - real.width)
+			], [
+				0,
+				0,
+				0
+			], `${key} flies as the same text it lands as`);
+		}
+	});
+	/**
+	* The bug the eye caught first: "14 March 1986" arriving as "14  March1986".
+	*
+	* Each word used to travel alone, so nothing was interpolating the LINE —
+	* and the space between two words is a property of neither of them. The
+	* assertion is on the word ORIGINS rather than on the gaps between their
+	* painted boxes, and that is deliberate: a gap is an origin minus the
+	* previous word's rendered width, and a rendered width depends on a
+	* webfont this fixture does not load. The origins are the model's, and the
+	* model is what regressed.
+	*/
+	(0, import_qunit.test)("a line moves as a line, not as three words", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		const start = wordX("dob");
+		await click("[data-test-toggle]");
+		const samples = [];
+		for (let i = 0; i < 6; i++) {
+			await frames(0);
+			samples.push(wordX("dob"));
+		}
+		await animationsSettled();
+		const end = wordX("dob");
+		assert.strictEqual(start.length, 3, "the date reads as three words");
+		for (const sample of samples) {
+			assert.deepEqual([...sample].sort((a, b) => a - b), sample, `the words never cross each other (${JSON.stringify(sample)})`);
+			sample.forEach((x, index) => {
+				const low = Math.min(start[index], end[index]) - .5;
+				const high = Math.max(start[index], end[index]) + .5;
+				const between = x >= low && x <= high;
+				assert.ok(between, `word ${index} stays between its two poses (${x} in ${low}..${high})`);
+			});
+		}
+	});
+	/**
+	* The two directions are not mirror images, and treating them as one broke
+	* the other.
+	*
+	* Leaving the form there is a departing control holding the value at full
+	* strength, so the word fades UP against it and the pair crossfades.
+	* Entering it there is no such partner — the reading string is not a
+	* participant, it simply unmounts — so a word that ramps from zero against
+	* nothing is the value going missing for a fifth of a second. The whole
+	* card washed out on the way in until the fade asked which way it was
+	* going.
+	*/
+	(0, import_qunit.test)("the type is never missing on the way into the form", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		const faint = () => [...document.querySelectorAll(".ie-word")].filter((el) => !el.closest("[data-choreo-orphans]")).map((el) => Number(getComputedStyle(el).opacity)).filter((value) => value < .99);
+		await click("[data-test-toggle]");
+		for (let i = 0; i < 6; i++) {
+			await frames(0);
+			assert.deepEqual(faint(), [], "every word is at full strength from the first frame in");
+		}
+		await animationsSettled();
+	});
+	/**
+	* And the white card tweens too, which took making it a participant.
+	*
+	* A region is the frame a crossing is measured IN — it is not one of the
+	* things measured, so it has no before and after of its own. The card WAS
+	* the region, so it snapped between its two heights on the first frame
+	* while everything inside it flew. One element in, and it is FLIPped like
+	* any other box.
+	*/
+	(0, import_qunit.test)("the card tweens its height rather than snapping", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		const start = card().offsetHeight;
+		await click("[data-test-toggle]");
+		let played = 0;
+		for (let i = 0; i < 6; i++) {
+			await frames(0);
+			if (/height|transform/.test(card().getAttribute("style") ?? "")) played++;
+		}
+		await animationsSettled();
+		assert.notEqual(start, card().offsetHeight, "the card is a different height in the two poses");
+		assert.ok(played >= 2, `and its box was the move's for more than one frame (${played})`);
+	});
+	/**
+	* The keyboard reaches Done by carrying on.
+	*
+	* The mode switch is placed in the card's corner by position, so its
+	* document order is free — and it was first, which put Done between the
+	* user and the form they were about to fill in. It is last now: tab out of
+	* the year and the next stop is the button that commits.
+	*/
+	(0, import_qunit.test)("Done is the last stop after the form", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		await toggle();
+		await animationsSettled();
+		assert.deepEqual([...find(".ie-card").querySelectorAll("input, select, button")].map((el) => el.getAttribute("aria-label") ?? el.className), [
+			"Name",
+			"Job title",
+			"Email",
+			"Day",
+			"Month",
+			"Year",
+			"ie-toggle"
+		], "the form in order, and the commit at the end of it");
+	});
+	/**
+	* The platters TWEEN. They snapped once, and how they snapped is worth a
+	* case of its own.
+	*
+	* The card's row heights were inline on the WRAPPER, which is outside the
+	* region — so the mode change resized the card before the region had taken
+	* its before-picture, every platter measured the same box twice, `c.moved`
+	* selected nothing, and they arrived at their new lane on the first frame
+	* while the type flew across on its own. Nothing errored, and every other
+	* step still ran. The card picks its pose with its own attribute now, which
+	* changes inside the region, where a change is a pass.
+	*/
+	(0, import_qunit.test)("the platters tween their geometry rather than snapping", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		await click("[data-test-toggle]");
+		let played = 0;
+		for (let i = 0; i < 6; i++) {
+			await frames(0);
+			if (/height|transform/.test(field("dob").getAttribute("style") ?? "")) played++;
+		}
+		await animationsSettled();
+		assert.ok(played >= 2, `the platter's box was the move's for more than one frame (${played})`);
+	});
+	/**
+	* The departing control fades, which nothing was doing for it.
+	*
+	* A crossing fades what it CROSSES: a leaver against the arrival that
+	* claimed its identity. A form field is claimed by nobody — the reading
+	* view has no counterpart for one, which is the point of the demo — so it
+	* was ceasing to exist when the leave window closed, which reads as a cut
+	* rather than as the form coming apart.
+	*/
+	(0, import_qunit.test)("the form fades as it leaves, rather than blinking off", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		await toggle();
+		await animationsSettled();
+		const leaving = () => [...document.querySelectorAll("[data-choreo-orphans] *")].filter((el) => el.matches(".pt-input, .pt-date")).map((el) => Number(getComputedStyle(el).opacity));
+		await click("[data-test-toggle]");
+		const samples = [];
+		for (let i = 0; i < 6; i++) {
+			await frames(0);
+			const shot = leaving();
+			if (shot.length) samples.push(shot);
+		}
+		assert.ok(samples.length >= 2, "the form was caught on its way out");
+		assert.ok(Math.min(...samples[samples.length - 1]) < Math.max(...samples[0]), `it is fading (${JSON.stringify(samples)})`);
+		await animationsSettled();
+	});
+	/**
+	* The outline never leaves the platter, at rest or in flight.
+	*
+	* The platter and the field used to be two elements sharing a grid area —
+	* one static, one travelling — and only one of them moved, so mid-flight
+	* the outline stood at its form geometry, full width, while the type was
+	* still laid out for a card. They are one box now, which is what makes
+	* this assertion true by construction rather than by tuning: the outline
+	* IS the platter's border, and everything a field holds is inside it.
+	*/
+	(0, import_qunit.test)("nothing a field holds is ever outside its platter", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		await toggle();
+		await animationsSettled();
+		const escapes = () => {
+			const out = [];
+			for (const key of [
+				"name",
+				"email",
+				"dob"
+			]) {
+				const platter = field(key).getBoundingClientRect();
+				for (const el of field(key).querySelectorAll(".pt-input, .pt-date")) {
+					const box = el.getBoundingClientRect();
+					if (box.left < platter.left - .5 || box.right > platter.right + .5 || box.top < platter.top - .5 || box.bottom > platter.bottom + .5) out.push(`${key}:${el.className}`);
+				}
+			}
+			return out;
+		};
+		assert.deepEqual(escapes(), [], "nothing escapes at rest in the form");
+		await click("[data-test-toggle]");
+		for (let i = 0; i < 6; i++) {
+			await frames(0);
+			assert.deepEqual(escapes(), [], "nor at any frame of the flight");
+		}
+		await animationsSettled();
+		assert.deepEqual(escapes(), [], "nor at rest in the reading view");
+	});
+	/**
+	* The flight is the MIDDLE phase: never two copies of a value on screen.
+	*
+	* `visibility` rather than opacity is load-bearing, and the assertion is
+	* written against it on purpose. A participant's opacity belongs to the
+	* engine — it renders one inline — so a stylesheet rule is simply
+	* outvoted, and the words sat fully opaque over the controls with CSS that
+	* clearly said otherwise. Nothing in the library writes `visibility`.
+	*/
+	(0, import_qunit.test)("exactly one copy of a value is on screen at rest", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		const shown = () => [...document.querySelectorAll(".ie-word")].filter((el) => !el.closest("[data-choreo-orphans]")).filter((el) => getComputedStyle(el).visibility !== "hidden").length;
+		assert.strictEqual(shown(), 0, "nothing over the reading string");
+		await toggle();
+		await animationsSettled();
+		assert.strictEqual(shown(), 0, "nothing over the form controls");
+		assert.notOk(find(".ie").dataset["flying"], "and the arming has stood down once the pass has settled");
+	});
+	/** the card is a card at both ends: the form is taller, and that is all */
+	(0, import_qunit.test)("the card changes height and nothing else drifts", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		const box = () => ({
+			height: card().offsetHeight,
+			top: Math.round(card().getBoundingClientRect().top),
+			width: card().offsetWidth
+		});
+		const before = box();
+		await toggle();
+		await animationsSettled();
+		const after = box();
+		assert.strictEqual(after.width, before.width, "the card keeps its width");
+		assert.ok(after.height > before.height + 20, `the form is meaningfully taller (${before.height} to ${after.height})`);
+		assert.strictEqual(after.top, before.top, "and grows downward from a pinned top edge, so nothing above it drifts");
+	});
+	(0, import_qunit.test)("what was typed is what is read back", async function(assert) {
+		await gallery.renderStage(InlineEdit);
+		await animationsSettled();
+		await toggle();
+		await animationsSettled();
+		await fillIn(".ie-plate[data-field=\"name\"] input", "Margarethe Vela");
+		await toggle();
+		await animationsSettled();
+		assert.strictEqual(find(".ie-value[data-value=\"name\"]")?.textContent?.trim(), "Margarethe Vela", "the reading view shows what the input was given");
+		assert.deepEqual(words("name").map((el) => el.textContent?.trim()), ["Margarethe", "Vela"], "and the flight was re-planned for the new words");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-interruption-test-CgT9RKTe.js

@@ -0,0 +1,176 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { T as settled } from "./dist-BOAdzfkP.js";
+import "./src-CbBcj3xm.js";
+import { i as setMotionSpeed } from "./speed-bIo0tyrM.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { t as animationsSettled } from "./test-support-BOFeeYuE.js";
+import { a as strandedTransforms, n as orphanCount } from "./test-support-Tr-PYFgc.js";
+import { a as setupChoreoGalleryTest, o as setupStageViewport, s as sleep } from "./choreo-gallery-stage-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-interruption-test.gts
+/**
+* Rapid interruption, across every stage in the gallery.
+*
+* Nearly every animation bug this project has had was an interruption bug, and
+* they all present the same way: something the framework borrowed is not given
+* back. A transform left on an element, a leaver parked in the orphan layer
+* that nobody drops, a node whose exit never completes so it is never unmounted.
+* Each one is invisible on a slow, deliberate click and obvious after ten fast
+* ones — which is exactly the interaction a demo page invites.
+*
+* So rather than pin one scenario per bug, this hammers the REAL demo
+* components — the same code the gallery renders — and asserts the invariants
+* that must hold once everything has settled, whatever happened on the way:
+*
+*   1. nothing is stranded in a <Choreo> orphan layer
+*   2. no element is left wearing a transform nobody is animating
+*   3. the DOM comes back to the size it started at (no accumulation)
+*
+* A demo is added here by name; there is nothing to write per case. When one of
+* these fails it is naming a real leak, not a flaky measurement — the assertions
+* are all counts and rest states, never bounds.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var root = () => document.querySelector("#ember-testing");
+/** every button a person could hit on this stage */
+var targets = (selector) => [...root().querySelectorAll(selector)].filter((el) => !el.disabled);
+/**
+* Click through `selector` as fast as the runloop allows, then let everything
+* finish. `gap` deliberately lands inside the animations it is interrupting —
+* it is the one sleep in this file that means something, and it is a duration
+* the test chose rather than one it is guessing about somebody else's spring.
+*
+* The wait at the end is `animationsSettled()`, not a sleep long enough to be
+* safe: a demo whose own setTimeout keeps rescheduling work would sail through
+* a fixed sleep and be measured mid-flight.
+*/
+async function hammer(selector, rounds, gap) {
+	for (let i = 0; i < rounds; i++) {
+		const buttons = targets(selector);
+		if (!buttons.length) break;
+		buttons[i % buttons.length].click();
+		await settled();
+		await sleep(gap);
+	}
+	await sleep(120);
+	await animationsSettled({ timeout: 8e3 });
+}
+/** close whatever the hammer left open, so the stage is where it started */
+async function returnToRest(selector) {
+	if (!selector) return;
+	for (let i = 0; i < 4; i++) {
+		const button = root().querySelector(selector);
+		if (!button) return;
+		button.click();
+		await settled();
+		await animationsSettled({ timeout: 8e3 });
+	}
+}
+var stages = [
+	{
+		clicks: ".study-card",
+		component: "Sequence",
+		name: "Sequence",
+		rest: ".study-card.is-open",
+		slug: "sequence"
+	},
+	{
+		clicks: ".list-name",
+		component: "Lists",
+		name: "Lists",
+		slug: "lists"
+	},
+	{
+		clicks: ".piece",
+		component: "FarMatch",
+		name: "Far match",
+		slug: "far"
+	},
+	{
+		clicks: ".slot",
+		component: "Interrupt",
+		name: "Interruption",
+		slug: "interrupt"
+	},
+	{
+		clicks: ".slides-dot, .slides-next",
+		component: "Slides",
+		name: "Slides",
+		slug: "slides"
+	},
+	{
+		clicks: ".replay",
+		component: "SplitView",
+		name: "Split view",
+		slug: "split"
+	},
+	{
+		clicks: ".replay",
+		component: "Enter",
+		name: "Enter",
+		slug: "enter"
+	},
+	{
+		clicks: ".replay",
+		component: "PresenceModes",
+		name: "Presence",
+		slug: "presence"
+	},
+	{
+		clicks: ".replay, .crumb-btn",
+		component: "Trail",
+		name: "Trail",
+		slug: "trail"
+	},
+	{
+		clicks: ".tab",
+		component: "SharedTabs",
+		name: "Shared tabs",
+		slug: "tabs"
+	},
+	{
+		clicks: ".shot, .lightbox-close",
+		component: "Lightbox",
+		name: "Lightbox",
+		rest: ".lightbox-close",
+		slug: "lightbox"
+	}
+];
+(0, import_qunit.module)("Integration | Choreo gallery | rapid interruption", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	setupStageViewport(hooks);
+	async function renderStage(stage) {
+		await gallery.renderStage(await gallery.stage(stage.slug, stage.component));
+	}
+	for (const stage of stages) for (const gap of [
+		0,
+		60,
+		220
+	]) (0, import_qunit.test)(`${stage.name} survives 10 clicks ${gap}ms apart`, async function(assert) {
+		await renderStage(stage);
+		await animationsSettled();
+		const before = root().querySelectorAll("*").length;
+		await hammer(stage.clicks, 10, gap);
+		await returnToRest(stage.rest);
+		assert.strictEqual(orphanCount(), 0, "no leaver stranded in an orphan layer");
+		assert.deepEqual(strandedTransforms(), [], "no element kept a transform");
+		const after = root().querySelectorAll("*").length;
+		assert.true(after <= before + 2, `the DOM did not accumulate (${before} -> ${after})`);
+	});
+	/**
+	* The same hammering with the clock stretched. Slow motion widens every
+	* window an interruption can land in, so a run is far more likely to be cut
+	* mid-phase — a hold applied but not yet released, a move pinned but not yet
+	* started.
+	*/
+	for (const stage of stages.slice(0, 4)) (0, import_qunit.test)(`${stage.name} survives interruption in slow motion`, async function(assert) {
+		setMotionSpeed(5);
+		await renderStage(stage);
+		await animationsSettled();
+		await hammer(stage.clicks, 6, 120);
+		setMotionSpeed(1);
+		await animationsSettled();
+		await returnToRest(stage.rest);
+		assert.strictEqual(orphanCount(), 0, "no leaver stranded");
+		assert.deepEqual(strandedTransforms(), [], "no element kept a transform");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-lone-stack-test-BZgqbTJd.js

@@ -0,0 +1,104 @@
+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, m as htmlSafe } from "./index-DaCZcoCY-CgzbilMy.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 { T as settled } from "./dist-BOAdzfkP.js";
+import { 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 { a as setupChoreoGalleryTest } from "./choreo-gallery-stage-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-lone-stack-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var keyOf = (item) => item.id;
+var gone = {
+	opacity: 0,
+	scale: .96
+};
+var here = {
+	opacity: 1,
+	scale: 1
+};
+var leaves = {
+	opacity: 0,
+	scale: .96
+};
+var settle = {
+	bounce: .12,
+	type: "spring",
+	visualDuration: .42
+};
+var Shown = class {
+	static {
+		decorateFieldV2(this.prototype, "ids", [tracked], function() {
+			return ["one", "two"];
+		});
+	}
+	#ids = (initializeDeferredDecorator(this, "ids"), void 0);
+	get items() {
+		return this.ids.map((id) => ({ id }));
+	}
+	drop = () => {
+		this.ids = ["two"];
+	};
+};
+function isFirst(id) {
+	return id === "one";
+}
+function rest() {
+	return new Promise((resolve) => setTimeout(resolve, 900));
+}
+/** the containing block the leavers' popLayout positions against */
+var positioned = htmlSafe("position: relative");
+/**
+* A leaver whose subtree holds `layoutId`s of its own.
+*
+* `<Lightbox>` carries `layoutId="atlas-card"`, `"atlas-name"` and so on inside
+* its own `<LayoutGroup>`. When the card containing it leaves, each of those is
+* the only member of its stack — nothing else on the page shares the id, so
+* there is no counterpart and no crossfade to hand over to.
+*/
+(0, import_qunit.module)("Integration | Choreo gallery | a lone stack", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	let Lightbox;
+	hooks.beforeEach(async function() {
+		Lightbox = await gallery.stage("lightbox", "Lightbox");
+	});
+	(0, import_qunit.test)("a leaver holding lone layoutIds leaves the DOM", async function(assert) {
+		const state = new Shown();
+		const Harness = setComponentTemplate(templateFactory({
+			"id": "OMkxLcTT",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[10,0],[14,0,\"grid\"],[15,5,[32,1]],[12],[1,\"\\n    \"],[8,[32,2],null,[[\"@items\",\"@key\",\"@mode\",\"@initial\"],[[32,3,[\"items\"]],[32,4],\"popLayout\",false]],[[\"default\"],[[[[1,\"\\n      \"],[11,\"article\"],[24,0,\"card\"],[16,\"data-card\",[30,1,[\"id\"]]],[4,[32,5],null,[[\"presence\",\"layout\",\"initial\",\"animate\",\"exit\",\"transition\"],[[30,2],true,[32,6],[32,7],[32,8],[32,9]]]],[12],[1,\"\\n\"],[1,\"        \"],[10,0],[14,0,\"card-stage\"],[12],[1,\"\\n          \"],[41,[28,[32,10],[[30,1,[\"id\"]]],null],[[[8,[32,11],null,null,null]],[]],[[[1,\"plain\"]],[]]],[1,\"\\n        \"],[13],[1,\"\\n      \"],[13],[1,\"\\n    \"]],[1,2]]]]],[1,\"\\n  \"],[13],[1,\"\\n\"]],[]]]]]],[\"item\",\"h\"],[\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-lone-stack-test.gts",
+			"scope": () => [
+				LayoutGroup,
+				positioned,
+				Presence,
+				state,
+				keyOf,
+				MotionModifier,
+				gone,
+				here,
+				leaves,
+				settle,
+				isFirst,
+				Lightbox
+			],
+			"isStrictMode": true
+		}), templateOnly());
+		await gallery.renderStage(Harness);
+		await rest();
+		assert.strictEqual(document.querySelectorAll("[data-card]").length, 2, "both cards are up");
+		state.drop();
+		await settled();
+		await rest();
+		assert.strictEqual(document.querySelectorAll("[data-card]").length, 1, "the leaver left the DOM rather than lingering at opacity 0");
+	});
+});
+//#endregion