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

package/bundled-test-harness/assets/single-stack-test-DYcu_v7Z.js

@@ -0,0 +1,652 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL, Rc as Deferred } from "./runtime-common-BTaLJEw-.js";
+import { M as waitUntil, T as settled, a as find, c as triggerKeyEvent, d as click, f as focus, l as triggerEvent, s as fillIn, y as currentURL } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { Et as percySnapshot, L as setupRealmCacheTeardown, st as visitOperatorMode } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { n as setupInteractSubmodeTests, r as testRealm2URL } from "./interact-submode-setup-C5bKXq73.js";
+//#region tests/acceptance/interact-submode/single-stack-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+async function settleForHitTest() {
+	await Promise.all(document.getAnimations().filter((animation) => animation instanceof CSSTransition).map((animation) => animation.finished.catch(() => void 0)));
+	document.querySelector("#ember-testing-container")?.scrollTo(0, 0);
+}
+(0, import_qunit.module)("Acceptance | interact submode | single stack tests", function(hooks) {
+	let realm;
+	setupInteractSubmodeTests(hooks, { setRealm(value) {
+		realm = value;
+	} });
+	(0, import_qunit.module)("1 stack", function(hooks) {
+		setupRealmCacheTeardown(hooks);
+		(0, import_qunit.test)("restoring the stack from query param", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}, {
+				id: `${testRealmURL}Pet/mango`,
+				format: "isolated"
+			}]] });
+			await percySnapshot(assert);
+			assert.dom("[data-test-stack-card-index=\"0\"] [data-test-boxel-card-header-title]").includesText("Person");
+			assert.dom("[data-test-stack-card-index=\"1\"] [data-test-boxel-card-header-title]").includesText("Pet");
+			await click("[data-test-stack-card-index=\"1\"] [data-test-close-button]");
+			assert.operatorModeParametersMatch(currentURL(), { stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			await click("[data-test-operator-mode-stack] [data-test-pet=\"Mango\"]");
+			assert.operatorModeParametersMatch(currentURL(), {
+				stacks: [[{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				}, {
+					id: `${testRealmURL}Pet/mango`,
+					format: "isolated"
+				}]],
+				submode: "interact",
+				cardPreviewFormat: "isolated",
+				fileView: "inspector",
+				openDirs: {},
+				moduleInspector: "schema",
+				trail: []
+			});
+			await click("[data-test-stack-card-index=\"1\"] [data-test-edit-button]");
+			assert.operatorModeParametersMatch(currentURL(), {
+				stacks: [[{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				}, {
+					id: `${testRealmURL}Pet/mango`,
+					format: "edit"
+				}]],
+				submode: "interact",
+				fileView: "inspector",
+				openDirs: {},
+				cardPreviewFormat: "isolated",
+				moduleInspector: "schema",
+				trail: []
+			});
+		});
+		(0, import_qunit.test)("a realm event with known clientRequestId is ignored", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Pet/vangogh`,
+					format: "edit"
+				}]],
+				codePath: `${testRealmURL}Pet/vangogh.json`
+			});
+			let deferred = new Deferred();
+			this.onSave(() => {
+				deferred.fulfill();
+			});
+			await fillIn(`[data-test-field="name"] input`, "Renamed via UI");
+			await deferred.promise;
+			await click("[data-test-edit-button]");
+			let knownClientRequestId = getService("card-service").clientRequestIds.values().next().value;
+			await realm.write("Pet/vangogh.json", JSON.stringify({ data: {
+				type: "card",
+				attributes: { name: "Renamed via realm call" },
+				meta: { adoptsFrom: {
+					module: "http://test-realm/test/pet",
+					name: "Pet"
+				} }
+			} }), { clientRequestId: knownClientRequestId });
+			await settled();
+			assert.dom("[data-test-pet-title]").containsText("Renamed via UI");
+		});
+		(0, import_qunit.test)("clicking the visible header of a buried card closes the cards above it", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}, {
+				id: `${testRealmURL}Pet/mango`,
+				format: "isolated"
+			}]] });
+			await settleForHitTest();
+			let buriedHeader = find("[data-test-stack-card-index=\"0\"] [data-test-stack-card-header]");
+			let topCard = find("[data-test-stack-card-index=\"1\"]");
+			if (!buriedHeader || !topCard) throw new Error("expected a buried card header and a top card");
+			let headerRect = buriedHeader.getBoundingClientRect();
+			let visibleBottom = Math.min(headerRect.bottom, topCard.getBoundingClientRect().top);
+			assert.ok(visibleBottom > headerRect.top, "part of the buried header shows above the top card");
+			let target = document.elementFromPoint(headerRect.left + headerRect.width / 2, (headerRect.top + visibleBottom) / 2);
+			if (!target) throw new Error("no element is hit over the buried header");
+			assert.ok(buriedHeader.contains(target), `the buried header receives the pointer (hit: ${target.tagName}.${target.getAttribute("class")})`);
+			await click(target);
+			assert.dom("[data-test-stack-card-index]").exists({ count: 1 });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).exists("the clicked card is now the top of the stack");
+		});
+		(0, import_qunit.test)("a click above an expanded card does not reach the faded cards buried under it", async function(assert) {
+			await visitOperatorMode({ stacks: [[
+				{
+					id: `${testRealmURL}index`,
+					format: "isolated"
+				},
+				{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				},
+				{
+					id: `${testRealmURL}Pet/vangogh`,
+					format: "isolated"
+				},
+				{
+					id: `${testRealmURL}Pet/mango`,
+					format: "isolated"
+				}
+			]] });
+			await click("[data-test-stack-card-index=\"3\"] [data-test-more-options-button]");
+			await click("[data-test-boxel-menu-item-text=\"Expand to Full Width\"]");
+			assert.dom("[data-test-stack-card-index=\"3\"]").hasClass("expanded", "the top card is expanded");
+			await settleForHitTest();
+			let expandedCard = find("[data-test-stack-card-index=\"3\"]");
+			let fadedCards = [
+				0,
+				1,
+				2
+			].map((index) => find(`[data-test-stack-card-index="${index}"]`));
+			if (!expandedCard || fadedCards.some((card) => !card)) throw new Error("expected an expanded card over three faded cards");
+			let expandedTop = expandedCard.getBoundingClientRect().top;
+			let strip = fadedCards.map((card) => card?.querySelector("[data-test-stack-card-header]")?.getBoundingClientRect()).find((rect) => rect && rect.top < expandedTop);
+			if (!strip) throw new Error("expected a faded header to rise above the expanded card");
+			let target = document.elementFromPoint(strip.left + strip.width / 2, (strip.top + Math.min(strip.bottom, expandedTop)) / 2);
+			if (!target) throw new Error("no element is hit above the expanded card");
+			let hit = `${target.tagName}.${target.getAttribute("class")}`;
+			assert.ok(find("[data-test-operator-mode-stack]")?.contains(target), `the hit-test lands on the stack (hit: ${hit})`);
+			assert.notOk(fadedCards.some((card) => card?.contains(target)), `no faded card receives the pointer (hit: ${hit})`);
+			await click(target);
+			assert.dom("[data-test-stack-card-index]").exists({ count: 4 });
+			assert.dom("[data-test-stack-card-index=\"3\"]").hasClass("expanded", "the top card stays expanded");
+		});
+		(0, import_qunit.test)("restoring the stack from query param when card is in edit format", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "edit"
+			}]] });
+			await percySnapshot(assert);
+			assert.dom("[data-test-field=\"firstName\"] input").exists();
+		});
+		(0, import_qunit.test)("click left or right add card button will open the search panel and then click on a recent card will open a new stack on the left or right", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}, {
+				id: `${testRealmURL}Pet/mango`,
+				format: "edit"
+			}]] });
+			let operatorModeStateService = getService("operator-mode-state-service");
+			let recentCardsService = getService("recent-cards-service");
+			operatorModeStateService.state.stacks[0].map((item) => recentCardsService.add(item.id));
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 1 });
+			assert.dom("[data-test-add-card-left-stack]").exists();
+			assert.dom("[data-test-add-card-right-stack]").exists();
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("prompt");
+			await click("[data-test-add-card-left-stack]");
+			assert.dom("[data-test-search-field]").isFocused();
+			assert.dom("[data-test-search-sheet]").hasClass("prompt");
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("prompt");
+			assert.dom("[data-test-operator-mode-stack=\"0\"]").includesText("Mango");
+			assert.dom("[data-test-operator-mode-stack=\"1\"]").includesText("Fadhlan");
+			assert.dom("[data-test-add-card-left-stack]").doesNotExist();
+			assert.dom("[data-test-add-card-right-stack]").doesNotExist();
+			await click("[data-test-operator-mode-stack=\"0\"] [data-test-close-button]");
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 1 }, "after close, expect 1 stack");
+			assert.dom("[data-test-add-card-left-stack]").exists("after close, expect add to left stack button");
+			assert.dom("[data-test-add-card-right-stack]").exists("after close, expect add to right stack button");
+			await click("[data-test-add-card-left-stack]");
+			assert.dom("[data-test-search-sheet]").hasClass("prompt");
+			await click(`[data-test-search-result="${testRealmURL}Person/fadhlan"]`);
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("prompt");
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 2 });
+			assert.dom("[data-test-operator-mode-stack=\"0\"]").includesText("Fadhlan");
+			assert.dom("[data-test-operator-mode-stack=\"1\"]").includesText("Mango");
+			assert.dom("[data-test-add-card-left-stack]").doesNotExist();
+			assert.dom("[data-test-add-card-right-stack]").doesNotExist();
+			await click("[data-test-operator-mode-stack=\"0\"] [data-test-close-button]");
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 1 });
+			assert.dom("[data-test-add-card-left-stack]").exists();
+			assert.dom("[data-test-add-card-right-stack]").exists();
+			await click("[data-test-open-search-field]");
+			assert.dom("[data-test-search-sheet]").hasClass("prompt");
+			await click(`[data-test-search-result="${testRealmURL}Person/fadhlan"]`);
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("prompt");
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 1 });
+			assert.dom("[data-test-neighbor-stack-trigger]").exists({ count: 2 });
+			await click("[data-test-workspace-chooser-toggle]");
+			assert.dom("[data-test-dashboard]").exists();
+			assert.dom("[data-test-neighbor-stack-trigger]").doesNotExist();
+		});
+		(0, import_qunit.test)("Clicking search panel (without left and right buttons activated) replaces open card on existing stack", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}, {
+				id: `${testRealmURL}Pet/mango`,
+				format: "isolated"
+			}]] });
+			let operatorModeStateService = getService("operator-mode-state-service");
+			let recentCardsService = getService("recent-cards-service");
+			operatorModeStateService.state.stacks[0].map((item) => recentCardsService.add(item.id));
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 1 });
+			assert.dom("[data-test-add-card-left-stack]").exists();
+			assert.dom("[data-test-add-card-right-stack]").exists();
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("prompt");
+			await click("[data-test-open-search-field]");
+			assert.dom("[data-test-search-sheet]").hasClass("prompt");
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("prompt");
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 1 });
+			assert.dom("[data-test-operator-mode-stack=\"0\"] [data-test-stack-card-index=\"0\"]").includesText("Mango");
+			assert.dom("[data-test-operator-mode-stack=\"0\"] [data-test-stack-card-index=\"1\"]").doesNotExist();
+		});
+		(0, import_qunit.test)("search can be dismissed with escape", async function(assert) {
+			await visitOperatorMode({});
+			await click("[data-test-open-search-field]");
+			assert.dom("[data-test-search-sheet]").hasClass("prompt");
+			await triggerKeyEvent("[data-test-search-sheet] input", "keydown", "Escape");
+			assert.dom("[data-test-search-sheet]").hasClass("closed");
+		});
+		(0, import_qunit.test)("Escape closes the most recently opened stack item", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}, {
+				id: `${testRealmURL}Pet/mango`,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).exists("top item is rendered before Escape");
+			await triggerKeyEvent(document.body, "keydown", "Escape");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).doesNotExist("Escape closed the topmost item");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).exists("the underlying item remains open");
+		});
+		(0, import_qunit.test)("Escape does not close a stack item while a modal is open", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			await click(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-more-options-button]`);
+			await click("[data-test-boxel-menu-item-text=\"Delete\"]");
+			assert.dom("[data-test-delete-modal-container]").exists("delete modal is open");
+			await triggerKeyEvent(document.body, "keydown", "Escape");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).exists("the card under the modal stays open");
+		});
+		(0, import_qunit.test)("Escape closes the most recently opened item when it lives in a non-rightmost stack (left-neighbor drop)", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			let operatorModeStateService = getService("operator-mode-state-service");
+			let recentCardsService = getService("recent-cards-service");
+			for (let item of operatorModeStateService.state.stacks[0]) recentCardsService.add(item.id);
+			recentCardsService.add(`${testRealmURL}Pet/mango`);
+			await click("[data-test-add-card-left-stack]");
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom("[data-test-operator-mode-stack=\"0\"]").includesText("Mango");
+			assert.dom("[data-test-operator-mode-stack=\"1\"]").includesText("Fadhlan");
+			await triggerKeyEvent(document.body, "keydown", "Escape");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).doesNotExist("Escape closed the leftmost item because it was opened most recently");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).exists("the right-side stack item remains open");
+		});
+		(0, import_qunit.test)("Escape does not close a stack item while focus is in a text input", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			await click("[data-test-open-search-field]");
+			assert.dom("[data-test-search-field]").isFocused();
+			await triggerKeyEvent("[data-test-search-field]", "keydown", "Escape");
+			assert.dom("[data-test-search-sheet]").hasClass("closed");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).exists("Escape inside an input did not close the underlying card");
+		});
+		(0, import_qunit.test)("Escape targets the card the user is editing, not the last-opened card", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}], [{
+				id: `${testRealmURL}Pet/mango`,
+				format: "isolated"
+			}]] });
+			assert.dom("[data-test-operator-mode-stack]").exists({ count: 2 }, "two side-by-side stacks");
+			await click(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-edit-button]`);
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="edit"]`).exists("A is now in edit mode");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).exists("B is still on its stack");
+			await triggerKeyEvent(document.body, "keydown", "Escape");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).exists("B was NOT closed — Escape did not target the last-opened");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="isolated"]`).exists("A flipped back to view mode — the actual recent interaction");
+		});
+		(0, import_qunit.test)("Escape on an edit-mode item exits to view mode instead of closing", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "edit"
+			}]] });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="edit"]`).exists("card starts in edit mode");
+			await triggerKeyEvent(document.body, "keydown", "Escape");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).exists("card is still open — Escape did not close it");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="isolated"]`).exists("Escape flipped edit mode back to isolated");
+			await triggerKeyEvent(document.body, "keydown", "Escape");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).doesNotExist("a second Escape from view mode closes the item");
+		});
+		(0, import_qunit.test)("Escape from a focused field in an edit-mode card moves focus to the card, then exits edit, then closes", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "edit"
+			}]] });
+			let card = `[data-test-stack-card="${testRealmURL}Person/fadhlan"]`;
+			let fieldInput = "[data-test-field=\"firstName\"] input";
+			await focus(fieldInput);
+			assert.dom(fieldInput).isFocused("field is focused at the start");
+			await triggerKeyEvent(fieldInput, "keydown", "Escape");
+			assert.dom(card).isFocused("first Escape moved focus from the field to the card");
+			assert.dom(`${card} [data-test-card-format="edit"]`).exists("card is still in edit mode after the first Escape");
+			await triggerKeyEvent(card, "keydown", "Escape");
+			assert.dom(`${card} [data-test-card-format="isolated"]`).exists("second Escape returned the card to view mode");
+			assert.dom(card).isFocused("the card keeps focus in view mode");
+			await triggerKeyEvent(card, "keydown", "Escape");
+			assert.dom(card).doesNotExist("third Escape closed the item");
+		});
+		(0, import_qunit.test)("Escape on a checkbox in an edit-mode card exits edit mode", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "edit"
+			}]] });
+			let checkbox = document.createElement("input");
+			checkbox.type = "checkbox";
+			checkbox.setAttribute("data-test-checkbox", "");
+			find("[data-test-stack-card]")?.append(checkbox);
+			await focus("[data-test-checkbox]");
+			await triggerKeyEvent("[data-test-checkbox]", "keydown", "Escape");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="isolated"]`).exists("Escape returned the card to view mode");
+		});
+		(0, import_qunit.test)("Ctrl+E toggles edit mode even while focus is in a field", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "edit"
+			}]] });
+			let fieldInput = "[data-test-field=\"firstName\"] input";
+			await focus(fieldInput);
+			assert.dom(fieldInput).isFocused();
+			await triggerKeyEvent(fieldInput, "keydown", 69, { ctrlKey: true });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="isolated"]`).exists("Ctrl+E exited edit mode despite the field being focused");
+		});
+		(0, import_qunit.test)("Ctrl+E toggles edit mode on the most recently opened item", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="isolated"]`).exists("card starts in isolated/view mode");
+			await triggerKeyEvent(document.body, "keydown", 69, { ctrlKey: true });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="edit"]`).exists("Ctrl+E flipped the card into edit mode");
+			await triggerKeyEvent(document.body, "keydown", 69, { ctrlKey: true });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="isolated"]`).exists("Ctrl+E flipped the card back to isolated mode");
+			await triggerKeyEvent(document.body, "keydown", 69, { metaKey: true });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="isolated"]`).exists("Cmd+E (metaKey) does not toggle edit mode");
+		});
+		(0, import_qunit.test)("Ctrl+E respects keyboard layout (CS-11092)", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			document.body.dispatchEvent(new KeyboardEvent("keydown", {
+				key: "e",
+				code: "Period",
+				ctrlKey: true,
+				bubbles: true,
+				cancelable: true
+			}));
+			await settled();
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="edit"]`).exists("Ctrl+E fires on the Dvorak \"e\" key (code=Period)");
+			document.body.dispatchEvent(new KeyboardEvent("keydown", {
+				key: ".",
+				code: "KeyE",
+				ctrlKey: true,
+				bubbles: true,
+				cancelable: true
+			}));
+			await settled();
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-format="edit"]`).exists("Ctrl+. on Dvorak (physical QWERTY-E keycap) does not toggle — still in edit mode");
+		});
+		(0, import_qunit.test)("a card that opens takes focus, and closing it returns focus to what opened it", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			let opener = `[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-view-pet]`;
+			let mango = `[data-test-stack-card="${testRealmURL}Pet/mango"]`;
+			await click(opener);
+			assert.dom(mango).isFocused("the opened card has focus");
+			await click(`${mango} [data-test-close-button]`);
+			await waitUntil(() => !find(mango));
+			assert.dom(opener).isFocused("focus is back on the opener");
+		});
+		(0, import_qunit.test)("Escape closes the card that has focus and returns focus to what opened it", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			let opener = `[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-view-pet]`;
+			let mango = `[data-test-stack-card="${testRealmURL}Pet/mango"]`;
+			await click(opener);
+			assert.dom(mango).isFocused();
+			await triggerKeyEvent(mango, "keydown", "Escape");
+			await waitUntil(() => !find(mango));
+			assert.dom(opener).isFocused("focus is back on the opener");
+		});
+		(0, import_qunit.test)("closing a card opened from a cards grid returns focus to its grid item", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}index`,
+				format: "isolated"
+			}]] });
+			let gridItem = `[data-test-stack-card="${testRealmURL}index"] [data-test-cards-grid-item="${testRealmURL}Person/fadhlan"]`;
+			let fadhlan = `[data-test-stack-card="${testRealmURL}Person/fadhlan"]`;
+			await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+			await click(`${gridItem} [data-test-field-component-card]`);
+			assert.dom(fadhlan).isFocused("the opened card has focus");
+			await click(`${fadhlan} [data-test-close-button]`);
+			await waitUntil(() => !find(fadhlan));
+			assert.dom(gridItem).isFocused("focus is back on the grid item");
+		});
+		(0, import_qunit.test)("closing a card whose opener has left the page focuses the card now on top", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			let fadhlan = `[data-test-stack-card="${testRealmURL}Person/fadhlan"]`;
+			let mango = `[data-test-stack-card="${testRealmURL}Pet/mango"]`;
+			await click(`${fadhlan} [data-test-view-pet]`);
+			assert.dom(mango).isFocused();
+			find(`${fadhlan} [data-test-view-pet]`)?.remove();
+			await click(`${mango} [data-test-close-button]`);
+			await waitUntil(() => !find(mango));
+			assert.dom(fadhlan).isFocused("the card now on top has focus");
+		});
+		(0, import_qunit.test)("a stack card is a region named for the card", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).hasAttribute("role", "region").hasAria("label", "Fadhlan");
+		});
+		(0, import_qunit.test)("the cards a page loads with do not take focus", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}, {
+				id: `${testRealmURL}Pet/mango`,
+				format: "isolated"
+			}]] });
+			assert.dom("[data-stack-card]:focus").doesNotExist();
+		});
+		(0, import_qunit.test)("restoring the stacks from a URL change focuses the card on top", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}, {
+				id: `${testRealmURL}Pet/mango`,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).isFocused("the card on top has focus");
+		});
+		(0, import_qunit.test)("restoring the stacks from a URL change focuses the card on top, not the opener of a card it removes", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			let opener = document.createElement("button");
+			document.querySelector("#ember-testing")?.append(opener);
+			await focus(opener);
+			let operatorModeStateService = getService("operator-mode-state-service");
+			operatorModeStateService.addItemToStack(operatorModeStateService.createStackItem(`${testRealmURL}Pet/mango`, 0));
+			await settled();
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).isFocused();
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).isFocused("the restored card on top has focus");
+			opener.remove();
+		});
+		(0, import_qunit.test)("a card opened into a new neighbor stack from the search sheet takes focus", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			getService("recent-cards-service").add(`${testRealmURL}Pet/mango`);
+			await click("[data-test-add-card-right-stack]");
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom("[data-test-operator-mode-stack=\"1\"]").includesText("Mango");
+			assert.dom(`[data-test-operator-mode-stack="1"] [data-test-stack-card="${testRealmURL}Pet/mango"]`).isFocused("the card in the new stack has focus");
+		});
+		(0, import_qunit.test)("a card opened into a new stack on the left takes focus, not the card that shifts right", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			getService("recent-cards-service").add(`${testRealmURL}Pet/mango`);
+			let mango = `[data-test-operator-mode-stack="0"] [data-test-stack-card="${testRealmURL}Pet/mango"]`;
+			let fadhlan = `[data-test-operator-mode-stack="0"] [data-test-stack-card="${testRealmURL}Person/fadhlan"]`;
+			await click("[data-test-add-card-left-stack]");
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom("[data-test-operator-mode-stack=\"1\"]").includesText("Fadhlan");
+			assert.dom(mango).isFocused("the card in the new stack has focus");
+			await click(`${mango} [data-test-close-button]`);
+			await waitUntil(() => !find(mango));
+			assert.dom(fadhlan).isFocused("the card left in the remaining stack has focus");
+		});
+		(0, import_qunit.test)("a card opened while focus is in the AI assistant panel leaves focus in the panel", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			await click("[data-test-open-ai-assistant]");
+			await focus("[data-test-close-ai-assistant]");
+			let operatorModeStateService = getService("operator-mode-state-service");
+			operatorModeStateService.addItemToStack(operatorModeStateService.createStackItem(`${testRealmURL}Pet/mango`, 0));
+			await settled();
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).exists("the card opened");
+			assert.dom("[data-test-close-ai-assistant]").isFocused("focus stays in the panel");
+		});
+		(0, import_qunit.test)("a card opened while focus is in a card's input leaves focus in the input", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "edit"
+			}]] });
+			let fieldInput = "[data-test-field=\"firstName\"] input";
+			await focus(fieldInput);
+			let operatorModeStateService = getService("operator-mode-state-service");
+			operatorModeStateService.addItemToStack(operatorModeStateService.createStackItem(`${testRealmURL}Pet/mango`, 1));
+			await settled();
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).exists("the card opened");
+			assert.dom(fieldInput).isFocused("focus stays in the input");
+		});
+		(0, import_qunit.test)("a card opened over the card whose input has focus takes focus", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "edit"
+			}]] });
+			await focus("[data-test-field=\"firstName\"] input");
+			let operatorModeStateService = getService("operator-mode-state-service");
+			operatorModeStateService.addItemToStack(operatorModeStateService.createStackItem(`${testRealmURL}Pet/mango`, 0));
+			await settled();
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).isFocused("the opened card has focus");
+		});
+		(0, import_qunit.test)("a card opened while focus is on a checkbox takes focus", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			let checkbox = document.createElement("input");
+			checkbox.type = "checkbox";
+			checkbox.setAttribute("data-test-checkbox", "");
+			find("[data-test-stack-card]")?.append(checkbox);
+			await focus("[data-test-checkbox]");
+			let operatorModeStateService = getService("operator-mode-state-service");
+			operatorModeStateService.addItemToStack(operatorModeStateService.createStackItem(`${testRealmURL}Pet/mango`, 0));
+			await settled();
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).isFocused("the opened card has focus");
+		});
+		(0, import_qunit.test)("a card that moves to another stack keeps focus with it", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			await focus(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`);
+			let operatorModeStateService = getService("operator-mode-state-service");
+			operatorModeStateService.shiftStack(operatorModeStateService.state.stacks[0], 1);
+			await settled();
+			assert.dom(`[data-test-operator-mode-stack="1"] [data-test-stack-card="${testRealmURL}Person/fadhlan"]`).isFocused("the card has focus in its new stack");
+		});
+		(0, import_qunit.test)("restoring stacks that put a card back where it was before it shifted focuses that card", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			getService("recent-cards-service").add(`${testRealmURL}Pet/mango`);
+			await click("[data-test-add-card-left-stack]");
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"]`).isFocused();
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}Person/fadhlan`,
+				format: "isolated"
+			}]] });
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).isFocused("the restored card has focus");
+		});
+		(0, import_qunit.test)("duplicate card in a stack is not allowed", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealmURL}index`,
+				format: "isolated"
+			}]] });
+			await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+			let cardSelector = `[data-test-operator-mode-stack="0"] [data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`;
+			await Promise.all([click(cardSelector), click(cardSelector)]);
+			assert.dom(`[data-stack-card="${testRealmURL}Person/fadhlan"]`).exists({ count: 1 });
+		});
+		(0, import_qunit.test)("embedded card from writable realm shows pencil icon in edit mode", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealm2URL}Person/hassan`,
+				format: "edit"
+			}]] });
+			await triggerEvent(`[data-test-stack-card="${testRealm2URL}Person/hassan"] [data-test-links-to-editor="pet"] [data-test-field-component-card]`, "mouseenter");
+			await click(`[data-test-overlay-card="${testRealmURL}Pet/mango"] [data-test-overlay-more-options]`);
+			assert.dom("[data-test-boxel-menu-item-text=\"Edit\"]").exists();
+			await click("[data-test-boxel-menu-item-text=\"Edit\"]");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"] [data-test-card-format="edit"]`).exists("linked card now rendered as a stack item in edit format");
+		});
+		(0, import_qunit.test)("can save mutated card without having opened in stack", async function(assert) {
+			await visitOperatorMode({ stacks: [[{
+				id: `${testRealm2URL}Person/hassan`,
+				format: "isolated"
+			}]] });
+			await click("[data-test-update-and-save-pet]");
+			await triggerEvent(`[data-test-stack-card="${testRealm2URL}Person/hassan"] [data-test-pet]`, "mouseenter");
+			await click(`[data-test-overlay-card="${testRealmURL}Pet/mango"] [data-test-overlay-more-options]`);
+			await click("[data-test-boxel-menu-item-text=\"Edit\"]");
+			assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"] [data-test-field="name"] input`).hasValue("Updated Pet");
+		});
+	});
+});
+//#endregion