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

package/bundled-test-harness/assets/operator-mode-card-chooser-test-CQ1v8med.js

@@ -0,0 +1,1036 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { T as rri } from "./paths-C9-NYXnM.js";
+import { O as baseRealm } from "./constants-Icc0nFW-.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import "./template-factory-ds9s0u8l.js";
+import { t as OperatorModeContainer } from "./container-CEslVSTe.js";
+import { M as waitUntil, T as settled, d as click, f as focus, l as triggerEvent, o as waitFor, r as typeIn, s as fillIn } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { Et as percySnapshot, H as testModuleRealm, L as setupRealmCacheTeardown } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { n as renderComponent } from "./render-component-B15Z0e2v.js";
+import { t as setupOperatorModeTests } from "./setup-CssMNvui.js";
+//#region tests/integration/components/operator-mode-card-chooser-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+(0, import_qunit.module)("Integration | operator-mode | card chooser", function(hooks) {
+	let ctx = setupOperatorModeTests(hooks);
+	let noop = () => {};
+	(0, import_qunit.module)("recents section", function(hooks) {
+		setupRealmCacheTeardown(hooks);
+		(0, import_qunit.test)(`displays recently accessed card`, async function(assert) {
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			assert.dom(`[data-test-stack-card-header]`).containsText(ctx.realmName);
+			await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+			await waitFor(`[data-test-cards-grid-item]`);
+			await click(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`);
+			await waitFor(`[data-test-stack-card-index="1"]`);
+			assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-boxel-card-header-title]`).containsText("Person");
+			assert.dom(`[data-test-cards-grid-cards]`).isNotVisible();
+			assert.dom(`[data-test-create-new-card-button]`).isNotVisible();
+			await click(`[data-test-open-search-field]`);
+			assert.dom(`[data-test-search-result="${testRealmURL}Person/fadhlan"]`).exists();
+			await click(`[data-test-search-sheet-cancel-button]`);
+			await click(`[data-test-stack-card-index="1"] [data-test-close-button]`);
+			await waitUntil(() => !document.querySelector("[data-test-stack-card-index=\"1\"]"));
+			await waitFor(`[data-test-cards-grid-item]`);
+			await click(`[data-test-cards-grid-item="${testRealmURL}Person/burcu"] .field-component-card`);
+			await waitFor(`[data-test-stack-card-index="1"]`);
+			await click(`[data-test-open-search-field]`);
+			await waitFor(`[data-test-grid-item-index="0"]`);
+			await waitFor(`[data-test-grid-item-index="1"]`);
+			assert.dom(`[data-test-search-result]`).exists({ count: 2 });
+			assert.dom(`[data-test-grid-item-index="0"] [data-test-search-result="${testRealmURL}Person/burcu"]`).exists();
+			assert.dom(`[data-test-grid-item-index="1"] [data-test-search-result="${testRealmURL}Person/fadhlan"]`).exists();
+		});
+		(0, import_qunit.test)(`displays recently accessed card, maximum 10 cards`, async function(assert) {
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			assert.dom(`[data-test-stack-card-header]`).containsText(ctx.realmName);
+			await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+			await waitFor(`[data-test-cards-grid-item]`);
+			for (let i = 1; i <= 11; i++) {
+				await click(`[data-test-cards-grid-item="${testRealmURL}Person/${i}"] .field-component-card`);
+				await waitFor(`[data-test-stack-card-index="1"][data-test-stack-card="${testRealmURL}Person/${i}"]`);
+				await click(`[data-test-stack-card-index="1"][data-test-stack-card="${testRealmURL}Person/${i}"] [data-test-close-button]`);
+				await waitFor(`[data-test-stack-card-index="1"][data-test-stack-card="${testRealmURL}Person/${i}"]`, { count: 0 });
+			}
+			await click(`[data-test-open-search-field]`);
+			await waitFor(`[data-test-search-result]`);
+			assert.dom(`[data-test-search-result]`).exists({ count: 10 }, "recents capped at 10 total, search bar results are not capped");
+			assert.dom("[data-test-search-sheet] [data-test-grid-item-index=\"0\"]").containsText("11", "search bar results are sorted by most recent");
+			await fillIn("[data-test-search-field]", " ");
+			const recents = "[data-test-search-result-section=\"0\"]";
+			assert.dom(`${recents} [data-test-search-sheet-section-header]`).containsText("Recents");
+			assert.dom(`${recents} [data-test-item-button]`).exists({ count: 5 }, "when expanded, recents results are capped at 5 with show more button");
+			assert.dom(`${recents} [data-test-search-sheet-show-more]`).exists();
+		});
+		(0, import_qunit.test)(`is present when search sheet is open (expanded mode)`, async function(assert) {
+			let recentCardsService = getService("recent-cards-service");
+			[`${testRealmURL}Pet/mango`, `${testRealmURL}Pet/jackie`].map((url) => recentCardsService.add(url));
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			await click(`[data-test-open-search-field]`);
+			await fillIn(`[data-test-search-field]`, "ma");
+			assert.dom(`[data-test-search-sheet-section-header]`).exists();
+			assert.dom(".search-sheet-content").containsText("Recent");
+		});
+		(0, import_qunit.test)(`hovering a recent card's realm name shows the realm URL`, async function(assert) {
+			getService("recent-cards-service").add(`${testRealmURL}Pet/mango`);
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			await click(`[data-test-open-search-field]`);
+			await fillIn(`[data-test-search-field]`, "man");
+			await waitFor(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			await triggerEvent(`[data-test-realm-url-tooltip-trigger="${testRealmURL}"]:has([data-test-realm-name])`, "mouseenter");
+			assert.dom("[data-test-realm-url-tooltip]").hasText("test-realm/test");
+		});
+		(0, import_qunit.test)(`filters cards by search key`, async function(assert) {
+			let recentCardsService = getService("recent-cards-service");
+			[`${testRealmURL}Pet/mango`, `${testRealmURL}Person/fadhlan`].map((url) => recentCardsService.add(url));
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			await click(`[data-test-open-search-field]`);
+			await fillIn(`[data-test-search-field]`, "man");
+			await waitFor(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom(`[data-test-grid-item-index]`).exists({ count: 1 }, "only 1 recent card matches \"man\"");
+			assert.dom(`[data-test-search-result="${testRealmURL}Pet/mango"]`).exists("Mango appears in filtered recents");
+			await fillIn(`[data-test-search-field]`, "fadh");
+			await waitFor(`[data-test-search-result="${testRealmURL}Person/fadhlan"]`);
+			assert.dom(`[data-test-grid-item-index]`).exists({ count: 1 }, "only 1 recent card matches \"fadh\"");
+			assert.dom(`[data-test-search-result="${testRealmURL}Person/fadhlan"]`).exists("Fadhlan appears in filtered recents");
+			await fillIn(`[data-test-search-field]`, "zzzzz");
+			assert.dom(`[data-test-grid-item-index]`).doesNotExist("no recent cards match \"zzzzz\"");
+		});
+		(0, import_qunit.test)(`filters cards by realm`, async function(assert) {
+			let recentCardsService = getService("recent-cards-service");
+			[
+				`${baseRealm.url}index`,
+				`${testRealmURL}Pet/mango`,
+				`${baseRealm.url}cards/skill`,
+				`${testRealmURL}Person/fadhlan`
+			].map((url) => recentCardsService.add(url));
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			await click(`[data-test-open-search-field]`);
+			await waitFor(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			await waitFor(`[data-test-search-result="${baseRealm.url}cards/skill"]`);
+			assert.dom("[data-test-search-result]").exists({ count: 4 });
+			await click("[data-test-realm-picker]");
+			await click(`[data-test-boxel-picker-option-row="${baseRealm.url}"]`);
+			assert.dom("[data-section-sid=\"recents\"] [data-test-search-result]").exists({ count: 2 });
+			assert.dom(`[data-test-search-result="${baseRealm.url}cards/skill"]`).exists();
+			assert.dom(`[data-test-search-result="${baseRealm.url}index"]`).exists();
+			await click(`[data-test-boxel-picker-option-row="${testRealmURL}"]`);
+			assert.dom("[data-section-sid=\"recents\"] [data-test-search-result]").exists({ count: 4 });
+			await fillIn(`[data-test-search-field]`, " ");
+			await click("[data-test-realm-picker] [data-test-boxel-picker-remove-button]:nth-of-type(1)");
+			assert.dom("[data-section-sid=\"recents\"] [data-test-search-result]").exists({ count: 2 });
+			assert.dom(`[data-section-sid="recents"] [data-test-search-result="${testRealmURL}Pet/mango"]`).exists();
+			assert.dom(`[data-section-sid="recents"] [data-test-search-result="${testRealmURL}Person/fadhlan"]`).exists();
+		});
+		(0, import_qunit.test)(`hides cards from unselected realms`, async function(assert) {
+			getService("recent-cards-service").add(`${testRealmURL}Pet/mango`);
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			await click(`[data-test-open-search-field]`);
+			await fillIn(`[data-test-search-field]`, " ");
+			await waitFor(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			await click("[data-test-realm-picker] [data-test-boxel-picker-trigger]");
+			await click(`[data-test-boxel-picker-option-row="${baseRealm.url}"]`);
+			assert.dom(`[data-test-search-result="${testRealmURL}Pet/mango"]`).doesNotExist("Pet/mango is hidden when its realm is not selected");
+		});
+		(0, import_qunit.test)(`filters cards by type for card-picker`, async function(assert) {
+			let recentCardsService = getService("recent-cards-service");
+			recentCardsService.add(`${testRealmURL}Pet/mango`);
+			recentCardsService.add(`${testRealmURL}Spec/pet-card`);
+			recentCardsService.add(`${testRealmURL}BoomPet/paper`);
+			recentCardsService.add(`${testRealmURL}Person/fadhlan`);
+			ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+			await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+			await waitFor(`[data-test-cards-grid-item]`);
+			await click(`[data-test-create-new-card-button]`);
+			await waitFor("[data-test-card-chooser-modal]");
+			await settled();
+			assert.dom(`[data-test-recent-card-result="${testRealmURL}Spec/pet-card"]`).exists("Spec recent card appears");
+			assert.dom(`[data-test-recent-card-result]`).exists({ count: 1 }, "non-Spec recent cards are filtered out");
+			ctx.setCardInOperatorModeState(`${testRealmURL}Person/hassan`, "edit");
+			await waitFor(`[data-test-stack-card="${testRealmURL}Person/hassan"]`);
+			await waitFor(`[data-test-add-new="pet"]`);
+			await click(`[data-test-add-new="pet"]`);
+			await waitFor("[data-test-card-chooser-modal]");
+			await settled();
+			assert.dom("[data-test-search-label]").hasText("5 results across 3 realms");
+			assert.dom(`[data-test-recent-card-result="${testRealmURL}Pet/mango"]`).exists("Pet recent card appears in the linksTo picker");
+			assert.dom(`[data-test-recent-card-result="${testRealmURL}BoomPet/paper"]`).exists("BoomPet recent card appears");
+			assert.dom(`[data-test-recent-card-result]`).exists({ count: 2 }, "non-Pet recent cards are filtered out");
+			await click(`[data-test-add-new="friends"]`);
+			await waitFor("[data-test-card-chooser-modal]");
+			await settled();
+			assert.dom("[data-test-search-label]").hasText("5 results across 3 realms");
+			assert.dom(`[data-test-recent-card-result="${testRealmURL}Pet/mango"]`).exists("Pet recent card appears in the linksTo picker");
+			assert.dom(`[data-test-recent-card-result="${testRealmURL}BoomPet/paper"]`).exists("BoomPet recent card appears");
+			assert.dom(`[data-test-recent-card-result]`).exists({ count: 2 }, "non-Pet recent cards are filtered out");
+		});
+		(0, import_qunit.test)("type picker is hidden when baseFilter constrains type", async function(assert) {
+			let recentCardsService = getService("recent-cards-service");
+			recentCardsService.add(`${testRealmURL}Pet/mango`);
+			recentCardsService.add(`${testRealmURL}Person/fadhlan`);
+			ctx.setCardInOperatorModeState(`${testRealmURL}Person/hassan`, "edit");
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}Person/hassan"]`);
+			await waitFor(`[data-test-add-new="pet"]`);
+			await click(`[data-test-add-new="pet"]`);
+			await waitFor("[data-test-card-chooser-modal]");
+			await settled();
+			assert.dom("[data-test-card-chooser-modal] [data-test-type-picker]").doesNotExist("type picker is not rendered when baseFilter constrains type");
+			assert.dom("[data-test-card-chooser-modal] [data-test-realm-picker]").exists("realm picker is still rendered");
+			assert.dom(`[data-test-recent-card-result="${testRealmURL}Pet/mango"]`).exists("Pet recent card appears in the linksTo picker");
+			assert.dom(`[data-test-recent-card-result="${testRealmURL}Person/fadhlan"]`).doesNotExist("non-Pet recent cards are filtered out");
+		});
+		(0, import_qunit.test)("realm picker stays typeable after the chooser is reopened", async function(assert) {
+			ctx.setCardInOperatorModeState(`${testRealmURL}Person/hassan`, "edit");
+			await renderComponent(class TestDriver extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "plqNg8T8",
+						"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+						"scope": () => [OperatorModeContainer, noop],
+						"isStrictMode": true
+					}), this);
+				}
+			});
+			await waitFor(`[data-test-stack-card="${testRealmURL}Person/hassan"]`);
+			await waitFor(`[data-test-add-new="pet"]`);
+			await click(`[data-test-add-new="pet"]`);
+			await waitFor("[data-test-card-chooser-modal]");
+			await settled();
+			await click("[data-test-card-chooser-cancel-button]");
+			await click(`[data-test-add-new="pet"]`);
+			await waitFor("[data-test-card-chooser-modal]");
+			await settled();
+			await click("[data-test-realm-picker] [data-test-boxel-picker-trigger]");
+			await waitFor("[data-test-boxel-picker-search] input");
+			assert.dom("[data-test-boxel-picker-search] input").isFocused("the realm filter field keeps the focus it opened with");
+			await typeIn("[data-test-boxel-picker-search] input", ctx.realmName);
+			assert.dom("[data-test-boxel-picker-search] input").hasValue(ctx.realmName, "the realm filter field accepts typing");
+			assert.dom(`[data-test-boxel-picker-option-row="${testRealmURL}"]`).exists("the matching realm is still listed");
+			assert.dom(`[data-test-boxel-picker-option-row="${baseRealm.url}"]`).doesNotExist("non-matching realms are filtered out");
+		});
+	});
+	(0, import_qunit.test)(`displays searching results`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		assert.dom(`[data-test-stack-card-header]`).containsText(ctx.realmName);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item="${testRealmURL}Author/mark"]`, { timeout: 1e4 });
+		await click(`[data-test-open-search-field]`);
+		await fillIn(`[data-test-search-field]`, "Mark");
+		await waitFor(`[data-test-search-result="${testRealmURL}Author/mark"]`, { timeout: 1e4 });
+		assert.dom(`.search-sheet-content`).containsText("Operator Mode Workspace");
+		assert.dom(`[data-test-search-result="${testRealmURL}Author/mark"]`).exists();
+		await click(`[data-test-search-sheet-cancel-button]`);
+		await click(`[data-test-open-search-field]`);
+		await fillIn(`[data-test-search-field]`, "Mark Jackson");
+		await waitFor(`[data-test-search-result="${testRealmURL}Author/mark"]`, { timeout: 15e3 });
+		await waitUntil(() => {
+			let text = document.querySelector("[data-test-search-label]")?.innerText ?? "";
+			return text.length > 0 && !text.includes("Searching");
+		}, { timeout: 15e3 });
+		assert.dom(`[data-test-search-label]`).containsText("1 result", "new design summary text");
+		await click(`[data-test-search-sheet-cancel-button]`);
+		await click(`[data-test-open-search-field]`);
+		assert.dom(`[data-test-search-label]`).doesNotExist();
+		assert.dom(`[data-test-search-sheet-search-result]`).doesNotExist();
+		await focus(`[data-test-search-field]`);
+		await fillIn(`[data-test-search-field]`, "zzz-nonexistent-search-term-xyz-987");
+		await waitUntil(() => {
+			let text = document.querySelector("[data-test-search-label]")?.innerText ?? "";
+			return text.length > 0 && !text.includes("Searching");
+		}, { timeout: 15e3 });
+		assert.dom(`[data-test-search-label]`).containsText("0 results", "new design summary for no results");
+		assert.dom(`[data-test-search-sheet-search-result]`).doesNotExist();
+	});
+	(0, import_qunit.test)(`can specify a card by URL in the card chooser`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		await waitFor(`[data-test-item-button]`);
+		await fillIn(`[data-test-search-field]`, `${baseRealm.url}types/card`);
+		await waitFor("[data-test-item-button]", { count: 1 });
+		await waitFor(`[data-test-realm-url="${baseRealm.url}"][data-test-realm="Base Workspace"]`, { timeout: 1e4 });
+		assert.dom(`[data-test-realm="Base Workspace"] [data-test-results-count]`).hasText("1 result");
+		assert.dom("[data-test-item-button]").exists({ count: 1 });
+		await click("[data-test-item-button]");
+		await waitFor("[data-test-card-chooser-go-button][disabled]", { count: 0 });
+		await click("[data-test-card-chooser-go-button]");
+		await waitFor(`[data-test-stack-card-index="1"] [data-test-field="cardInfo-name"]`);
+		assert.dom(`[data-test-stack-card-index="1"] [data-test-field="cardInfo-name"]`).exists();
+		assert.dom(`[data-test-stack-card-index="1"] [data-test-field="cardInfo-summary"]`).exists();
+		assert.dom(`[data-test-stack-card-index="1"] [data-test-field="cardInfo-notes"]`).exists();
+	});
+	(0, import_qunit.test)(`can search by card title in card chooser`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		await waitFor("[data-test-item-button]");
+		assert.dom(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`).exists();
+		await fillIn(`[data-test-search-field]`, `pet`);
+		await waitFor(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`, { count: 0 });
+		assert.dom(`[data-test-item-button]`).exists({ count: 2 });
+		await fillIn(`[data-test-search-field]`, `publishing packet`);
+		await waitUntil(() => !document.querySelector(`[data-test-item-button="${testRealmURL}Spec/pet-card"]`));
+		assert.dom(`[data-test-item-button]`).exists({ count: 1 });
+		await click(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`);
+		await waitUntil(() => document.querySelector(`[data-test-card-chooser-go-button]`)?.disabled === false);
+		await click(`[data-test-card-chooser-go-button]`);
+		await waitFor("[data-test-stack-card-index=\"1\"]");
+		assert.dom("[data-test-stack-card-index=\"1\"]").exists();
+		assert.dom("[data-test-stack-card-index=\"1\"] [data-test-boxel-card-header-title]").hasText("Publishing Packet - Untitled");
+	});
+	(0, import_qunit.test)(`can search by card title when opening card chooser from a field editor`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/2`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}BlogPost/2"]`);
+		assert.dom(`[data-test-stack-card="${testRealmURL}BlogPost/2"]`).exists();
+		await click(`[data-test-stack-card="${testRealmURL}BlogPost/2"] [data-test-edit-button]`);
+		await waitFor(`[data-test-field="authorBio"]`);
+		await click("[data-test-add-new=\"authorBio\"]");
+		await waitFor("[data-test-item-button]");
+		assert.dom("[data-test-card-chooser-modal] [data-test-boxel-header-title]").hasText("Choose an Author card");
+		assert.dom("[data-test-results-count]").hasText("3 results");
+		await fillIn(`[data-test-search-field]`, `alien`);
+		await waitFor("[data-test-item-button]");
+		assert.dom(`[data-test-item-button="${testRealmURL}Author/1"]`).exists();
+	});
+	(0, import_qunit.test)(`displays no cards available message if search result does not exist`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		await waitFor("[data-test-item-button]");
+		await fillIn(`[data-test-search-field]`, `friend`);
+		await waitFor("[data-test-item-button]", { count: 0 });
+		assert.dom(`[data-test-search-content-empty]`).hasText("No results found");
+	});
+	(0, import_qunit.test)(`hovering a realm section icon shows the realm URL`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		await waitFor(`[data-test-realm-url="${testRealmURL}"]`, { timeout: 1e4 });
+		await triggerEvent(`[data-test-realm-url="${testRealmURL}"] [data-test-realm-url-tooltip-trigger]`, "mouseenter");
+		assert.dom("[data-test-realm-url-tooltip]").hasText("test-realm/test");
+	});
+	(0, import_qunit.test)(`can filter by realm after searching in card chooser`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		await waitFor("[data-test-item-button]");
+		await waitFor(`[data-test-realm-url="${testRealmURL}"][data-test-realm="Operator Mode Workspace"]`, { timeout: 1e4 });
+		await waitFor(`[data-test-realm-url="${baseRealm.url}"][data-test-realm="Base Workspace"]`, { timeout: 1e4 });
+		assert.dom(`[data-test-realm="Operator Mode Workspace"] [data-test-item-button]`).exists({ count: 3 });
+		assert.dom(`[data-test-realm="Base Workspace"] [data-test-item-button]`).exists();
+		await fillIn(`[data-test-search-field]`, `general`);
+		await waitFor(`[data-test-item-button="${testRealmURL}Spec/pet-card"]`, { count: 0 });
+		await waitFor(`[data-test-realm-url="${testRealmURL}"][data-test-realm="Operator Mode Workspace"]`, { timeout: 1e4 });
+		await waitFor(`[data-test-realm-url="${baseRealm.url}"][data-test-realm="Base Workspace"]`, { timeout: 1e4 });
+		assert.dom(`[data-test-realm="Operator Mode Workspace"] [data-test-item-button]`).exists({ count: 1 });
+		assert.dom(`[data-test-realm="Operator Mode Workspace"] [data-test-item-button]`).exists({ count: 1 });
+		assert.dom("[data-test-realm=\"Operator Mode Workspace\"] [data-test-results-count]").hasText("1 result");
+		assert.dom("[data-test-realm=\"Base Workspace\"] [data-test-results-count]").hasText("1 result");
+		assert.dom(`[data-test-realm="Operator Mode Workspace"] [data-test-item-button="${testRealmURL}Spec/pet-room"]`).exists();
+		assert.dom(`[data-test-realm="Base Workspace"] [data-test-item-button="${baseRealm.url}types/card"]`).exists();
+		await click("[data-test-realm-picker] [data-test-boxel-picker-trigger]");
+		await click(`[data-test-boxel-picker-option-row="${testRealmURL}"]`);
+		assert.dom(`[data-test-realm]`).exists({ count: 1 });
+		assert.dom("[data-test-realm=\"Operator Mode Workspace\"]").exists();
+		assert.dom("[data-test-realm=\"Base Workspace\"]").doesNotExist();
+		assert.dom(`[data-test-item-button="${testRealmURL}Spec/pet-room"]`).exists();
+		await click("[data-test-boxel-picker-option-row=\"select-all\"]");
+		await waitFor(`[data-test-realm-url="${testRealmURL}"][data-test-realm="Operator Mode Workspace"]`, { timeout: 1e4 });
+		await waitFor(`[data-test-realm-url="${baseRealm.url}"][data-test-realm="Base Workspace"]`, { timeout: 1e4 });
+		assert.dom("[data-test-realm=\"Operator Mode Workspace\"]").exists();
+		assert.dom("[data-test-realm=\"Base Workspace\"]").exists();
+		assert.dom(`[data-test-item-button="${testRealmURL}Spec/pet-room"]`).exists();
+	});
+	(0, import_qunit.test)(`can open new card editor in the stack after searching in card chooser`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		await waitFor("[data-test-item-button]");
+		await typeIn(`[data-test-search-field]`, `pet`);
+		await waitFor(`[data-test-item-button="${testRealmURL}Spec/publishing-packet"]`, { count: 0 });
+		assert.dom(`[data-test-item-button]`).exists({ count: 2 });
+		await click(`[data-test-item-button="${testRealmURL}Spec/pet-card"]`);
+		assert.dom(`[data-test-item-button="${testRealmURL}Spec/pet-card"][data-test-item-button-selected]`).exists({ count: 1 });
+		await click("[data-test-card-chooser-go-button]");
+		await waitFor("[data-test-stack-card-index=\"1\"]");
+		assert.dom("[data-test-stack-card-index=\"1\"] [data-test-boxel-card-header-title]").hasText("Pet");
+	});
+	(0, import_qunit.test)(`cancel button closes the spec card picker`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		await typeIn(`[data-test-search-field]`, `pet`);
+		assert.dom(`[data-test-search-field]`).hasValue("pet");
+		await waitFor("[data-test-item-button]", { count: 2 });
+		await click(`[data-test-item-button="${testRealmURL}Spec/pet-room"]`);
+		assert.dom(`[data-test-item-button="${testRealmURL}Spec/pet-room"][data-test-item-button-selected]`).exists({ count: 1 });
+		await click("[data-test-card-chooser-cancel-button]");
+		await waitFor("[data-test-card-chooser-modal]", { count: 0 });
+		assert.dom("[data-test-operator-mode-stack=\"0\"]").exists();
+		assert.dom("[data-test-operator-mode-stack=\"1\"]").doesNotExist("no cards are added");
+		await click(`[data-test-create-new-card-button]`);
+		await waitFor("[data-test-item-button]");
+		assert.dom(`[data-test-search-field]`).hasNoValue("Card picker state is reset");
+		assert.dom("[data-test-item-button-selected]").doesNotExist();
+	});
+	(0, import_qunit.test)(`+ button creates a new instance directly when the filtered type has no spec`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await waitFor(`[data-test-boxel-filter-list-button="Author"]`);
+		await click(`[data-test-boxel-filter-list-button="Author"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-create-new-card-button]`);
+		assert.dom("[data-test-card-chooser-modal]").doesNotExist("no spec chooser appears for a type without a spec");
+		await waitFor("[data-test-stack-card-index=\"1\"]");
+		assert.dom("[data-test-stack-card-index=\"1\"] [data-test-boxel-card-header-title]").hasText("Author");
+	});
+	(0, import_qunit.test)(`cancel button closes the field picker`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}BlogPost/2`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}BlogPost/2"]`);
+		await click("[data-test-edit-button]");
+		await click(`[data-test-field="authorBio"] [data-test-add-new]`);
+		await waitFor("[data-test-card-chooser-modal]");
+		await waitFor("[data-test-item-button]", { count: 3 });
+		await typeIn(`[data-test-search-field]`, `bob`);
+		assert.dom(`[data-test-search-field]`).hasValue("bob");
+		await waitFor("[data-test-item-button]", { count: 1 });
+		await click(`[data-test-item-button="${testRealmURL}Author/1"]`);
+		assert.dom(`[data-test-item-button="${testRealmURL}Author/1"][data-test-item-button-selected]`).exists({ count: 1 });
+		await click("[data-test-card-chooser-cancel-button]");
+		await waitFor("[data-test-card-chooser-modal]", { count: 0 });
+		assert.dom(`[data-test-field="authorBio"] [data-test-add-new]`).exists("no card is chosen");
+		await click(`[data-test-field="authorBio"] [data-test-add-new]`);
+		assert.dom(`[data-test-search-field]`).hasNoValue("Field picker state is reset");
+		assert.dom("[data-test-item-button-selected]").doesNotExist();
+	});
+	(0, import_qunit.test)(`can add a card to the stack by URL from search sheet`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click("[data-test-open-search-field]");
+		await fillIn("[data-test-search-field]", `${testRealmURL}Pet/man`);
+		await waitFor(`[data-test-search-label]`);
+		assert.dom("[data-test-search-label]").containsText("0 results");
+		assert.dom("[data-test-search-sheet-empty]").containsText(`No card found at ${testRealmURL}Pet/man`);
+		assert.dom("[data-test-search-sheet-search-result]").doesNotExist();
+		await fillIn("[data-test-search-field]", `${testRealmURL}Pet/mango`);
+		await waitFor("[data-test-search-sheet-search-result]");
+		assert.dom("[data-test-search-label]").containsText("1 result from 1 realm");
+		assert.dom("[data-test-search-sheet-search-result]").exists({ count: 1 });
+		await fillIn("[data-test-search-field]", `${testRealmURL}Pet/man`);
+		assert.dom("[data-test-search-label]").containsText("0 results");
+		assert.dom("[data-test-search-sheet-empty]").containsText(`No card found at ${testRealmURL}Pet/man`);
+		assert.dom("[data-test-search-sheet-search-result]").doesNotExist();
+		await fillIn("[data-test-search-field]", `${testRealmURL}Pet/mango`);
+		await waitFor("[data-test-search-sheet-search-result]");
+		await click("[data-test-search-sheet-search-result]");
+		await waitFor(`[data-test-stack-card="${testRealmURL}Pet/mango"]`);
+		assert.dom(`[data-test-stack-card="${testRealmURL}Pet/mango"] [data-test-field-component-card]`).containsText("Mango", "the card is rendered in the stack");
+	});
+	(0, import_qunit.test)(`search results are grouped by realm with section headers`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item="${testRealmURL}Author/mark"]`, { timeout: 1e4 });
+		await click(`[data-test-open-search-field]`);
+		await fillIn(`[data-test-search-field]`, "Mark");
+		await waitFor(`[data-test-search-result="${testRealmURL}Author/mark"]`, { timeout: 1e4 });
+		assert.dom(`[data-test-search-sheet-section-header]`).exists();
+		assert.dom(`[data-test-search-result="${testRealmURL}Author/mark"]`).exists();
+		assert.dom(`.search-sheet-content`).containsText("Operator Mode Workspace");
+	});
+	(0, import_qunit.test)(`Show more button reveals more cards when search has many results`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-open-search-field]`);
+		await fillIn(`[data-test-search-field]`, "Mark");
+		await waitFor("[data-test-search-sheet-search-result]");
+		const initialCount = document.querySelectorAll("[data-test-search-sheet-search-result]").length;
+		assert.ok(initialCount >= 1, "at least one query result shown");
+		if (document.querySelector("[data-test-search-sheet-show-more]")) {
+			await click("[data-test-search-sheet-show-more]");
+			const afterCount = document.querySelectorAll("[data-test-search-sheet-search-result]").length;
+			assert.ok(afterCount > initialCount, "Show more reveals additional cards");
+		} else assert.ok(true, "Show more not shown when results fit in initial limit");
+	});
+	(0, import_qunit.test)(`empty state shows when URL has no card`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-open-search-field]`);
+		await fillIn("[data-test-search-field]", `${testModuleRealm}nonexistent`);
+		await waitFor(`[data-test-search-label]`);
+		assert.dom("[data-test-search-sheet-empty]").exists();
+		assert.dom("[data-test-search-sheet-empty]").containsText("No card found at");
+	});
+	(0, import_qunit.test)(`SearchResultHeader is hidden in compact (prompt) mode`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-open-search-field]`);
+		assert.dom(`[data-test-search-sheet="search-prompt"]`).exists();
+		assert.dom("[data-test-search-result-header]").doesNotExist("header is not shown in compact prompt mode");
+	});
+	(0, import_qunit.test)(`compact mode shows no full header and recents remain clickable`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		await waitFor(`[data-test-cards-grid-item]`);
+		await click(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`);
+		await waitFor(`[data-test-stack-card-index="1"]`);
+		await click(`[data-test-open-search-field]`);
+		assert.dom("[data-test-search-result-header]").doesNotExist();
+		await waitFor("[data-test-search-result]", { timeout: 3e3 });
+		await click(`[data-test-search-result="${testRealmURL}Person/fadhlan"]`);
+		assert.dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`).exists("clicking a recent in compact mode adds card to stack");
+	});
+	(0, import_qunit.test)(`Show only focuses a section and collapses others`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-open-search-field]`);
+		await fillIn(`[data-test-search-field]`, "ma");
+		await waitFor("[data-test-search-sheet-show-only]");
+		await percySnapshot(assert);
+		await click("[data-test-search-sheet-show-only]");
+		const collapsedBlocks = document.querySelectorAll(".search-result-block--collapsed");
+		assert.ok(collapsedBlocks.length >= 1, "at least one section is collapsed when Show only is checked");
+	});
+	(0, import_qunit.test)(`Show only reorders focused section to top and scrolls back on uncheck`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-open-search-field]`);
+		await fillIn(`[data-test-search-field]`, "ma");
+		await waitFor("[data-test-search-sheet-show-only]");
+		let sections = document.querySelectorAll("[data-section-sid]");
+		assert.ok(sections.length >= 1, "at least one section is rendered");
+		let focusedSection = document.querySelector("[data-test-search-sheet-show-only]").closest("[data-section-sid]");
+		assert.ok(focusedSection, "found the section containing the show-only checkbox");
+		const focusedSectionSid = focusedSection.getAttribute("data-section-sid");
+		assert.ok(focusedSectionSid, "focused section has a section sid");
+		let scrollContainer = document.querySelector(".search-sheet-content");
+		scrollContainer.scrollTop = scrollContainer.scrollHeight;
+		await new Promise((resolve) => requestAnimationFrame(resolve));
+		assert.ok(scrollContainer.scrollTop > 0, `scrollTop is non-zero before checking Show only (scrollTop: ${scrollContainer.scrollTop})`);
+		await click("[data-test-search-sheet-show-only]");
+		await new Promise((resolve) => requestAnimationFrame(resolve));
+		let firstSection = scrollContainer.querySelector("[data-section-sid]");
+		assert.strictEqual(firstSection?.getAttribute("data-section-sid"), focusedSectionSid, "focused section is the first section in the container after checking Show only");
+		assert.strictEqual(scrollContainer.scrollTop, 0, "scroll container is scrolled to top after checking Show only");
+		await click("[data-test-search-sheet-show-only]");
+		await new Promise((resolve) => requestAnimationFrame(resolve));
+		let restoredSection = scrollContainer.querySelector(`[data-section-sid="${focusedSectionSid}"]`);
+		assert.ok(restoredSection, "previously focused section is still in the DOM");
+		let containerRect = scrollContainer.getBoundingClientRect();
+		let sectionRect = restoredSection.getBoundingClientRect();
+		assert.ok(sectionRect.top >= containerRect.top - 1, `previously focused section top is at or below container top after unchecking Show only (sectionTop: ${sectionRect.top}, containerTop: ${containerRect.top})`);
+		assert.ok(sectionRect.top < containerRect.bottom, `previously focused section top is above container bottom after unchecking Show only (sectionTop: ${sectionRect.top}, containerBottom: ${containerRect.bottom})`);
+	});
+	(0, import_qunit.test)(`view toggle updates layout (grid vs strip)`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-open-search-field]`);
+		await fillIn(`[data-test-search-field]`, "ma");
+		await waitFor("[data-test-search-result-section]");
+		assert.dom("[data-test-search-result-header]").exists();
+		assert.dom("[data-test-search-result-section=\"0\"] [data-test-search-cards-result]").hasClass("grid-view");
+		await click("[data-test-search-result-header] [data-test-boxel-radio-option-id=\"strip\"]");
+		assert.dom("[data-test-search-result-section=\"0\"] [data-test-search-cards-result]").hasClass("strip-view");
+	});
+	(0, import_qunit.test)(`can select one or more cards on cards-grid and unselect`, async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click(`[data-test-boxel-filter-list-button="All Cards"]`);
+		assert.dom(`[data-test-cards-grid-cards]`).exists();
+		await waitFor(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"]`);
+		assert.dom("[data-test-overlay-selected]").doesNotExist();
+		await triggerEvent(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`, "mouseenter");
+		await click(`[data-test-overlay-select="${testRealmURL}Person/fadhlan"]`);
+		assert.dom(`[data-test-overlay-selected="${testRealmURL}Person/fadhlan"]`).exists();
+		assert.dom("[data-test-overlay-selected]").exists({ count: 1 });
+		await triggerEvent(`[data-test-cards-grid-item="${testRealmURL}Pet/jackie"] .field-component-card`, "mouseenter");
+		await click(`[data-test-overlay-select="${testRealmURL}Pet/jackie"]`);
+		await click(`[data-test-cards-grid-item="${testRealmURL}Author/1"] .field-component-card`);
+		await click(`[data-test-cards-grid-item="${testRealmURL}BlogPost/2"] .field-component-card`);
+		assert.dom("[data-test-overlay-selected]").exists({ count: 4 });
+		await click(`[data-test-cards-grid-item="${testRealmURL}Pet/jackie"] .field-component-card`);
+		assert.dom("[data-test-overlay-selected]").exists({ count: 3 });
+		await click(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`);
+		await click(`[data-test-cards-grid-item="${testRealmURL}BlogPost/2"] .field-component-card`);
+		await click(`[data-test-overlay-select="${testRealmURL}Author/1"]`);
+		assert.dom("[data-test-overlay-selected]").doesNotExist();
+		await click(`[data-test-cards-grid-item="${testRealmURL}Person/fadhlan"] .field-component-card`);
+		await waitFor(`[data-test-stack-card-index="1"]`, { count: 1 });
+	});
+	(0, import_qunit.test)("CardDef filter is not displayed in filter list", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}Person/1"]`).exists();
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}CardDef/1"]`).exists();
+		assert.dom(`[data-test-boxel-filter-list-button="Person"]`).exists();
+		assert.dom(`[data-test-boxel-filter-list-button="CardDef"]`).doesNotExist();
+	});
+	(0, import_qunit.test)("card type filter remains for instance errors with last known good state", async function(assert) {
+		await ctx.testRealm.write("ExplodingCard/1.json", JSON.stringify({ data: {
+			attributes: {
+				name: "Stable Example",
+				status: "boom"
+			},
+			meta: { adoptsFrom: {
+				module: rri("../exploding-card.gts"),
+				name: "ExplodingCard"
+			} }
+		} }));
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}grid"]`);
+		await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+		await waitFor(`[data-test-cards-grid-item="${testRealmURL}ExplodingCard/1"][data-test-instance-error]`);
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}ExplodingCard/1"][data-test-instance-error]`).exists();
+		await waitFor("[data-test-boxel-filter-list-button=\"Exploding Card\"]");
+		assert.dom("[data-test-boxel-filter-list-button=\"Exploding Card\"]").exists();
+		await click("[data-test-boxel-filter-list-button=\"Exploding Card\"]");
+		await waitFor(`[data-test-cards-grid-item="${testRealmURL}ExplodingCard/1"][data-test-instance-error]`);
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}ExplodingCard/1"][data-test-instance-error] [data-test-card-title]`).containsText("Stable Example");
+	});
+	(0, import_qunit.test)("updates filter list when there is indexing event", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}grid`);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await click("[data-test-boxel-filter-list-button=\"All Cards\"]");
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}Person/1"]`).exists();
+		assert.dom(`[data-test-cards-grid-item="${testRealmURL}CardDef/1"]`).exists();
+		assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 15 });
+		assert.dom(`[data-test-boxel-filter-list-button="Skill"]`).doesNotExist();
+		await click("[data-test-create-new-card-button]");
+		await waitFor(`[data-test-item-button]`);
+		await fillIn(`[data-test-search-field]`, `Skill`);
+		await click(`[data-test-item-button="${baseRealm.url}cards/skill"]`);
+		await click("[data-test-card-chooser-go-button]");
+		await fillIn("[data-test-field=\"cardTitle\"] input", "New Skill");
+		await click("[data-test-close-button]");
+		assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 16 });
+		assert.dom(`[data-test-boxel-filter-list-button="Skill"]`).exists();
+		await click("[data-test-boxel-filter-list-button=\"Skill\"]");
+		await triggerEvent(`[data-test-cards-grid-item] .field-component-card`, "mouseenter");
+		await click(`[data-test-overlay-card] [data-test-overlay-more-options]`);
+		await click("[data-test-boxel-menu-item-text=\"Delete\"]");
+		await click("[data-test-confirm-delete-button]");
+		assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 15 });
+		assert.dom(`[data-test-boxel-filter-list-button="Skill"]`).doesNotExist();
+	});
+	(0, import_qunit.test)("selection-dropdown-trigger is hidden in single-select mode and until a card is selected in multi-select mode", async function(assert) {
+		ctx.setCardInOperatorModeState(`${testRealmURL}Person/hassan`, "edit");
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "plqNg8T8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/operator-mode-card-chooser-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-stack-card="${testRealmURL}Person/hassan"]`);
+		await waitFor(`[data-test-add-new="pet"]`);
+		await click(`[data-test-add-new="pet"]`);
+		await waitFor("[data-test-card-chooser-modal]");
+		assert.dom("[data-test-selection-dropdown-trigger]").doesNotExist("selection dropdown is hidden in single-select mode");
+		await click("[data-test-card-chooser-cancel-button]");
+		await waitFor("[data-test-card-chooser-modal]", { count: 0 });
+		await click(`[data-test-add-new="friends"]`);
+		await waitFor("[data-test-card-chooser-modal]");
+		assert.dom("[data-test-selection-dropdown-trigger]").doesNotExist("selection dropdown stays hidden in multi-select mode until a card is selected");
+		await waitFor("[data-test-item-button]");
+		await click("[data-test-item-button]");
+		assert.dom("[data-test-selection-dropdown-trigger]").exists("selection dropdown appears once a card is selected");
+	});
+});
+//#endregion