@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/file-chooser-test-DpjOWgpB.js

@@ -0,0 +1,504 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Ar as testRealmURL } from "./runtime-common-ClpqhbwG.js";
+import { M as waitUntil, T as settled, c as triggerKeyEvent, d as click, f as focus, l as triggerEvent, o as waitFor, y as currentURL } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { st as visitOperatorMode } from "./mock-matrix-DPQ0j2MD.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { n as setupInteractSubmodeTests } from "./interact-submode-setup-D4M_e580.js";
+//#region tests/acceptance/file-chooser-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+(0, import_qunit.module)("Acceptance | file chooser tests", function(hooks) {
+	setupInteractSubmodeTests(hooks, { setRealm() {} });
+	(0, import_qunit.test)("clicking a linked file opens it as a new isolated stack item", async function(assert) {
+		let fileId = `${testRealmURL}FileLinkCard/notes.txt`;
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/with-file`,
+			format: "isolated"
+		}]] });
+		assert.dom(`[data-test-stack-card="${testRealmURL}FileLinkCard/with-file"] [data-test-card="${fileId}"]`).exists("linked file is rendered in the card");
+		await click(`[data-test-stack-card="${testRealmURL}FileLinkCard/with-file"] [data-test-card="${fileId}"]`);
+		assert.operatorModeParametersMatch(currentURL(), { stacks: [[{
+			id: `${testRealmURL}FileLinkCard/with-file`,
+			format: "isolated"
+		}, {
+			id: fileId,
+			format: "isolated",
+			type: "file"
+		}]] });
+	});
+	(0, import_qunit.test)("can link a file via the chooser", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-add-new]").exists("add button is shown for empty FileDef field");
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		assert.dom("[data-test-file=\"README.txt\"]").exists("file tree loaded README.txt");
+		await click("[data-test-file=\"README.txt\"]");
+		await click("[data-test-choose-file-modal-add-button]");
+		assert.dom("[data-test-choose-file-modal]").doesNotExist("file chooser modal is closed");
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-card=\"http://test-realm/test/README.txt\"]").exists("attachment field now shows the linked file");
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		assert.dom("[data-test-file-link-attachment]").exists("the linked file is rendered in the card");
+	});
+	(0, import_qunit.test)("file chooser filters by type when field is ImageDef", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}ImageLinkCard/empty`,
+			format: "edit"
+		}]] });
+		assert.dom("[data-test-links-to-editor=\"photo\"] [data-test-add-new]").exists("add button rendered for ImageDef field");
+		await click("[data-test-links-to-editor=\"photo\"] [data-test-add-new=\"photo\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		assert.dom("[data-test-choose-file-modal] [data-test-boxel-header-title]").hasText("Choose Image", "modal title reflects the file type");
+		assert.dom("[data-test-file=\"test-image.png\"]").exists("image file is shown in the file chooser");
+		assert.dom("[data-test-file=\"README.txt\"]").doesNotExist("non-image file is not shown in the file chooser");
+		await click("[data-test-file=\"test-image.png\"]");
+		await click("[data-test-choose-file-modal-add-button]");
+		assert.dom("[data-test-choose-file-modal]").doesNotExist("file chooser modal is closed");
+		assert.dom("[data-test-links-to-editor=\"photo\"] [data-test-card=\"http://test-realm/test/test-image.png\"]").exists("photo field now shows the linked image");
+	});
+	(0, import_qunit.test)("file chooser shows all files when field is FileDef", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-add-new]").exists("add button rendered for FileDef field");
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		assert.dom("[data-test-choose-file-modal] [data-test-boxel-header-title]").hasText("Choose File", "modal title shows generic file type");
+		assert.dom("[data-test-file=\"README.txt\"]").exists("text file is shown in the file chooser");
+		assert.dom("[data-test-file=\"test-image.png\"]").exists("image file is also shown in the file chooser");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("can upload a file via the file chooser", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-add-new]").exists("add button rendered for FileDef field");
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		assert.dom("[data-test-choose-file-modal-upload-button]").exists("upload button is shown in the file chooser");
+		await click("[data-test-choose-file-modal-upload-button]");
+		let fileUpload = getService("file-upload");
+		await waitUntil(() => fileUpload.activeUploads.length > 0, {
+			timeout: 2e3,
+			timeoutMessage: "upload task was not created"
+		});
+		let task = fileUpload.activeUploads[0];
+		assert.strictEqual(task.state, "picking", "task is in picking state waiting for file");
+		task.__provideFileForTesting(new File(["hello upload"], "uploaded.txt", { type: "text/plain" }));
+		await waitUntil(() => !document.querySelector("[data-test-choose-file-modal]"), {
+			timeout: 1e4,
+			timeoutMessage: "file chooser modal did not close after upload"
+		});
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-card=\"http://test-realm/test/uploaded.txt\"]").exists("attachment field now shows the uploaded file");
+	});
+	(0, import_qunit.test)("a file name carrying URL syntax keeps its extension when uploaded", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await click("[data-test-choose-file-modal-upload-button]");
+		let fileUpload = getService("file-upload");
+		await waitUntil(() => fileUpload.activeUploads.length > 0, {
+			timeout: 2e3,
+			timeoutMessage: "upload task was not created"
+		});
+		fileUpload.activeUploads[0].__provideFileForTesting(new File(["hello upload"], "notes#3.txt", { type: "text/plain" }));
+		await waitUntil(() => !document.querySelector("[data-test-choose-file-modal]"), {
+			timeout: 1e4,
+			timeoutMessage: "file chooser modal did not close after upload"
+		});
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-card=\"http://test-realm/test/notes-3.txt\"]").exists("the file is stored under a name that kept its extension");
+	});
+	(0, import_qunit.test)("can drag and drop a file into chooser modal and see workspace feedback", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		let droppedFile = new File(["hello drag upload"], "dropped.txt", { type: "text/plain" });
+		await triggerEvent("[data-test-choose-file-modal]", "dragenter", { dataTransfer: {
+			types: ["Files"],
+			files: [droppedFile]
+		} });
+		assert.dom("[data-test-choose-file-modal]").hasAttribute("data-drop-zone-active");
+		let dropZoneLabel = document.querySelector("[data-test-choose-file-modal]")?.getAttribute("data-drop-zone-label");
+		assert.ok(dropZoneLabel, "drop zone label is exposed on modal");
+		assert.true(dropZoneLabel.startsWith("Drop file to upload to "), "drop zone label announces upload target");
+		await triggerEvent("[data-test-choose-file-modal]", "drop", { dataTransfer: {
+			types: ["Files"],
+			files: [droppedFile]
+		} });
+		await waitUntil(() => !document.querySelector("[data-test-choose-file-modal]"), {
+			timeout: 1e4,
+			timeoutMessage: "file chooser modal did not close after drop upload"
+		});
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-card=\"http://test-realm/test/dropped.txt\"]").exists("attachment field now shows the dropped file");
+	});
+	(0, import_qunit.test)("uploading a file without an extension shows an error", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		await click("[data-test-choose-file-modal-upload-button]");
+		let fileUpload = getService("file-upload");
+		await waitUntil(() => fileUpload.activeUploads.length > 0, {
+			timeout: 2e3,
+			timeoutMessage: "upload task was not created"
+		});
+		fileUpload.activeUploads[0].__provideFileForTesting(new File(["no extension"], "Makefile", { type: "application/octet-stream" }));
+		await waitUntil(() => document.querySelector("[data-test-choose-file-modal-upload-error]") !== null, {
+			timeout: 1e4,
+			timeoutMessage: "upload error was not displayed"
+		});
+		assert.dom("[data-test-choose-file-modal-upload-error]").includesText("has no extension", "error message mentions missing extension");
+		assert.dom("[data-test-choose-file-modal]").exists("modal remains open after upload error");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("cancelling file upload does not close the modal", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-add-new]").exists("add button rendered for FileDef field");
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		await click("[data-test-choose-file-modal-upload-button]");
+		let fileUpload = getService("file-upload");
+		await waitUntil(() => fileUpload.activeUploads.length > 0, {
+			timeout: 2e3,
+			timeoutMessage: "upload task was not created"
+		});
+		fileUpload.activeUploads[0].__provideFileForTesting(null);
+		await settled();
+		assert.dom("[data-test-choose-file-modal]").exists("modal remains open after cancelling file pick");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+});
+(0, import_qunit.module)("Acceptance | file chooser keyboard tests", function(hooks) {
+	setupInteractSubmodeTests(hooks, { setRealm() {} });
+	async function moveCursorToDirectory(path) {
+		for (let i = 0; i < 40; i++) {
+			if (document.querySelector(`[data-test-directory="${path}"].cursor`)) break;
+			await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "ArrowDown");
+		}
+	}
+	(0, import_qunit.test)("file list area is focused when the modal opens", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		assert.strictEqual(document.activeElement, document.querySelector("[data-test-file-tree-nav]"), "file tree nav has focus on modal open");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("file list area is focused when the modal reopens", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitUntil(() => document.activeElement === document.querySelector("[data-test-file-tree-nav]"), {
+			timeout: 5e3,
+			timeoutMessage: "file tree nav was not focused on first open"
+		});
+		await click("[data-test-choose-file-modal-cancel-button]");
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitUntil(() => document.activeElement === document.querySelector("[data-test-file-tree-nav]"), {
+			timeout: 5e3,
+			timeoutMessage: "file tree nav was not focused on reopen"
+		});
+		assert.strictEqual(document.activeElement, document.querySelector("[data-test-file-tree-nav]"), "file tree nav has focus on modal reopen");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("individual file buttons are not in the tab order", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-file=\"README.txt\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		assert.dom("[data-test-file=\"README.txt\"]").hasAttribute("tabindex", "-1", "file buttons have tabindex=-1");
+		assert.dom("[data-test-directory=\"FileLinkCard/\"]").hasAttribute("tabindex", "-1", "directory buttons have tabindex=-1");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("typing in the file list moves the cursor to the first matching file", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-file=\"README.txt\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await triggerEvent("[data-test-file-tree-nav]", "keydown", { key: "r" });
+		assert.dom("[data-test-file=\"README.txt\"]").hasClass("cursor", "README.txt gets the cursor");
+		assert.dom("[data-test-file=\"test-image.png\"]").doesNotHaveClass("cursor", "test-image.png does not get the cursor");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("type-ahead cursor updates as more characters are typed", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-file=\"test-image.png\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await triggerEvent("[data-test-file-tree-nav]", "keydown", { key: "t" });
+		assert.dom("[data-test-file=\"test-image.png\"]").hasClass("cursor", "test-image.png gets the cursor for \"t\"");
+		assert.dom("[data-test-file=\"README.txt\"]").doesNotHaveClass("cursor", "README.txt does not get the cursor for \"t\"");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("typing moves the cursor to a matching entry", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-directory=\"FileLinkCard/\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await triggerEvent("[data-test-file-tree-nav]", "keydown", { key: "f" });
+		let cursor = document.querySelector("[data-test-file-tree-nav] button.cursor");
+		let cursorLabel = cursor?.textContent?.trim().toLowerCase();
+		const cursorMatchesTypedPrefix = Boolean(cursorLabel?.startsWith("f"));
+		assert.ok(cursor, "cursor moved to a matching entry");
+		assert.true(cursorMatchesTypedPrefix, "cursor moved to an entry starting with \"f\"");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("ArrowDown moves the cursor through the file list", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-file=\"README.txt\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "ArrowDown");
+		assert.dom("[data-test-file-tree-nav] button.cursor").exists("some item has the cursor after first ArrowDown");
+		let firstItem = document.querySelector("[data-test-file-tree-nav] button.cursor");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "ArrowDown");
+		assert.notStrictEqual(document.querySelector("[data-test-file-tree-nav] button.cursor"), firstItem, "cursor moved to a different item on second ArrowDown");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("ArrowUp from the first item keeps the cursor on the first item", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-file=\"README.txt\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "ArrowDown");
+		let firstItem = document.querySelector("[data-test-file-tree-nav] button.cursor");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "ArrowUp");
+		assert.strictEqual(document.querySelector("[data-test-file-tree-nav] button.cursor"), firstItem, "cursor stays on first item when ArrowUp from first item");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("ArrowRight expands a directory and moves the cursor into it", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-directory=\"FileLinkCard/\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await moveCursorToDirectory("FileLinkCard/");
+		assert.dom("[data-test-directory=\"FileLinkCard/\"]").hasClass("cursor", "cursor is on FileLinkCard/");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "ArrowRight");
+		assert.dom("[data-test-file=\"FileLinkCard/empty.json\"]").exists("FileLinkCard/ is expanded and shows children");
+		assert.dom("[data-test-directory=\"FileLinkCard/\"]").doesNotHaveClass("cursor", "cursor moved into the directory");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("ArrowLeft collapses an open directory", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-directory=\"FileLinkCard/\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await click("[data-test-directory=\"FileLinkCard/\"]");
+		assert.dom("[data-test-file=\"FileLinkCard/empty.json\"]").exists("directory is expanded");
+		await focus("[data-test-file-tree-nav]");
+		await moveCursorToDirectory("FileLinkCard/");
+		assert.dom("[data-test-directory=\"FileLinkCard/\"]").hasClass("cursor", "cursor is on FileLinkCard/");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "ArrowLeft");
+		assert.dom("[data-test-file=\"FileLinkCard/empty.json\"]").doesNotExist("FileLinkCard/ is collapsed");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("Enter on a file confirms the selection and closes the modal", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-file=\"README.txt\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await triggerEvent("[data-test-file-tree-nav]", "keydown", { key: "r" });
+		assert.dom("[data-test-file=\"README.txt\"]").hasClass("cursor", "cursor is on README.txt");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "Enter");
+		await waitUntil(() => !document.querySelector("[data-test-choose-file-modal]"), {
+			timeout: 5e3,
+			timeoutMessage: "modal did not close after Enter"
+		});
+		assert.dom("[data-test-links-to-editor=\"attachment\"] [data-test-card=\"http://test-realm/test/README.txt\"]").exists("README.txt was confirmed as the attachment");
+	});
+	(0, import_qunit.test)("Enter on a directory expands/collapses it without closing the modal", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await waitFor("[data-test-directory=\"FileLinkCard/\"]", {
+			timeout: 5e3,
+			timeoutMessage: "file tree did not load"
+		});
+		await focus("[data-test-file-tree-nav]");
+		await moveCursorToDirectory("FileLinkCard/");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "Enter");
+		assert.dom("[data-test-choose-file-modal]").exists("modal is still open after Enter on directory");
+		assert.dom("[data-test-file=\"FileLinkCard/empty.json\"]").exists("FileLinkCard/ is now expanded");
+		await triggerKeyEvent("[data-test-file-tree-nav]", "keydown", "Enter");
+		assert.dom("[data-test-file=\"FileLinkCard/empty.json\"]").doesNotExist("FileLinkCard/ is collapsed again");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("realm chooser is keyboard focusable", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "edit"
+		}]] });
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		let realmChooser = document.querySelector("[data-test-choose-file-modal-realm-chooser]");
+		if (realmChooser) {
+			let trigger = realmChooser.querySelector(".ember-power-select-trigger, [role=\"combobox\"], button");
+			if (trigger) {
+				assert.ok(trigger, "realm chooser trigger exists");
+				const hasKeyboardAffordance = trigger.getAttribute("tabindex") !== null || trigger.querySelector("input, button, [tabindex]") !== null;
+				const isExplicitlyDisabled = trigger.getAttribute("aria-disabled") === "true";
+				const isFocusableOrDisabled = Boolean(hasKeyboardAffordance || isExplicitlyDisabled);
+				assert.ok(isFocusableOrDisabled, "realm chooser is keyboard focusable or explicitly disabled");
+			} else assert.true(true, "realm chooser has no interactive trigger in this configuration");
+		} else assert.true(true, "realm chooser is not rendered when there is only one available realm");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+});
+(0, import_qunit.module)("Acceptance | file chooser tests | upload size limit", function(hooks) {
+	let FILE_SIZE_LIMIT = 512;
+	let AUDIO_SIZE_LIMIT = 4096;
+	setupInteractSubmodeTests(hooks, {
+		setRealm() {},
+		fileSizeLimitBytes: FILE_SIZE_LIMIT,
+		audioSizeLimitBytes: AUDIO_SIZE_LIMIT
+	});
+	(0, import_qunit.test)("shows error when uploaded file exceeds size limit", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		assert.dom("[data-test-choose-file-modal]").exists("file chooser modal is open");
+		await click("[data-test-choose-file-modal-upload-button]");
+		let fileUpload = getService("file-upload");
+		await waitUntil(() => fileUpload.activeUploads.length > 0, {
+			timeout: 2e3,
+			timeoutMessage: "upload task was not created"
+		});
+		let task = fileUpload.activeUploads[0];
+		let oversizedContent = new Uint8Array(612).fill(255);
+		task.__provideFileForTesting(new File([oversizedContent], "too-big.bin", { type: "application/octet-stream" }));
+		await waitUntil(() => document.querySelector("[data-test-choose-file-modal-upload-error]") !== null, {
+			timeout: 1e4,
+			timeoutMessage: "upload error was not displayed"
+		});
+		assert.dom("[data-test-choose-file-modal-upload-error]").exists("error message is displayed");
+		assert.dom("[data-test-choose-file-modal-upload-error]").includesText("exceeds maximum allowed size", "error message mentions the size limit");
+		assert.dom("[data-test-choose-file-modal]").exists("modal remains open after upload error");
+		assert.dom("[data-test-choose-file-modal-upload-button]").hasText("Retry…", "retry button is shown");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+	(0, import_qunit.test)("audio is measured against the audio limit, not the general file limit", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await click("[data-test-choose-file-modal-upload-button]");
+		let fileUpload = getService("file-upload");
+		await waitUntil(() => fileUpload.activeUploads.length > 0, {
+			timeout: 2e3,
+			timeoutMessage: "upload task was not created"
+		});
+		let task = fileUpload.activeUploads[0];
+		task.__provideFileForTesting(new File([new Uint8Array(612).fill(255)], "theme.mp3", { type: "audio/mpeg" }));
+		await waitUntil(() => task.state === "complete" || task.state === "error", {
+			timeout: 1e4,
+			timeoutMessage: "upload task never reached a terminal state"
+		});
+		assert.strictEqual(task.state, "complete", "audio under the audio limit uploads instead of being rejected");
+		assert.dom("[data-test-choose-file-modal-upload-error]").doesNotExist("no size error is displayed");
+	});
+	(0, import_qunit.test)("audio over the audio limit is still rejected", async function(assert) {
+		await visitOperatorMode({ stacks: [[{
+			id: `${testRealmURL}FileLinkCard/empty`,
+			format: "isolated"
+		}]] });
+		await click(`[data-test-operator-mode-stack="0"] [data-test-edit-button]`);
+		await click("[data-test-links-to-editor=\"attachment\"] [data-test-add-new=\"attachment\"]");
+		await click("[data-test-choose-file-modal-upload-button]");
+		let fileUpload = getService("file-upload");
+		await waitUntil(() => fileUpload.activeUploads.length > 0, {
+			timeout: 2e3,
+			timeoutMessage: "upload task was not created"
+		});
+		fileUpload.activeUploads[0].__provideFileForTesting(new File([new Uint8Array(4196).fill(255)], "too-long.mp3", { type: "audio/mpeg" }));
+		await waitUntil(() => document.querySelector("[data-test-choose-file-modal-upload-error]") !== null, {
+			timeout: 1e4,
+			timeoutMessage: "upload error was not displayed"
+		});
+		assert.dom("[data-test-choose-file-modal-upload-error]").includesText(`exceeds maximum allowed size (${AUDIO_SIZE_LIMIT} bytes)`, "error names the audio limit");
+		await click("[data-test-choose-file-modal-cancel-button]");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/file-def-edit-Bstl7Kkl.js

@@ -0,0 +1,2 @@
+import { t as FileDefEditTemplate } from "./file-def-edit-C1dzJxmQ.js";
+export { FileDefEditTemplate as default };

package/bundled-test-harness/assets/file-def-edit-C1dzJxmQ.js

@@ -0,0 +1,26 @@
+import "./chunk-Rp0pCe6z.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import { r as concat } from "./helper-m6jA5HmU.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import "./template-factory-ds9s0u8l.js";
+//#region ../base/default-templates/file-def-edit.gts
+var FileDefEditTemplate = class extends Component {
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "Ulsn7U4U",
+			"block": "[[[10,0],[14,0,\"filedef-edit-unavailable\"],[14,\"data-test-filedef-edit-unavailable\",\"\"],[14,\"data-scopedcss-1d61802489-ebe697841a\",\"\"],[12],[1,\"\\n  This file\\n  \"],[1,[52,[30,1,[\"id\"]],[28,[32,0],[\" (\",[30,1,[\"id\"]],\")\"],null]]],[1,\"\\n  is not editable via this interface. Replace it via file upload.\\n\"],[13],[1,\"\\n\"]],[\"@model\"],[\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/base/default-templates/file-def-edit.gts",
+			"scope": () => [concat],
+			"isStrictMode": true
+		}), this);
+	}
+};
+(globalThis.__boxelBundledBaseScopedCSS ??= {})["default-templates/file-def-edit"] = {
+	"css": ["./file-def-edit.gts.CiAgLmZpbGVkZWYtZWRpdC11bmF2YWlsYWJsZVtkYXRhLXNjb3BlZGNzcy0xZDYxODAyNDg5LWViZTY5Nzg0MWFdIHsKICAgIGJhY2tncm91bmQ6IHZhcigtLWJveGVsLWxpZ2h0KTsKICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWJveGVsLTIwMCk7CiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3hlbC1yYWRpdXMtc20pOwogICAgY29sb3I6IHZhcigtLWJveGVsLTcwMCk7CiAgICBmb250LXNpemU6IHZhcigtLWJveGVsLWZvbnQtc20pOwogICAgcGFkZGluZzogdmFyKC0tYm94ZWwtc3AtbWQpOwogIH0K.glimmer-scoped.css"],
+	"imports": []
+};
+(globalThis.__boxelBundledBaseIdentities ??= {})["default-templates/file-def-edit"] = { "default": FileDefEditTemplate };
+//#endregion
+export { FileDefEditTemplate as t };

package/bundled-test-harness/assets/file-def-embedded-CUy4G7Vc.js

@@ -0,0 +1,2 @@
+import { t as FileDefEmbeddedTemplate } from "./file-def-embedded-DJs6P5t0.js";
+export { FileDefEmbeddedTemplate as default };

package/bundled-test-harness/assets/file-def-embedded-DJs6P5t0.js

@@ -0,0 +1,38 @@
+import "./chunk-Rp0pCe6z.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 { l as fileProfileSource, u as fileViewModel } from "./file-view-model-BhwI8CDL.js";
+import { n as filePreviewComponentFor } from "./file-preview-stage-CV3qZpiK.js";
+import { t as FileEmbeddedShell } from "./file-shell-embedded-CEv0-6OE.js";
+//#region ../base/default-templates/file-def-embedded.gts
+var FileDefEmbeddedTemplate = class extends Component {
+	get viewModel() {
+		return fileViewModel(this.args.model, "embedded", fileProfileSource(this.args.model, this.args.cardOrField));
+	}
+	get preview() {
+		return filePreviewComponentFor(this.args.model, this.args.cardOrField);
+	}
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "hIuQmf5S",
+			"block": "[[[8,[32,0],null,[[\"@model\",\"@fields\",\"@preview\"],[[30,0,[\"viewModel\"]],[30,1],[30,0,[\"preview\"]]]],null]],[\"@fields\"],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/base/default-templates/file-def-embedded.gts",
+			"scope": () => [FileEmbeddedShell],
+			"isStrictMode": true
+		}), this);
+	}
+};
+(globalThis.__boxelBundledBaseScopedCSS ??= {})["default-templates/file-def-embedded"] = {
+	"css": [],
+	"imports": [
+		"file-formats/file-preview-stage",
+		"file-formats/file-shell-embedded",
+		"file-formats/file-view-model"
+	]
+};
+(globalThis.__boxelBundledBaseIdentities ??= {})["default-templates/file-def-embedded"] = { "default": FileDefEmbeddedTemplate };
+//#endregion
+export { FileDefEmbeddedTemplate as t };

package/bundled-test-harness/assets/file-def-fitted-BlrBFfLh.js

@@ -0,0 +1,38 @@
+import "./chunk-Rp0pCe6z.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 { l as fileProfileSource, u as fileViewModel } from "./file-view-model-BhwI8CDL.js";
+import { n as filePreviewComponentFor } from "./file-preview-stage-CV3qZpiK.js";
+import { t as FileFittedShell } from "./file-shell-fitted-iSTg3PJa.js";
+//#region ../base/default-templates/file-def-fitted.gts
+var FileDefFittedTemplate = class extends Component {
+	get viewModel() {
+		return fileViewModel(this.args.model, "fitted", fileProfileSource(this.args.model, this.args.cardOrField));
+	}
+	get preview() {
+		return filePreviewComponentFor(this.args.model, this.args.cardOrField);
+	}
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "jDJ2hElb",
+			"block": "[[[8,[32,0],null,[[\"@model\",\"@fields\",\"@preview\"],[[30,0,[\"viewModel\"]],[30,1],[30,0,[\"preview\"]]]],null]],[\"@fields\"],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/base/default-templates/file-def-fitted.gts",
+			"scope": () => [FileFittedShell],
+			"isStrictMode": true
+		}), this);
+	}
+};
+(globalThis.__boxelBundledBaseScopedCSS ??= {})["default-templates/file-def-fitted"] = {
+	"css": [],
+	"imports": [
+		"file-formats/file-preview-stage",
+		"file-formats/file-shell-fitted",
+		"file-formats/file-view-model"
+	]
+};
+(globalThis.__boxelBundledBaseIdentities ??= {})["default-templates/file-def-fitted"] = { "default": FileDefFittedTemplate };
+//#endregion
+export { FileDefFittedTemplate as t };

package/bundled-test-harness/assets/file-def-fitted-Bo5Qfkyf.js

@@ -0,0 +1,2 @@
+import { t as FileDefFittedTemplate } from "./file-def-fitted-BlrBFfLh.js";
+export { FileDefFittedTemplate as default };