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

package/bundled-test-harness/assets/choreo-feature-reel-test-vzmW-SFd.js

@@ -0,0 +1,155 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { M as waitUntil, a as find } 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, t as setupMockMatrix } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.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";
+//#region tests/integration/choreo-feature-reel-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var reel = () => find(".reel-viewport").choreoReel;
+var worldTransform = () => find(".reel-world").style.transform;
+var zoomOf = (transform) => {
+	let m = /scale\(([\d.]+)\)/.exec(transform);
+	return m ? parseFloat(m[1]) : 1;
+};
+/** a transform a Move or a camera has written, as opposed to none at all */
+var isPosed = (transform) => transform !== "" && transform !== "none";
+var opacityOf = (sel) => getComputedStyle(find(sel)).opacity;
+var visuallyGone = (sel) => {
+	let el = find(sel);
+	return !el || getComputedStyle(el).opacity === "0";
+};
+(0, import_qunit.module)("Integration | Choreo gallery | feature reel transport", 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(),
+			skipBootIndex: true
+		});
+	});
+	async function renderReel() {
+		let { ChoreoFeatureReel } = await loader.import(`${testRealmURL}reel/feature-reel`);
+		await renderCard(loader, new ChoreoFeatureReel(), "isolated");
+	}
+	(0, import_qunit.test)("the preview PLAYS: WAAPI composites the camera, and cues fire with no recorder", async function(assert) {
+		await renderReel();
+		let world = find(".reel-world");
+		let running = await waitUntil(() => world.getAnimations().some((a) => a.playState === "running"), { timeout: 4e3 });
+		assert.true(running, "a platform animation composites the camera during live preview");
+		let open = await waitUntil(() => find(".reel-lightbox .overlay"), { timeout: 4e3 });
+		assert.ok(open, "the photo.open cue fired on the preview clock");
+	});
+	(0, import_qunit.test)("the doc checkpoints land their shots from direct, out-of-order seeks", async function(assert) {
+		await renderReel();
+		assert.ok(reel(), "the reel published its capture handle");
+		await reel().renderAt(8.9);
+		let buildLogo = worldTransform();
+		assert.notStrictEqual(buildLogo, "", `8.9s paints a camera pose at all (was: the rest frame)`);
+		assert.notStrictEqual(zoomOf(buildLogo), 1, `8.9s is a real shot, not identity (${buildLogo})`);
+		let shots = /* @__PURE__ */ new Map();
+		shots.set(8.9, buildLogo);
+		for (let t of [
+			1.5,
+			5.1,
+			10.8
+		]) {
+			await reel().renderAt(t);
+			shots.set(t, worldTransform());
+		}
+		let seen = [...shots.values()];
+		assert.strictEqual(new Set(seen).size, seen.length, `four aims, four distinct framings:\n${[...shots].map(([t, s]) => `  ${t}s → ${s}`).join("\n")}`);
+		await reel().renderAt(8.75);
+		let logoLanding = worldTransform();
+		await reel().renderAt(12.9);
+		assert.strictEqual(worldTransform(), logoLanding, "8.75s and 12.9s land the same declared aim on the identical frame");
+		await reel().renderAt(14.5);
+		assert.true(zoomOf(worldTransform()) > zoomOf(buildLogo) * 1.005, `14.5s: the push-in is under way (${worldTransform()})`);
+		await reel().renderAt(8.9);
+		assert.strictEqual(worldTransform(), buildLogo, "returning to 8.9s repaints the identical transform");
+		for (let t = 0; t <= 8.9; t += .5) await reel().renderAt(Math.min(t, 8.9));
+		await reel().renderAt(8.9);
+		assert.strictEqual(worldTransform(), buildLogo, "walking 0 → 8.9 sequentially lands on the same frame as jumping there");
+	});
+	(0, import_qunit.test)("the title plane and the demo fold reconstruct at every checkpoint", async function(assert) {
+		await renderReel();
+		await reel().renderAt(1.5);
+		assert.strictEqual(opacityOf("[data-lt=\"lt-lightbox\"]"), "1", "1.5s: 01");
+		assert.true(Boolean(find(".reel-lightbox .overlay")), "1.5s: the photo.open cue folded in");
+		assert.true(visuallyGone(".reel-poster"), "1.5s: the poster clip cut away at 0.45s");
+		await reel().renderAt(5.1);
+		assert.strictEqual(opacityOf("[data-lt=\"lt-beacons\"]"), "1", "5.1s: 02");
+		assert.strictEqual(opacityOf("[data-lt=\"lt-lightbox\"]"), "0", "5.1s: 01 has left");
+		await reel().renderAt(8.9);
+		assert.strictEqual(opacityOf("[data-lt=\"lt-build\"]"), "1", "8.9s: 03");
+		await reel().renderAt(14.5);
+		assert.strictEqual(opacityOf("[data-lt=\"lt-logo\"]"), "1", "14.5s: lockup");
+		await reel().renderAt(.05);
+		let overlay = find(".reel-lightbox .overlay");
+		let shut = !overlay || overlay.classList.contains("is-closing");
+		assert.true(shut, "0.05s after 14.5s: the lightbox folded back shut");
+		assert.strictEqual(opacityOf("[data-lt=\"lt-lightbox\"]"), "0", "0.05s: no third is up yet");
+		assert.true(Boolean(find(".reel-poster")), "0.05s: the poster clip re-derives PRESENT from a backward fold");
+	});
+	(0, import_qunit.test)("the poster crosses to the brand chip, and the flight is seekable", async function(assert) {
+		await renderReel();
+		await reel().renderAt(.8);
+		let chip = find(".reel-brand-mark");
+		assert.ok(chip, "0.8s: the chip is mounted");
+		let midFlight = chip.style.transform;
+		assert.true(isPosed(midFlight), `0.8s: the crossing is mid-flight (${midFlight})`);
+		await reel().renderAt(5);
+		assert.true(visuallyGone(".reel-poster"), "5s: the poster has left");
+		assert.dom(".reel-brand-mark").exists("5s: the chip holds the corner");
+		await reel().renderAt(.8);
+		assert.strictEqual(find(".reel-brand-mark").style.transform, midFlight, "0.8s revisited: the flight resamples identically");
+		await reel().renderAt(.1);
+		assert.dom(".reel-poster").exists("0.1s: the poster stands again");
+		await reel().renderAt(.8);
+		let reflight = find(".reel-brand-mark").style.transform;
+		assert.true(isPosed(reflight), `0.8s after a recross: a fresh forward pair flies again (${reflight})`);
+	});
+	(0, import_qunit.test)("the clock plane keeps SMPTE time and pulses on its own camera", async function(assert) {
+		await renderReel();
+		await reel().renderAt(8.9);
+		assert.strictEqual(find(".reel-clock-tc").textContent, "00:00:08:54", "8.9s is frame 54 of second 8");
+		await reel().renderAt(7);
+		let clockPlane = find(".reel-clock[data-choreo]");
+		assert.true(Math.abs(zoomOf(clockPlane.style.transform) - 1.3) < .02, `7.0s: the clock plane stands pulsed (${clockPlane.style.transform})`);
+		await reel().renderAt(5.1);
+		assert.true(Math.abs(zoomOf(clockPlane.style.transform) - 1) < .005, `5.1s: the clock plane is at rest (${clockPlane.style.transform})`);
+		assert.strictEqual(find(".reel-clock-tc").textContent, "00:00:05:06", "5.1s is frame 6 of second 5");
+	});
+	(0, import_qunit.test)("the mark docks across planes: chip out of the brand plane, into the world", async function(assert) {
+		await renderReel();
+		await reel().renderAt(12);
+		assert.dom(".reel-brand-mark").exists("12.0s: the chip holds the corner");
+		assert.false(Boolean(find(".reel-dock-mark")), "12.0s: nothing docked");
+		await reel().renderAt(13.1);
+		let mark = find(".reel-world .reel-dock-mark");
+		assert.ok(mark, "13.1s: the mark is received in the WORLD region itself");
+		assert.true(isPosed(mark.style.transform), `13.1s: the cross-plane flight is mid-journey (${mark.style.transform})`);
+		assert.false(Boolean(find(".reel-brand-mark")), "13.1s: the chip has left the brand plane");
+		await reel().renderAt(14.5);
+		assert.dom(".reel-world .reel-dock-mark").exists("14.5s: the mark rests in the scene, riding the push-in");
+		await reel().renderAt(12);
+		assert.dom(".reel-brand-mark").exists("12.0s again: the chip is back");
+		assert.false(Boolean(find(".reel-dock-mark")), "12.0s again: the world let it go");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-build-order-test-J6n0_PKm.js

@@ -0,0 +1,436 @@
+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 { t as Component } from "./dist-CkA1rgqO.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, T as settled, d as click, h as render } from "./dist-BOAdzfkP.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, r as frames, s as sleep } from "./choreo-gallery-stage-Dj6tFzon.js";
+//#region tests/integration/choreo-gallery-build-order-test.gts
+/**
+* The Build Order demo: as a popLayout leaver, beside a noisy neighbour, and
+* through its own transport.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var BuildOrder;
+function setupBuildOrder(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	hooks.beforeEach(async function() {
+		BuildOrder = await gallery.stage("build-order", "BuildOrder");
+	});
+	return gallery;
+}
+/**
+* A whole demo as a popLayout leaver.
+*
+* The gallery filters its cards with popLayout, and a card's Presence waits
+* for every registered child under it — including a <Choreo> region's
+* participants. The region hands back participants no cue names; a score
+* that named removed sprites (an untyped `c.id` matches them) would ride a
+* dying card through its full opening and stall the whole exiting batch.
+* BuildOrder selects kept sprites only, and this pins that contract.
+*/
+var keyOf = (item) => item.id;
+var gone = { opacity: 0 };
+var here = { opacity: 1 };
+var quick = {
+	bounce: .12,
+	type: "spring",
+	visualDuration: .3
+};
+var Shown = class {
+	static {
+		decorateFieldV2(this.prototype, "items", [tracked], function() {
+			return [{ id: "bo" }, { id: "plain" }];
+		});
+	}
+	#items = (initializeDeferredDecorator(this, "items"), void 0);
+	narrow = () => {
+		this.items = this.items.filter((item) => item.id === "plain");
+	};
+};
+function isBo(item) {
+	return item.id === "bo";
+}
+/** the containing block the leavers' popLayout positions against */
+var positioned = htmlSafe("position: relative");
+(0, import_qunit.module)("Integration | Choreo gallery | build-order leaver", function(hooks) {
+	setupBuildOrder(hooks);
+	(0, import_qunit.test)("a popLayout leaver holding BuildOrder is removed", async function(assert) {
+		const state = new Shown();
+		const Stage = BuildOrder;
+		await render(setComponentTemplate(templateFactory({
+			"id": "G9MlrOns",
+			"block": "[[[11,\"button\"],[24,0,\"narrow\"],[24,4,\"button\"],[4,[32,0],[\"click\",[32,1,[\"narrow\"]]],null],[12],[1,\"x\"],[13],[1,\"\\n\"],[10,0],[15,5,[32,2]],[12],[1,\"\\n  \"],[8,[32,3],null,[[\"@items\",\"@key\",\"@mode\",\"@initial\"],[[32,1,[\"items\"]],[32,4],\"popLayout\",false]],[[\"default\"],[[[[1,\"\\n    \"],[11,\"article\"],[16,\"data-it\",[30,1,[\"id\"]]],[4,[32,5],null,[[\"presence\",\"initial\",\"animate\",\"exit\",\"transition\"],[[30,2],[32,6],[32,7],[32,6],[32,8]]]],[12],[1,\"\\n      \"],[41,[28,[32,9],[[30,1]],null],[[[8,[32,10],null,null,null]],[]],[[[10,2],[12],[1,\"plain\"],[13]],[]]],[1,\"\\n    \"],[13],[1,\"\\n  \"]],[1,2]]]]],[1,\"\\n\"],[13]],[\"item\",\"h\"],[\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-build-order-test.gts",
+			"scope": () => [
+				on,
+				state,
+				positioned,
+				Presence,
+				keyOf,
+				MotionModifier,
+				gone,
+				here,
+				quick,
+				isBo,
+				Stage
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await sleep(400);
+		assert.strictEqual(document.querySelectorAll("[data-it]").length, 2, "both up");
+		await click(".narrow");
+		await sleep(900);
+		const bo = document.querySelector("[data-it=\"bo\"]");
+		const run = document.querySelector(".bo-stage")?.buildOrder?.c?.run;
+		assert.strictEqual(document.querySelectorAll("[data-it]").length, 1, `leaver removed — left: ${[...document.querySelectorAll("[data-it]")].map((el) => el.dataset["it"]).join(",")} · bo opacity=${bo ? getComputedStyle(bo).opacity : "gone"} · run=${run ? `t=${run.time.toFixed(2)}/${run.duration.toFixed(2)} done=${run.isDone()}` : String(run)} · animations=${document.getAnimations().length}`);
+	});
+});
+/**
+* The gallery, distilled: a neighbouring demo that writes tracked state
+* every frame (the Playhead demo does exactly this while it plays). Every
+* app render re-runs each region's render detector — so without care, the
+* neighbour's 60fps writes replay Build Order's pass 60 times a second,
+* cancelling and re-pinning the run it shares a page with: the scrubbed
+* still paints PINS, and parts of the logo simply go missing.
+*
+* The contract: an all-kept pass whose compiled score matches the
+* in-flight run KEEPS that run. Unrelated renders must not restart a
+* region's clock.
+*/
+var Noise = class extends Component {
+	static {
+		decorateFieldV2(this.prototype, "n", [tracked], function() {
+			return 0;
+		});
+	}
+	#n = (initializeDeferredDecorator(this, "n"), void 0);
+	ticking = true;
+	constructor(owner, args) {
+		super(owner, args);
+		this.tick();
+	}
+	async tick() {
+		await frames(0);
+		while (this.ticking) {
+			this.n++;
+			await frames(0);
+		}
+	}
+	willDestroy() {
+		super.willDestroy();
+		this.ticking = false;
+	}
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "PZnMeR1A",
+			"block": "[[[10,1],[14,\"data-noise\",\"\"],[12],[1,[30,0,[\"n\"]]],[13]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-build-order-test.gts",
+			"isStrictMode": true
+		}), this);
+	}
+};
+function boRun() {
+	return document.querySelector(".bo-stage").buildOrder?.c?.run ?? null;
+}
+(0, import_qunit.module)("Integration | Choreo gallery | build-order neighbours", function(hooks) {
+	setupBuildOrder(hooks);
+	(0, import_qunit.test)("a per-frame tracked neighbour does not restart the run", async function(assert) {
+		const Stage = BuildOrder;
+		await render(setComponentTemplate(templateFactory({
+			"id": "CFlhU93p",
+			"block": "[[[8,[32,0],null,null,null],[1,\"\\n\"],[8,[32,1],null,null,null]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/choreo-gallery-build-order-test.gts",
+			"scope": () => [Noise, Stage],
+			"isStrictMode": true
+		}), templateOnly()));
+		await waitUntil(() => boRun() != null, { timeout: 4e3 });
+		await frames(10);
+		const before = boRun();
+		await frames(30);
+		assert.strictEqual(boRun(), before, "thirty noisy frames later, the region still plays the same run");
+		const range = document.querySelector(".bo-range");
+		range.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+		range.value = "1.05";
+		range.dispatchEvent(new Event("input", { bubbles: true }));
+		range.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+		await frames(30);
+		const plate = document.querySelector(".bo-plate")?.getAttribute("style") ?? "";
+		assert.true(plate.includes("opacity: 1"), `the plate holds its finals under render noise — got '${plate}'`);
+		boRun()?.cancel();
+	});
+});
+/**
+* The Build Order demo's transport, driven the way a hand drives it.
+*
+* The demo is the library's own reference for `c.run` as a transport: the
+* scrubber sets `run.time`, a scrubbed frame is a computed still, and a
+* still past a cue's end must show that cue's FINALS — not its pinned first
+* keyframes. This test plays the opening for a beat, then scrubs the real
+* range input around the timeline and asserts what the stage shows.
+*/
+/** a parked run must not outlive its test: cancel it and let the world settle */ async function windDown() {
+	handle().c?.run?.cancel();
+	await settled();
+}
+function handle() {
+	return document.querySelector(".bo-stage").buildOrder;
+}
+function scrubTo(seconds) {
+	const range = document.querySelector(".bo-range");
+	range.value = String(seconds);
+	range.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function styleOf(selector) {
+	return document.querySelector(selector)?.getAttribute("style") ?? "";
+}
+(0, import_qunit.module)("Integration | Choreo gallery | build-order transport", function(hooks) {
+	let gallery = setupBuildOrder(hooks);
+	(0, import_qunit.test)("a scrubbed still past a cue shows finals, not pins", async function(assert) {
+		await gallery.renderStage(BuildOrder);
+		await waitUntil(() => handle().c?.run != null, { timeout: 4e3 });
+		await frames(20);
+		scrubTo(1.7);
+		await frames(4);
+		assert.true(styleOf(".bo-plate").includes("opacity: 1"), `plate landed after scrub past its window — got '${styleOf(".bo-plate")}'`);
+		assert.false(styleOf(".bo-plate").includes("-38px"), "plate is not sitting on its pinned origin");
+		assert.true(styleOf(".bo-tail").includes("opacity: 1"), `tail landed — got '${styleOf(".bo-tail")}'`);
+		assert.true(styleOf(".bo-orbit").includes("opacity: 1"), `orbit landed — got '${styleOf(".bo-orbit")}'`);
+		scrubTo(3.95);
+		await frames(4);
+		assert.true(styleOf(".bo-word").includes("opacity: 1"), `word landed — got '${styleOf(".bo-word")}'`);
+		assert.true(styleOf(".bo-tag").includes("opacity: 1"), `tag landed — got '${styleOf(".bo-tag")}'`);
+		scrubTo(0);
+		await frames(4);
+		assert.true(styleOf(".bo-plate").includes("opacity: 0"), `plate back on its origin at 0 — got '${styleOf(".bo-plate")}'`);
+		scrubTo(2);
+		await frames(4);
+		assert.true(styleOf(".bo-plate").includes("opacity: 1"), `plate lands again scrubbing forward — got '${styleOf(".bo-plate")}'`);
+		await windDown();
+	});
+	(0, import_qunit.test)("the transport survives an edit while parked", async function(assert) {
+		await gallery.renderStage(BuildOrder);
+		await waitUntil(() => handle().c?.run != null, { timeout: 4e3 });
+		await frames(10);
+		scrubTo(1.7);
+		await frames(4);
+		const before = handle().c.run;
+		document.querySelector("[aria-label=\"More delay\"]").click();
+		await waitUntil(() => handle().c?.run !== before, { timeout: 4e3 });
+		await frames(6);
+		const run = handle().c.run;
+		assert.true(Math.abs(run.time - 1.7) < .25, `the new run stands where the hand parked it — at ${run.time}`);
+		assert.true(styleOf(".bo-plate").includes("opacity: 1"), `plate still on finals after the edit — got '${styleOf(".bo-plate")}'`);
+		await windDown();
+	});
+	/**
+	* A real drag is not one synthetic input: it is pointerdown, THEN moves.
+	* Two contracts, both learned in Safari: the moment the hand lands the
+	* clock must stop (or the playing run crawls the thumb out from under the
+	* finger before the first `input` fires), and for the whole drag nothing
+	* may write the range's value programmatically — WebKit detaches its
+	* pointer tracking when that happens, and the scrubber reads as dead.
+	*/
+	(0, import_qunit.test)("a drag owns the thumb: nothing repaints the range under a hand", async function(assert) {
+		await gallery.renderStage(BuildOrder);
+		await waitUntil(() => handle().c?.run != null, { timeout: 4e3 });
+		await frames(15);
+		const range = document.querySelector(".bo-range");
+		range.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+		await frames(2);
+		const landed = range.value;
+		await frames(6);
+		assert.strictEqual(range.value, landed, "the thumb does not crawl under the finger while the hand holds it");
+		for (const v of [
+			"1.3",
+			"2.4",
+			"3.4"
+		]) {
+			range.value = v;
+			range.dispatchEvent(new Event("input", { bubbles: true }));
+			await frames(3);
+			assert.strictEqual(range.value, v, `the dragged value ${v} is not clobbered between input events`);
+		}
+		assert.true(styleOf(".bo-plate").includes("opacity: 1"), `the stage tracked the drag — plate landed at 3.4, got '${styleOf(".bo-plate")}'`);
+		range.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+		await frames(4);
+		assert.strictEqual(range.value, "3.4", "the released thumb is corrected only, never float-nudged");
+		document.querySelector(".bo-play").click();
+		await frames(10);
+		assert.true(Number(range.value) > 3.4, `play resumes from where the hand left it — range at ${range.value}`);
+		await windDown();
+	});
+	/**
+	* A violent drag: dozens of input events, several per frame, sawing back
+	* and forth across every build's window — the event rate of a real hand,
+	* not a polite scripted scrub. Wherever the thumb finally rests, every
+	* cue behind it must sit on its FINALS; a part stuck half-ghosted at a
+	* mid-flight sample means a late animation commit clobbered the still.
+	*/
+	(0, import_qunit.test)("a violent drag still lands every final", async function(assert) {
+		await gallery.renderStage(BuildOrder);
+		await waitUntil(() => handle().c?.run != null, { timeout: 4e3 });
+		await frames(10);
+		const range = document.querySelector(".bo-range");
+		range.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+		for (const [i, v] of [
+			3,
+			.5,
+			3.5,
+			.8,
+			2.5,
+			1.2,
+			3.9,
+			.3,
+			2.9,
+			1.6,
+			3.3,
+			.7,
+			2.1,
+			1,
+			3.7,
+			.4,
+			2.7,
+			1.4,
+			3.1,
+			.9
+		].entries()) {
+			range.value = String(v);
+			range.dispatchEvent(new Event("input", { bubbles: true }));
+			if (i % 3 === 2) await frames(1);
+		}
+		range.value = "3.2";
+		range.dispatchEvent(new Event("input", { bubbles: true }));
+		range.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+		await frames(8);
+		for (const sel of [
+			".bo-plate",
+			".bo-tail",
+			".bo-head",
+			".bo-orbit",
+			".bo-tip",
+			".bo-word",
+			".bo-rule"
+		]) assert.true(styleOf(sel).includes("opacity: 1"), `${sel} on its finals after the storm — got '${styleOf(sel)}'`);
+		const dash = (sel) => document.querySelector(sel)?.getAttribute("stroke-dasharray") ?? "(none)";
+		for (const sel of [
+			".bo-tail",
+			".bo-head",
+			".bo-orbit",
+			".bo-tip"
+		]) assert.false(dash(sel).startsWith("0"), `${sel} fully drawn — stroke-dasharray '${dash(sel)}'`);
+		await windDown();
+	});
+	/**
+	* The word builds in — and STAYS. After its delivery lands, the sprite
+	* must sit at its end values for the rest of the take: the restore puts
+	* Glimmer's own text nodes back, and the container must be wearing
+	* opacity 1, not the pin it stood on before its window.
+	*/
+	(0, import_qunit.test)("a delivered build stays landed for the rest of the take", async function(assert) {
+		await gallery.renderStage(BuildOrder);
+		await waitUntil(() => handle().c?.run != null, { timeout: 4e3 });
+		const word = document.querySelector(".bo-word");
+		const seen = [];
+		await waitUntil(() => {
+			const run = handle().c?.run;
+			if (!run) return false;
+			seen.push({
+				spans: word.querySelectorAll("span").length,
+				style: word.getAttribute("style") ?? "",
+				t: Math.round(run.time * 100) / 100
+			});
+			return run.time > 3.3;
+		}, { timeout: 9e3 });
+		const after = seen.filter((s) => s.t > 2.7 && s.t < 3.35);
+		assert.true(after.length > 3, `sampled the post-delivery stretch (${after.length} samples)`);
+		for (const s of after) {
+			const whole = s.style.includes("opacity: 1") && s.spans === 0;
+			assert.true(whole, `word landed and whole at t=${s.t} — style '${s.style}', ${s.spans} spans`);
+		}
+		await windDown();
+	});
+	/**
+	* Scrubbing PAST a delivery's end must finish the delivery: end values on
+	* the sprite, stand-in spans gone, Glimmer's own text nodes back. Leaving
+	* the split behind is how "the text exits": the paused spans survive the
+	* scrub, the next take pins the container to opacity 0 over them, and the
+	* take after that splits the wreckage of the first split.
+	*/
+	(0, import_qunit.test)("a scrub through a delivery gives the text back", async function(assert) {
+		await gallery.renderStage(BuildOrder);
+		await waitUntil(() => handle().c?.run != null, { timeout: 4e3 });
+		await frames(10);
+		const word = document.querySelector(".bo-word");
+		const range = document.querySelector(".bo-range");
+		range.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+		scrubTo(2.1);
+		await frames(4);
+		assert.true(word.querySelectorAll("span").length > 0, "mid-window still is a split delivery");
+		scrubTo(2.9);
+		await frames(4);
+		assert.strictEqual(word.querySelectorAll("span").length, 0, "past the end, the stand-in spans are gone");
+		assert.true((word.getAttribute("style") ?? "").includes("opacity: 1"), `the container wears its end values — got '${word.getAttribute("style")}'`);
+		assert.strictEqual(word.textContent?.trim(), "Choreo", "Glimmer's own text is back in the element");
+		scrubTo(2);
+		await frames(4);
+		assert.true(word.querySelectorAll("span").length > 0, "re-entering the window splits afresh");
+		scrubTo(3.9);
+		await frames(4);
+		assert.strictEqual(word.querySelectorAll("span").length, 0, "and leaving it restores again");
+		range.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+		await windDown();
+	});
+	/**
+	* Scrubbing the loop's SECOND take. Every earlier test scrubs the first
+	* run; the field failures (Safari and Chrome alike) all happened after
+	* the demo had looped — the early builds stuck on their pinned origins
+	* while the late builds landed. A take boundary is a full pass: the old
+	* run releases for measure, a fresh run re-pins every first keyframe,
+	* and THAT is the run a hand then drags through.
+	*/
+	(0, import_qunit.test)("after the loop wraps, a scrub still lands every final", async function(assert) {
+		await gallery.renderStage(BuildOrder);
+		await waitUntil(() => handle().c?.run != null, { timeout: 4e3 });
+		const first = handle().c.run;
+		await waitUntil(() => handle().c?.run !== first, { timeout: 1e4 });
+		await frames(10);
+		const range = document.querySelector(".bo-range");
+		range.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+		for (const v of [
+			.6,
+			2.8,
+			1.1,
+			3.6,
+			.9,
+			3.2
+		]) {
+			range.value = String(v);
+			range.dispatchEvent(new Event("input", { bubbles: true }));
+			await frames(2);
+		}
+		range.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+		await frames(8);
+		for (const sel of [
+			".bo-plate",
+			".bo-tail",
+			".bo-head",
+			".bo-orbit",
+			".bo-bead",
+			".bo-tip",
+			".bo-word",
+			".bo-rule"
+		]) assert.true(styleOf(sel).includes("opacity: 1"), `${sel} on its finals in take 2 — got '${styleOf(sel)}'`);
+		await windDown();
+	});
+});
+//#endregion