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

package/bundled-test-harness/assets/choreo-gallery-escort-test-jZEVk_V4.js

@@ -0,0 +1,187 @@
+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 { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-escort-test.gts
+/**
+* Escort — the acceptance page for the opened step vocabulary
+* (packages/choreo-gallery/realm/docs/step-vocabulary.md): a composite step the APP said for itself,
+* named and anchored against, with two values read from the flight it
+* names.
+*
+* The claim is geometric, and the geometry is the stage's own stylesheet —
+* container-query driven — so the stage is rendered the way the demo page
+* places it: inside the gallery root, in a well of a real size, unscaled.
+*
+* The assertions look MID-FLIGHT. At the ends any implementation agrees;
+* the frames in between are the ones a tween would have had to predict.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var THEME_KEY = "choreo-theme";
+var rect = (sel) => find(sel).getBoundingClientRect();
+var card = () => rect("[data-test-escort-card]");
+var badge = () => rect("[data-test-escort-badge]");
+var shadow = () => rect("[data-test-escort-shadow]");
+/** the badge's whole job: its right edge sits on the card's right edge */
+var pinError = () => Math.abs(card().right - badge().right);
+var blurOf = () => {
+	const filter = getComputedStyle(find("[data-test-escort-shadow]")).filter;
+	return Number(/blur\(([\d.]+)px\)/.exec(filter)?.[1] ?? NaN);
+};
+/** the three channels the follower writes, as the page has resolved them */
+var castStyle = () => {
+	const s = getComputedStyle(find("[data-test-escort-shadow]"));
+	return {
+		filter: s.filter,
+		opacity: s.opacity,
+		transform: s.transform
+	};
+};
+/** the ink at the centre of the cast, out of the resolved gradient */
+var castAlpha = () => {
+	const { backgroundImage } = getComputedStyle(find("[data-test-escort-shadow]"));
+	const alpha = /rgba\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*([\d.]+)\s*\)|color\(srgb\s+[\d.]+\s+[\d.]+\s+[\d.]+\s*\/\s*([\d.]+)\s*\)/.exec(backgroundImage);
+	return alpha ? Number(alpha[1] ?? alpha[2]) : 1;
+};
+/** the gallery root, where the palette — and the theme — is declared */
+var siteRoot = () => find(".choreo-site");
+var numberVar = (name) => Number(getComputedStyle(siteRoot()).getPropertyValue(name));
+(0, import_qunit.module)("Integration | Choreo gallery | escort", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	setupStageViewport(hooks, {
+		width: 1e3,
+		height: 660
+	});
+	let storedTheme = null;
+	hooks.beforeEach(function() {
+		try {
+			storedTheme = globalThis.localStorage.getItem(THEME_KEY);
+			globalThis.localStorage.removeItem(THEME_KEY);
+		} catch {
+			storedTheme = null;
+		}
+	});
+	hooks.afterEach(async function() {
+		let { setThemeMode } = await gallery.import("lib/theme");
+		setThemeMode("dark");
+		try {
+			if (storedTheme === null) globalThis.localStorage.removeItem(THEME_KEY);
+			else globalThis.localStorage.setItem(THEME_KEY, storedTheme);
+		} catch {}
+	});
+	async function renderEscort() {
+		let Escort = await gallery.stage("escort", "Escort");
+		await gallery.renderStage(Escort, {
+			width: 1e3,
+			height: 660
+		});
+	}
+	(0, import_qunit.test)("the badge is pinned mid-flight, not only at the ends", async function(assert) {
+		await renderEscort();
+		await frames(6);
+		const seatEl = find(".esc-seat");
+		const b = find("[data-test-escort-badge]");
+		assert.true(pinError() < 2, `AT REST off ${pinError().toFixed(1)} | seat ${JSON.stringify({
+			x: +seatEl.getBoundingClientRect().x.toFixed(1),
+			w: +seatEl.getBoundingClientRect().width.toFixed(1)
+		})} card ${JSON.stringify({
+			x: +card().x.toFixed(1),
+			w: +card().width.toFixed(1)
+		})} badge ${JSON.stringify({
+			x: +badge().x.toFixed(1),
+			w: +badge().width.toFixed(1)
+		})} badgeParent ${b.offsetParent?.className} badgeStyle '${b.getAttribute("style")}'`);
+		await click("[data-test-bay=\"2\"]");
+		await frames(3);
+		const step = card().left;
+		await frames(1);
+		const perFrame = Math.abs(card().left - step);
+		assert.true(perFrame > 1, `the card is genuinely in flight (${perFrame.toFixed(1)}px this frame)`);
+		assert.true(pinError() < 2, `the badge is ON the corner mid-flight (${pinError().toFixed(1)}px off, a frame of travel is ${perFrame.toFixed(1)}px)`);
+		await frames(60);
+		assert.true(pinError() < 2, `and lands on it (${pinError().toFixed(1)}px off)`);
+	});
+	(0, import_qunit.test)("the shadow reads lift: it spreads in transit and tightens on arrival", async function(assert) {
+		await renderEscort();
+		await frames(6);
+		const restBlur = blurOf();
+		const restWidth = shadow().width;
+		assert.true(restBlur > 0, `the shadow has a resting blur (${restBlur})`);
+		await click("[data-test-bay=\"2\"]");
+		await frames(4);
+		assert.true(blurOf() > restBlur + .5, `softer between bays (${blurOf().toFixed(2)} vs ${restBlur.toFixed(2)})`);
+		assert.true(shadow().width > restWidth + 2, `and wider (${shadow().width.toFixed(1)} vs ${restWidth.toFixed(1)})`);
+		await frames(110);
+		assert.true(Math.abs(blurOf() - restBlur) < .6, `back to its resting blur on arrival (${blurOf().toFixed(2)})`);
+		assert.true(Math.abs(shadow().width - restWidth) < 2, `and its resting width (${shadow().width.toFixed(1)})`);
+	});
+	(0, import_qunit.test)("the follower hands the shadow back to exactly the stylesheet it took it from", async function(assert) {
+		await renderEscort();
+		await frames(6);
+		const stylesheet = castStyle();
+		assert.strictEqual(stylesheet.transform, "none", "the untouched shadow has no transform to match");
+		await click("[data-test-bay=\"2\"]");
+		await frames(4);
+		assert.notDeepEqual(castStyle(), stylesheet, "the follower is driving it (or this test proves nothing)");
+		await frames(120);
+		assert.deepEqual(castStyle(), stylesheet, "and the window closing put back what the stylesheet had");
+	});
+	(0, import_qunit.test)("the cast is on light mode’s shadow ladder, not beside it", async function(assert) {
+		let { setThemeMode } = await gallery.import("lib/theme");
+		setThemeMode("light");
+		await renderEscort();
+		await frames(6);
+		const a = numberVar("--shadow-a");
+		assert.true(a > 0, `light mode keeps its shadows (${a})`);
+		assert.true(a < 1, `light mode softens its shadows (${a})`);
+		const before = castAlpha();
+		const root = siteRoot();
+		try {
+			root.style.setProperty("--shadow-a", String(a / 2));
+			const after = castAlpha();
+			assert.true(Math.abs(after - before / 2) < .01, `halving --shadow-a halves the cast (${before} → ${after})`);
+		} finally {
+			root.style.removeProperty("--shadow-a");
+		}
+	});
+	(0, import_qunit.test)("a retarget mid-flight is followed too — nothing is re-aimed", async function(assert) {
+		await renderEscort();
+		await frames(6);
+		const errors = [];
+		const cardLefts = [];
+		let stop = false;
+		const watch = () => {
+			if (stop) return;
+			const card = find("[data-test-escort-card]");
+			if (card && find("[data-test-escort-badge]")) {
+				errors.push(pinError());
+				cardLefts.push(card.getBoundingClientRect().left);
+			}
+			requestAnimationFrame(watch);
+		};
+		await click("[data-test-bay=\"2\"]");
+		await frames(4);
+		requestAnimationFrame(watch);
+		await click("[data-test-bay=\"1\"]");
+		await frames(4);
+		const midway = pinError();
+		for (let i = 0; i < 400; i++) {
+			await frames(1);
+			if (cardLefts.length > 24) {
+				const recent = cardLefts.slice(-12);
+				if (Math.max(...recent) - Math.min(...recent) < .5) break;
+			}
+		}
+		stop = true;
+		assert.true(midway < 2, `on the corner through the retarget (${midway.toFixed(1)}px off)`);
+		assert.true(errors.length > 20, `the whole interruption was watched (${errors.length} frames)`);
+		const worst = Math.max(...errors);
+		assert.true(worst < 4, `no single frame of the interruption broke the pin (worst ${worst.toFixed(1)}px over ${errors.length} frames)`);
+		assert.true(pinError() < 2, `lands on the new bay's corner (${pinError().toFixed(1)}px off)`);
+		let worstStep = 0;
+		for (let i = 1; i < cardLefts.length; i++) worstStep = Math.max(worstStep, Math.abs(cardLefts[i] - cardLefts[i - 1]));
+		const travel = Math.max(...cardLefts) - Math.min(...cardLefts);
+		assert.true(travel > 60, `the flight is real at this scale (${travel.toFixed(1)}px of travel)`);
+		assert.true(worstStep < travel / 4, `the card never teleports through the retarget (worst single-frame step ${worstStep.toFixed(1)}px of ${travel.toFixed(1)}px travelled, over ${cardLefts.length} frames)`);
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-films-test-DLDQzsxb.js

@@ -0,0 +1,140 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { M as waitUntil, a as find, 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, t as setupMockMatrix } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { i as setupChoreo } from "./test-support-BcBv__98.js";
+import { vt as setupBaseRealm } from "./base-realm-B17zVqh6.js";
+import { t as choreoGalleryContents } from "./choreo-gallery-DZm1KZ20.js";
+import { t as renderCard } from "./render-component-B15Z0e2v.js";
+//#region tests/integration/choreo-gallery-films-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var FILM_PAGE = "<!doctype html><html><head><title>Film</title></head><body></body></html>";
+(0, import_qunit.module)("Integration | Choreo gallery | films", 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 renderFilm(slug, className, format) {
+		let demo = new (await (loader.import(`${testRealmURL}stages/${slug}`)))[className]({
+			slug,
+			title: slug,
+			group: "Film",
+			lede: `The ${slug} film`,
+			apis: [],
+			sample: "",
+			slowmo: false,
+			theater: true
+		});
+		await renderCard(loader, demo, format);
+	}
+	(0, import_qunit.test)("a film is a poster in a tile, with no frame and no WebGL", async function(assert) {
+		await renderFilm("towers", "TowersDemo", "embedded");
+		assert.dom(".tw-face .ft-tile").exists("the tile wears the poster");
+		assert.dom(".tw-face .ft-art").hasAttribute("src", `${testRealmURL}asset/towers-poster.webp`, "the poster is the realm’s own still");
+		assert.dom(".tw-face iframe").doesNotExist("no film runs in a tile");
+		assert.dom(".tw-face button.ft-play").doesNotExist("a tile with nowhere to open has an inert ring");
+	});
+	(0, import_qunit.test)("on its page a film plays in a frame that names it", async function(assert) {
+		await renderFilm("towers", "TowersDemo", "isolated");
+		await waitFor(".tw-face iframe.film-frame");
+		let frame = find(".tw-face iframe.film-frame");
+		assert.true(frame.srcdoc.includes("<html data-film=\"towers\">"), "the document names the film it plays");
+		assert.true(frame.srcdoc.includes(`<base href="${testRealmURL}film-app/">`), "the document resolves its scripts and media against the realm");
+		assert.dom("[data-demo-stage]").hasAttribute("data-well", "wide", "Towers asks for a wide well");
+		assert.dom(".tw-face .film-grip").exists("the frame can be resized");
+	});
+	(0, import_qunit.test)("the film’s poster stands in its frame’s place until the film’s first frame is up", async function(assert) {
+		await renderFilm("towers", "TowersDemo", "isolated");
+		assert.dom("[data-test-film=\"towers\"] [data-test-film-poster]").hasAttribute("src", `${testRealmURL}asset/towers-poster.webp`, "the page’s stage shows the film’s still from its first render");
+		await waitFor("[data-test-film=\"towers\"] [data-test-film-frame]");
+		let frame = find("[data-test-film=\"towers\"] [data-test-film-frame]");
+		await waitUntil(() => frame.contentDocument?.readyState === "complete");
+		assert.dom(frame).doesNotHaveAttribute("data-test-film-shown", "the frame stays clear of the poster while the film loads");
+		assert.dom("[data-test-film=\"towers\"] [role=\"status\"]").hasText("Loading the film…", "and a screen reader hears it is loading");
+		frame.contentWindow.eval("parent.postMessage({ type: 'choreo-film:first-frame' }, '*')");
+		await waitUntil(() => frame.hasAttribute("data-test-film-shown"));
+		assert.dom(frame).hasAttribute("data-test-film-shown", "", "the film comes up over its poster");
+		assert.dom("[data-test-film=\"towers\"] [data-test-film-poster]").exists("the poster stays under the frame");
+		assert.dom("[data-test-film=\"towers\"] [role=\"status\"]").doesNotExist("the loading status goes with the poster’s turn");
+	});
+	(0, import_qunit.test)("the stage’s controls keep their own ink, type and cursor inside the site", async function(assert) {
+		await renderFilm("towers", "TowersDemo", "isolated");
+		await waitFor(".tw-face iframe.film-frame");
+		let way = getComputedStyle(find(".tw-face [data-film-theater]"));
+		assert.strictEqual(way.color, "rgb(242, 233, 210)", "the theater button wears its own ink, not the page’s");
+		assert.strictEqual(way.fontSize, "11px", "and its own type");
+		assert.strictEqual(getComputedStyle(find(".tw-face .film-grip")).cursor, "nwse-resize", "the grip shows the resize cursor");
+	});
+	(0, import_qunit.test)("theater brings the stage to the front, and the mark leads back", async function(assert) {
+		await renderFilm("sagrada", "SagradaDemo", "isolated");
+		await waitFor(".sg-face iframe.film-frame");
+		let frame = find(".sg-face iframe.film-frame");
+		await click("[data-film-theater]");
+		assert.dom(".demo-body.is-theater").exists("the page is in theater");
+		assert.dom("[data-film-theater]").doesNotExist("the way in stands down once you are through it");
+		assert.dom(".sg-face .film-grip").doesNotExist("in theater the frame is the window");
+		assert.dom(".theater-built").exists("the mark is the way out");
+		assert.strictEqual(find(".sg-face iframe.film-frame"), frame, "the frame is the same element: entering theater does not reload the film");
+		await click(".theater-built");
+		assert.dom(".demo-body.is-theater").doesNotExist("back on the page");
+		assert.dom("[data-film-theater]").exists("the way in is back");
+	});
+	async function heardByFilm(face) {
+		await waitFor(`${face} iframe.film-frame`);
+		let frame = find(`${face} iframe.film-frame`);
+		await waitUntil(() => frame.contentDocument?.title === "Film");
+		let heard = [];
+		frame.contentWindow.addEventListener("message", (event) => heard.push({ ...event.data }));
+		return heard;
+	}
+	(0, import_qunit.test)("the Towers notes play their joins on the film in the frame", async function(assert) {
+		await renderFilm("towers", "TowersDemo", "isolated");
+		let heard = await heardByFilm(".tw-face");
+		assert.dom(".dd-joins button").exists({ count: 10 }, "the strip is live");
+		await click(".dd-joins button:first-child");
+		await waitUntil(() => heard.length > 0);
+		assert.deepEqual(heard, [{
+			type: "choreo-film:preview-join",
+			join: "wipe"
+		}], "the join is posted to the film’s document");
+	});
+	(0, import_qunit.test)("the Sagrada notes play their joins on the film in the frame", async function(assert) {
+		await renderFilm("sagrada", "SagradaDemo", "isolated");
+		let heard = await heardByFilm(".sg-face");
+		assert.dom(".dd-joins button").exists({ count: 8 }, "the strip is live");
+		await click(".dd-joins button:nth-child(5)");
+		await waitUntil(() => heard.length > 0);
+		assert.deepEqual(heard, [{
+			type: "choreo-film:preview-join",
+			join: "iris"
+		}], "the join is posted to the film’s document");
+	});
+	(0, import_qunit.test)("Sylva has a theater but no resize grip", async function(assert) {
+		await renderFilm("sylva", "SylvaDemo", "isolated");
+		await waitFor(".sy-face iframe.film-frame");
+		assert.true(find(".sy-face iframe.film-frame").srcdoc.includes("<html data-film=\"sylva\">"), "the document plays Sylva");
+		assert.dom(".sy-face [data-film-theater]").exists();
+		assert.dom(".sy-face .film-grip").doesNotExist();
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-filter-test-BJv8KEeP.js

@@ -0,0 +1,46 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { d as click } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { a as setupChoreoGalleryTest, i as galleryInstance, n as GALLERY_DEMOS } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-filter-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+/** the catalog: every linked demo, with the group it files under */
+var catalog = GALLERY_DEMOS.map((slug) => ({
+	slug,
+	group: galleryInstance(`demos/${slug}.json`).data.attributes.group
+}));
+function chip(label) {
+	const found = [...document.querySelectorAll(".chip")].find((c) => c.textContent?.trim() === label);
+	if (!found) throw new Error(`no chip named ${label}`);
+	return found;
+}
+/**
+* `animationsSettled()` cannot be used here: this gallery contains demos that
+* loop forever, so the page is never idle by design. Wait out the card spring
+* instead — what is being asserted is the resting state, not the path to it.
+*/
+function afterTheSwitch() {
+	return new Promise((resolve) => setTimeout(resolve, 900));
+}
+/** cards a reader can actually see */
+function visible() {
+	return [...document.querySelectorAll(".card")].filter((card) => Number(getComputedStyle(card).opacity) > .5);
+}
+(0, import_qunit.module)("Integration | Choreo gallery | gallery filter", function(hooks) {
+	let gallery = setupChoreoGalleryTest(hooks);
+	(0, import_qunit.test)("filtering out and back leaves every card on screen", async function(assert) {
+		await gallery.renderGallery();
+		await afterTheSwitch();
+		assert.strictEqual(visible().length, catalog.length, "all of them at rest");
+		await click(chip("Drag"));
+		await afterTheSwitch();
+		const drag = catalog.filter((demo) => demo.group === "Drag").length;
+		assert.strictEqual(visible().length, drag, "only the drag demos");
+		const fading = [...document.querySelectorAll(".card")].filter((card) => Number(getComputedStyle(card).opacity) <= .5);
+		assert.true(fading.every((card) => card.inert), `the cards on their way out take no input (${fading.length} leaving)`);
+		await click(chip("All"));
+		await afterTheSwitch();
+		assert.strictEqual(visible().length, catalog.length, `and back to all of them (dom=${document.querySelectorAll(".card").length})`);
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-fold-test-BssKC8A8.js

@@ -0,0 +1,180 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { T as settled } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { t as animationsSettled } from "./test-support-BOFeeYuE.js";
+import { a as setupChoreoGalleryTest, o as setupStageViewport, r as frames } from "./choreo-gallery-stage-DcKKsdcu.js";
+//#region tests/integration/choreo-gallery-fold-test.gts
+/**
+* The Fold demo's argument, asserted.
+*
+* The tile exists to show one thing: on a backward seek, Choreo calls the
+* host's reset and then replays the remaining prefix, so a scrub is a
+* RE-DERIVATION rather than an undo. The A/B toggle turns the host's half of
+* that contract off, and the two latching commands — `soak.start` and
+* `cone.drop` — are where the difference shows. Everything else in the
+* schedule is an absolute setting that re-derives correctly by accident, so a
+* test that only checked `gas` would pass against a broken host.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+/** the score's own length: five 0.9s holds and a 0.5s tail */ var DURATION = 5;
+/** the moment the demo argues with: after `damper.open`, before both latches */
+var PROBE = 1.2;
+/**
+* A replay swaps the run, and the new one does not exist until Ember has
+* re-rendered the region AND the transport has adopted it on a later frame.
+* Waiting only on frames seeks the run that is being thrown away — which
+* silently produces the RIGHT answer for the wrong reason, because a fresh
+* run sitting at zero looks exactly like a host that reset correctly.
+*/
+async function restart(app) {
+	app.replay();
+	await settled();
+	await frames(4);
+}
+/**
+* Mount, take the demo's own handle, choose which host is wired, and run the
+* score to its end.
+*
+* The mode is chosen BEFORE the first firing on purpose. `honoursReset` is
+* tracked and read by the template, so flipping it mid-run re-renders the
+* region and swaps the run underneath whatever seek comes next — and a fresh
+* run sitting at zero looks exactly like a host that reset correctly, so the
+* broken case would pass for the wrong reason.
+*/
+async function fired(honours = true) {
+	await gallery.renderStage(Fold);
+	const app = document.querySelector(".kf-stage").fold;
+	if (!honours) {
+		app.setFold(false);
+		await settled();
+	}
+	await restart(app);
+	app.seek(DURATION);
+	await frames(6);
+	return app;
+}
+var gallery;
+var Fold;
+(0, import_qunit.module)("Integration | Choreo gallery | fold", function(hooks) {
+	gallery = setupChoreoGalleryTest(hooks);
+	setupStageViewport(hooks);
+	hooks.beforeEach(async function() {
+		Fold = await gallery.stage("fold", "Fold");
+	});
+	(0, import_qunit.test)("a seek to the end leaves the whole schedule applied", async function(assert) {
+		const app = await fired();
+		assert.deepEqual(app.state, {
+			cone: true,
+			damper: true,
+			gas: 0,
+			soak: true
+		}, "every command landed: the latches are set and gas.off took gas back to 0");
+	});
+	(0, import_qunit.test)("rewinding resets the host and replays only the prefix", async function(assert) {
+		const app = await fired();
+		app.seek(PROBE);
+		await frames(6);
+		assert.deepEqual(app.state, {
+			cone: false,
+			damper: true,
+			gas: 2,
+			soak: false
+		}, "at 1.2s: gas re-derived to 2, damper still open, both latches cleared");
+		assert.strictEqual(app.resets, 1, "the host was reset exactly once");
+	});
+	(0, import_qunit.test)("a host that ignores the reset keeps latches from a future that no longer happened", async function(assert) {
+		const app = await fired(false);
+		assert.deepEqual(app.state, {
+			cone: true,
+			damper: true,
+			gas: 0,
+			soak: true
+		}, "the broken host still ran the whole schedule forward");
+		app.seek(PROBE);
+		await frames(6);
+		assert.deepEqual(app.state, {
+			cone: true,
+			damper: true,
+			gas: 2,
+			soak: true
+		}, `gas re-derives by accident — soak and cone are the ones left wrong (got ${JSON.stringify(app.state)}, resets ${app.resets})`);
+		assert.strictEqual(app.resets, 0, "and it never counted a reset");
+	});
+	(0, import_qunit.test)("play at the end starts over from cold rather than seeking back", async function(assert) {
+		const app = await fired();
+		assert.true(app.state.cone, "the run is parked at its end");
+		app.play();
+		await settled();
+		await frames(4);
+		assert.deepEqual(app.state, {
+			cone: false,
+			damper: false,
+			gas: 0,
+			soak: false
+		}, "the kiln is cold again: a fresh run, not a rewind through the old one");
+		assert.strictEqual(app.resets, 0, "and the reset count starts over too");
+	});
+	(0, import_qunit.test)("play at the end comes clean even for the host that ignores resets", async function(assert) {
+		const app = await fired(false);
+		app.play();
+		await settled();
+		await frames(4);
+		assert.deepEqual(app.state, {
+			cone: false,
+			damper: false,
+			gas: 0,
+			soak: false
+		}, "the broken host is cold again, because nothing was rewound");
+	});
+	/**
+	* The scene has to FIT, in every box a card comes in.
+	*
+	* Two traps are baked into this test because both of them let an earlier
+	* version pass while the temperature was visibly cut off the top of the
+	* card. The stage CENTRES its column, so content that does not fit
+	* overflows at both ends and `scrollHeight` — which only reports the
+	* downward half — says everything is fine. And the layout has to be
+	* measured after it settles, not on the frame `render()` returns.
+	*/
+	const fits = (label, w, h) => (0, import_qunit.test)(`the whole scene fits ${label} without clipping`, async function(assert) {
+		await gallery.renderStage(Fold, {
+			width: w,
+			height: h
+		});
+		const handle = document.querySelector(".kf-stage").fold;
+		await restart(handle);
+		handle.seek(DURATION);
+		await frames(6);
+		handle.c?.run?.cancel();
+		await animationsSettled();
+		const stage = document.querySelector(".kf-stage");
+		const own = [...stage.children].filter((el) => el.offsetHeight > 0).filter((el) => el.className.startsWith("kf-"));
+		const top = Math.min(...own.map((el) => el.offsetTop));
+		const bottom = Math.max(...own.map((el) => el.offsetTop + el.offsetHeight));
+		const report = JSON.stringify({
+			bottom,
+			frame: stage.clientHeight,
+			parts: own.map((el) => [
+				el.className.split(" ")[0],
+				el.offsetTop,
+				el.offsetHeight
+			]),
+			top
+		});
+		assert.true(top >= -1, `nothing overflows the top ${report}`);
+		assert.true(bottom <= stage.clientHeight + 1, `nothing overflows the bottom ${report}`);
+	});
+	fits("a phone-sized card", 359, 400);
+	fits("a desktop card", 557, 400);
+	(0, import_qunit.test)("repeating the same seek changes nothing", async function(assert) {
+		const app = await fired();
+		app.seek(PROBE);
+		await frames(6);
+		const once = { ...app.state };
+		const resets = app.resets;
+		app.seek(PROBE);
+		await frames(6);
+		assert.deepEqual(app.state, once, "idempotent: the same clock, the same state");
+		assert.strictEqual(app.resets, resets, "and no second reset");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/choreo-gallery-guide-pages-test-DS41eNNV.js

@@ -0,0 +1,114 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { 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 { k as visit, o as waitFor } 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, t as setupMockMatrix, z as setupUserSubscription } from "./mock-matrix-FjsXmU7-.js";
+import { a as choreoGalleryRealmOf, i as choreoGalleryGuides, r as choreoGalleryGuidePages } from "./choreo-gallery-DZm1KZ20.js";
+import { t as getPageTitle } from "./test-support-C3PTOFHZ.js";
+//#region tests/acceptance/choreo-gallery-guide-pages-test.gts
+/**
+* A guide is read on its page: the `Guide` card beside the guide's Markdown,
+* at the Markdown's URL without `.md`. The page is the gallery's frame around
+* the guide's own Markdown, with the guides' sections beside it, the guide's
+* pager and its live demos, and none of the host's file chrome.
+*/ var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var StubHostModeService = class extends HostModeService {
+	get isActive() {
+		return true;
+	}
+	get hostModeOrigin() {
+		return testHostModeRealmURL.replace(/\/test\/?$/, "");
+	}
+};
+var guide = (slug) => `${testHostModeRealmURL}docs/guides/${slug}`;
+var article = "[data-test-guide-article]";
+(0, import_qunit.module)("Acceptance | Choreo gallery | guide pages", 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(["enter", "presence"]),
+				...choreoGalleryGuidePages(["core-start", "core-presence"])
+			}
+		});
+		mockMatrixUtils.setActiveRealms([testHostModeRealmURL]);
+	});
+	(0, import_qunit.test)("a guide's page is the gallery's, with the guide's Markdown and no file chrome", async function(assert) {
+		await visit("/test/docs/guides/core-start");
+		await waitFor(`${article} h1`, { timeout: 15e3 });
+		assert.dom(`[data-test-host-mode-card="${guide("core-start")}"]`).exists("the page is the guide card");
+		assert.dom(`${article} h1`).hasText("Getting Started");
+		assert.dom("[data-choreo-site] [data-test-guide-article]").exists("inside the gallery’s frame and palette");
+		assert.dom("[data-test-site-home]").hasAttribute("href", testHostModeRealmURL, "the brand leads home");
+		assert.dom("[data-test-guide-home]").hasAttribute("href", testHostModeRealmURL, "and so does the nav");
+		assert.dom("[data-test-file-isolated]").doesNotExist("no file view around it");
+		assert.dom("[data-test-file-download]").doesNotExist("no Download");
+		assert.dom("[data-test-file-copy-link]").doesNotExist("no Copy link");
+		assert.strictEqual(getPageTitle(), "Getting Started", "the page title");
+		assert.notStrictEqual(getComputedStyle(document.querySelector(`${article} p`)).maxWidth, "none", "its prose runs at a reading measure");
+	});
+	(0, import_qunit.test)("the guides' sections run down the side, with the guide marked", async function(assert) {
+		await visit("/test/docs/guides/core-presence");
+		await waitFor("[data-test-guide-section]", { timeout: 15e3 });
+		let titles = [...document.querySelectorAll("[data-test-guide-section-title]")].map((title) => title.textContent.replace(/\s+/g, " ").trim());
+		assert.deepEqual(titles, [
+			"01 Core glimmer-motion",
+			"02 Interactive Choreo",
+			"03 Spatial & 3D Choreo",
+			"04 Recorded & Film Choreo"
+		], "the four sections of the index, in its order");
+		assert.dom("[data-test-guide-nav-link]").exists({ count: Object.keys(choreoGalleryGuides()).length }, "every guide, whether or not this realm holds it");
+		assert.dom("[data-test-guide-nav] [aria-current=\"page\"]").exists({ count: 1 }, "one guide is marked");
+		assert.dom("[data-test-guide-nav-link=\"core-presence\"]").hasAttribute("aria-current", "page", "the one being read");
+		assert.dom("[data-test-guide-nav-link=\"core-layout\"]").hasAttribute("href", guide("core-layout"), "each links its page");
+	});
+	(0, import_qunit.test)("the guide's pager and links lead to the guides' pages", async function(assert) {
+		await visit("/test/docs/guides/core-presence");
+		await waitFor(`${article} h1`, { timeout: 15e3 });
+		let pager = [...document.querySelectorAll(`${article} a`)].slice(-3);
+		assert.deepEqual(pager.map((link) => [link.textContent, new URL(link.getAttribute("href"), guide("core-presence")).href]), [
+			["← Animating an Element", guide("core-elements")],
+			["All guides", guide("README")],
+			["Animating Layout →", guide("core-layout")]
+		], "the pager names the neighbours’ pages, and the index’s");
+	});
+	(0, import_qunit.test)("an embedded demo is live, and links its guide unless it is the one being read", async function(assert) {
+		await visit("/test/docs/guides/core-start");
+		await waitFor(`${article} .markdown-bfm-card-slot--block [data-test-demo-tile]`, { timeout: 15e3 });
+		assert.dom(`${article} .markdown-bfm-card-slot--block [data-test-tile-title]`).hasText("Enter", "core-start embeds the enter demo");
+		assert.dom(`${article} .markdown-bfm-card-slot--block [data-test-tile-stage]`).exists("with its live stage");
+		assert.dom(`${article} [data-test-guide-link]`).hasAttribute("href", guide("core-targets"), "its guide is another one, so it links it");
+		await visit("/test/docs/guides/core-presence");
+		await waitFor(`${article} .markdown-bfm-card-slot--block [data-test-demo-tile]`, { timeout: 15e3 });
+		assert.dom(`${article} .markdown-bfm-card-slot--block [data-test-tile-title]`).hasText("Presence", "core-presence embeds the presence demo");
+		assert.dom(`${article} [data-test-guide-link]`).doesNotExist("its guide is this one, so there is no link back to it");
+	});
+	(0, import_qunit.test)("the index's page is a guide page too", async function(assert) {
+		await visit("/test/docs/guides/README");
+		await waitFor(`${article} h1`, { timeout: 15e3 });
+		assert.dom(`${article} h1`).hasText("The Choreo guides");
+		assert.dom("[data-test-guide-nav] [aria-current=\"page\"]").hasText("All guides", "the index is the one marked");
+		assert.dom(`${article} a[href="core-start"]`).exists("and its list leads to the guides’ pages");
+	});
+});
+//#endregion