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

package/bundled-test-harness/assets/code-submode-test-AHV4mzJ4.js

@@ -0,0 +1,1839 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL, Ls as wrapper_default, Xn as APP_BOXEL_REALM_EVENT_TYPE } from "./runtime-common-BTaLJEw-.js";
+import { T as rri } from "./paths-C9-NYXnM.js";
+import { D as baseRRI, it as baseRealmRRI } from "./constants-Icc0nFW-.js";
+import { _ as fileDefFormats, h as cardDefFormats } from "./bfm-card-references-Cjos2rOp.js";
+import { n as src_default } from "./src-DPaAwa4H.js";
+import { c as ModuleInspectorSelections, g as SpecSelection, u as PlaygroundSelections } from "./local-storage-keys-CS7XLz7J.js";
+import { M as waitUntil, T as settled, c as triggerKeyEvent, d as click, k as visit, l as triggerEvent, n as scrollTo, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
+import { s as Position } from "./editor.api-BinOIICS.js";
+import "./editor.main-BpsSmHD-.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { D as realmConfigCardJSON, Et as percySnapshot, F as setupLocalIndexing, H as testModuleRealm, L as setupRealmCacheTeardown, S as getMonacoContent, Z as withCachedRealmSetup, a as SYSTEM_CARD_FIXTURE_CONTENTS, ct as setupApplicationTest, j as setupAcceptanceTestRealm, k as setMonacoContent, mt as setupAuthEndpoints, s as assertMessages, st as visitOperatorMode, t as setupMockMatrix, z as setupUserSubscription } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { c as removeSpecSelection, d as setPlaygroundSelections, s as removePlaygroundSelections } from "./playground-B02e8uqB.js";
+//#region tests/acceptance/code-submode-test.ts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var indexCardSource = `
+  import { CardDef, Component } from "@cardstack/base/card-api";
+
+  export class Index extends CardDef {
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-index-card>
+          Hello, world!
+        </div>
+      </template>
+    };
+  }
+`;
+var postalCodeFieldSource = `
+  import {
+    contains,
+    field,
+    Component,
+    FieldDef,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+
+  export class PostalCode extends FieldDef {
+    static displayName = 'Postal Code';
+    @field fiveDigitPostalCode = contains(StringField); // required
+    @field fourDigitOptional = contains(StringField);
+
+    static embedded = class Embedded extends Component<typeof this> {
+      <template>
+        <address>
+          <div><@fields.fiveDigitPostalCode /> - <@fields.fourDigitOptional /></div>
+        </address>
+      </template>
+    };
+  }
+`;
+var addressFieldSource = `
+  import {
+    contains,
+    field,
+    Component,
+    FieldDef,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+  import { PostalCode } from './postal-code';
+
+  export class Address extends FieldDef {
+    static displayName = 'Address';
+    @field streetAddress = contains(StringField); // required
+    @field city = contains(StringField); // required
+    @field region = contains(StringField);
+    @field postalCode = contains(PostalCode);
+    @field poBoxNumber = contains(StringField);
+    @field country = contains(StringField); // required // dropdown
+
+    static embedded = class Embedded extends Component<typeof this> {
+      <template>
+        <address>
+          <div><@fields.streetAddress /></div>
+          <@fields.city />
+          <@fields.region />
+          <@fields.postalCode /><@fields.poBoxNumber />
+          <@fields.country />
+        </address>
+      </template>
+    };
+  }
+`;
+var countryCardSource = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+
+  export class Country extends CardDef {
+    static displayName = 'Country';
+    @field name = contains(StringField);
+    @field cardTitle = contains(StringField, {
+      computeVia(this: Country) {
+        return this.name;
+      },
+    });
+
+    static embedded = class Embedded extends Component<typeof this> {
+      <template>
+        <address>
+          <@fields.name />
+        </address>
+      </template>
+    };
+  }
+`;
+var tripsFieldSource = `
+  import {
+    linksToMany,
+    field,
+    Component,
+    FieldDef,
+  } from '@cardstack/base/card-api';
+  import { Country } from './country';
+
+  export class Trips extends FieldDef {
+    static displayName = 'Trips';
+    @field countriesVisited = linksToMany(Country);
+
+    static embedded = class Embedded extends Component<typeof this> {
+      <template>
+        <address>
+          <@fields.countriesVisited />
+        </address>
+      </template>
+    };
+  }
+`;
+var personCardSource = `
+  import { contains, containsMany, field, linksTo, linksToMany, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+  import { Friend } from './friend';
+  import { Pet } from "./pet";
+  import { Address } from './address';
+  import { Trips } from './trips';
+
+  export class Person extends CardDef {
+    static displayName = 'Person';
+    @field firstName = contains(StringField);
+    @field lastName = contains(StringField);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Person) {
+        return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      },
+    });
+    @field pet = linksTo(Pet);
+    @field friends = linksToMany(Friend);
+    @field address = containsMany(StringField);
+    @field addressDetail = contains(Address);
+    @field trips = contains(Trips);
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-person>
+          <p>First name: <@fields.firstName /></p>
+          <p>Last name: <@fields.lastName /></p>
+          <p>Title: <@fields.cardTitle /></p>
+          <p>Address List: <@fields.address /></p>
+          <p>Friends: <@fields.friends /></p>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }
+`;
+var petCardSource = `
+  import { contains, field, Component, CardDef } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+
+  export class Pet extends CardDef {
+    static displayName = 'Pet';
+    @field name = contains(StringField);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Pet) {
+        return this.name;
+      },
+    });
+    static embedded = class Embedded extends Component<typeof this> {
+      <template>
+        <h3 data-test-pet={{@model.name}}>
+          <@fields.name/>
+        </h3>
+      </template>
+    }
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <h1>{{@model.cardTitle}}</h1>
+        <h2 data-test-pet={{@model.name}}>
+          <@fields.name/>
+        </h2>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
+      </template>
+    }
+  }
+`;
+var customEditCardSource = `
+  import { contains, field, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+  export class CustomEdit extends CardDef {
+    static displayName = 'Custom Edit';
+    @field name = contains(StringField);
+    static edit = class Edit extends Component<typeof this> {
+      <template>
+        <div data-test-custom-edit>Custom Edit: <@fields.name /></div>
+      </template>
+    };
+  }
+`;
+var employeeCardSource = `
+  import {
+    contains,
+    field,
+    Component,
+    CardDef
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+  import DateField from '@cardstack/base/date';
+  import BooleanField from '@cardstack/base/boolean';
+  import { Person } from './person';
+
+  export class Isolated extends Component<typeof Employee> {
+    <template>
+      <@fields.firstName /> <@fields.lastName />
+
+      Department: <@fields.department />
+    </template>
+  };
+
+  export class Employee extends Person {
+    static displayName = 'Employee';
+    @field department = contains(StringField);
+
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <@fields.firstName /> <@fields.lastName />
+
+        Department: <@fields.department />
+      </template>
+    };
+  }
+
+  export function isHourly (this: Employee) {
+    return !this.isSalaried;
+  }
+`;
+var inThisFileSource = `
+  import {
+    contains,
+    field,
+    CardDef,
+    FieldDef,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+
+  export const exportedVar = 'exported var';
+
+  const localVar = 'local var';
+
+  class LocalClass {}
+  export class ExportedClass {}
+
+  export class ExportedClassInheritLocalClass extends LocalClass {}
+
+  function localFunction() {}
+  export function exportedFunction() {}
+
+  export { LocalClass as AClassWithExportName };
+
+  class LocalCard extends CardDef {
+    static displayName = 'local card';
+  }
+
+  export class ExportedCard extends CardDef {
+    static displayName = 'exported card';
+    @field someString = contains(StringField);
+  }
+
+  export class ExportedCardInheritLocalCard extends LocalCard {
+    static displayName = 'exported card extends local card';
+  }
+
+  class LocalField extends FieldDef {
+    static displayName = 'local field';
+  }
+  export class ExportedField extends FieldDef {
+    static displayName = 'exported field';
+    @field someString = contains(StringField);
+  }
+
+  export class ExportedFieldInheritLocalField extends LocalField {
+    static displayName = 'exported field extends local field';
+  }
+
+  export default class DefaultClass {}
+`;
+var friendCardSource = `
+  import { contains, linksTo, field, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+
+  export class Friend extends CardDef {
+    static displayName = 'Friend';
+    @field name = contains(StringField);
+    @field friend = linksTo(() => Friend);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Friend) {
+        return this.name;
+      },
+    });
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-friend-card={{@model.name}}>
+          <p>Friend name: <@fields.name /></p>
+          <div data-test-friend-link>
+            <@fields.friend />
+          </div>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }
+`;
+var txtSource = `
+  Hello, world!
+`;
+var brokenSource = "some text to make the code broken" + friendCardSource;
+var brokenCountryCardSource = countryCardSource.replace("return this.name", "return intentionalError(this.name)");
+var brokenAdoptionInstance = `{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "El Campo"
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "./broken-country",
+        "name": "Country"
+      }
+    }
+  }
+}
+`;
+var notFoundAdoptionInstance = `{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "firstName": "Alice",
+      "lastName": "Enwunder",
+      "body": "xyz"
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "./non-card",
+        "name": "Author"
+      }
+    }
+  }
+}
+`;
+var personalRealmURL;
+(0, import_qunit.module)("Acceptance | code submode tests", function(_hooks) {
+	(0, import_qunit.module)("multiple realms", function(hooks) {
+		let additionalRealmURL;
+		let catalogRealmURL;
+		setupApplicationTest(hooks);
+		setupLocalIndexing(hooks);
+		setupRealmCacheTeardown(hooks);
+		let mockMatrixUtils = setupMockMatrix(hooks, { loggedInAs: "@testuser:localhost" });
+		let { setActiveRealms, createAndJoinRoom } = mockMatrixUtils;
+		async function openNewFileModal(menuSelection) {
+			await waitFor("[data-test-new-file-button]");
+			await click("[data-test-new-file-button]");
+			await click(`[data-test-boxel-menu-item-text="${menuSelection}"]`);
+		}
+		hooks.beforeEach(async function() {
+			createAndJoinRoom({
+				sender: "@testuser:localhost",
+				name: "room-test"
+			});
+			setupUserSubscription();
+			setupAuthEndpoints();
+			removePlaygroundSelections();
+			removeSpecSelection();
+			src_default.localStorage.removeItem(ModuleInspectorSelections);
+			src_default.localStorage.removeItem(PlaygroundSelections);
+			src_default.localStorage.removeItem(SpecSelection);
+			let realmServerService = getService("realm-server");
+			personalRealmURL = `${realmServerService.url}testuser/personal/`;
+			additionalRealmURL = `${realmServerService.url}testuser/aaa/`;
+			catalogRealmURL = `${realmServerService.url}catalog/`;
+			setActiveRealms([
+				catalogRealmURL,
+				additionalRealmURL,
+				personalRealmURL
+			]);
+			await withCachedRealmSetup(async () => {
+				await setupAcceptanceTestRealm({
+					mockMatrixUtils,
+					realmURL: personalRealmURL,
+					permissions: { "@testuser:localhost": [
+						"read",
+						"write",
+						"realm-owner"
+					] },
+					contents: {
+						...SYSTEM_CARD_FIXTURE_CONTENTS,
+						"hello.txt": txtSource,
+						"realm.json": realmConfigCardJSON({
+							name: `Test User's Workspace`,
+							backgroundURL: "/test-fixtures/realm-images/4k-origami-flock.jpg",
+							iconURL: "/test-fixtures/realm-images/letter-t.png"
+						})
+					}
+				});
+				await setupAcceptanceTestRealm({
+					mockMatrixUtils,
+					realmURL: additionalRealmURL,
+					permissions: { "@testuser:localhost": [
+						"read",
+						"write",
+						"realm-owner"
+					] },
+					contents: {
+						...SYSTEM_CARD_FIXTURE_CONTENTS,
+						"hello.txt": txtSource,
+						"realm.json": realmConfigCardJSON({
+							name: `Additional Workspace`,
+							backgroundURL: "/test-fixtures/realm-images/4k-powder-puff.jpg",
+							iconURL: "/test-fixtures/realm-images/letter-a.png"
+						})
+					}
+				});
+				await setupAcceptanceTestRealm({
+					mockMatrixUtils,
+					realmURL: catalogRealmURL,
+					permissions: { "*": ["read"] },
+					contents: {
+						...SYSTEM_CARD_FIXTURE_CONTENTS,
+						"hello.txt": txtSource,
+						"realm.json": realmConfigCardJSON({
+							name: `Catalog Realm`,
+							backgroundURL: "/test-fixtures/realm-images/letter-c.png",
+							iconURL: "/test-fixtures/realm-images/4k-watercolor-splashes.jpg"
+						})
+					}
+				});
+				await setupAcceptanceTestRealm({
+					mockMatrixUtils,
+					realmURL: testRealmURL,
+					permissions: { "@testuser:localhost": [
+						"read",
+						"write",
+						"realm-owner"
+					] },
+					contents: { ...SYSTEM_CARD_FIXTURE_CONTENTS }
+				});
+			});
+			setupAuthEndpoints({
+				[catalogRealmURL]: ["read"],
+				[additionalRealmURL]: [
+					"read",
+					"write",
+					"realm-owner"
+				],
+				[personalRealmURL]: [
+					"read",
+					"write",
+					"realm-owner"
+				]
+			});
+		});
+		(0, import_qunit.test)("default realm is the personal realm", async function(assert) {
+			await visitOperatorMode({ submode: "code" });
+			await waitFor("[data-test-file]");
+			assert.dom("[data-test-card-url-bar-realm-info]").containsText(`in Test User's Workspace`);
+		});
+		(0, import_qunit.test)("first item in add file realm dropdown is the currently displayed realm", async function(assert) {
+			await visitOperatorMode({ submode: "code" });
+			await waitFor("[data-test-file]");
+			await openNewFileModal("Card Definition");
+			assert.dom("[data-test-selected-realm]").containsText(`Test User's Workspace`, "the selected (default) realm is correct");
+			await click("[data-test-cancel-create-file]");
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${additionalRealmURL}hello.txt`
+			});
+			await openNewFileModal("Card Definition");
+			assert.dom("[data-test-selected-realm]").containsText(`Additional Workspace`, "the selected realm is correct");
+		});
+	});
+	(0, import_qunit.module)("single realm", function(hooks) {
+		let realm;
+		let monacoService;
+		setupApplicationTest(hooks);
+		setupLocalIndexing(hooks);
+		setupRealmCacheTeardown(hooks);
+		let mockMatrixUtils = setupMockMatrix(hooks, {
+			loggedInAs: "@testuser:localhost",
+			activeRealms: [testRealmURL]
+		});
+		let { createAndJoinRoom, setActiveRealms } = mockMatrixUtils;
+		hooks.beforeEach(async function() {
+			createAndJoinRoom({
+				sender: "@testuser:localhost",
+				name: "room-test"
+			});
+			setupUserSubscription();
+			setupAuthEndpoints();
+			monacoService = getService("monaco-service");
+			({realm} = await withCachedRealmSetup(async () => setupAcceptanceTestRealm({
+				mockMatrixUtils,
+				contents: {
+					...SYSTEM_CARD_FIXTURE_CONTENTS,
+					"index.gts": indexCardSource,
+					"pet-person.gts": personCardSource,
+					"person.gts": personCardSource,
+					"pet.gts": petCardSource,
+					"friend.gts": friendCardSource,
+					"employee.gts": employeeCardSource,
+					"in-this-file.gts": inThisFileSource,
+					"postal-code.gts": postalCodeFieldSource,
+					"address.gts": addressFieldSource,
+					"country.gts": countryCardSource,
+					"trips.gts": tripsFieldSource,
+					"broken.gts": brokenSource,
+					"broken-country.gts": brokenCountryCardSource,
+					"custom-edit.gts": customEditCardSource,
+					"CustomEdit/sample.json": { data: {
+						attributes: { name: "Sample" },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}custom-edit`,
+							name: "CustomEdit"
+						} }
+					} },
+					"broken-adoption-instance.json": brokenAdoptionInstance,
+					"not-found-adoption-instance.json": notFoundAdoptionInstance,
+					"person-entry.json": { data: {
+						type: "card",
+						attributes: {
+							cardTitle: "Person",
+							cardDescription: "Spec",
+							specType: "card",
+							ref: {
+								module: `./person`,
+								name: "Person"
+							}
+						},
+						meta: { adoptsFrom: {
+							module: `${baseRealmRRI}spec`,
+							name: "Spec"
+						} }
+					} },
+					"pet-entry.json": { data: {
+						type: "card",
+						attributes: {
+							specType: "card",
+							ref: {
+								module: `./pet`,
+								name: "Pet"
+							}
+						},
+						meta: { adoptsFrom: {
+							module: `${baseRealmRRI}spec`,
+							name: "Spec"
+						} }
+					} },
+					"pet-entry-2.json": { data: {
+						type: "card",
+						attributes: {
+							specType: "card",
+							ref: {
+								module: `./pet`,
+								name: "Pet"
+							}
+						},
+						meta: { adoptsFrom: {
+							module: `${baseRealmRRI}spec`,
+							name: "Spec"
+						} }
+					} },
+					"index.json": { data: {
+						type: "card",
+						attributes: {},
+						meta: { adoptsFrom: {
+							module: "./index",
+							name: "Index"
+						} }
+					} },
+					"not-json.json": "I am not JSON.",
+					"care-guide.md": "# Care Guide\n\nWater weekly.\n",
+					"Person/fadhlan.json": { data: {
+						attributes: {
+							firstName: "Fadhlan",
+							address: [{
+								city: "Bandung",
+								country: "Indonesia",
+								shippingInfo: {
+									preferredCarrier: "DHL",
+									remarks: `Don't let bob deliver the package--he's always bringing it to the wrong address`
+								}
+							}]
+						},
+						relationships: { pet: { links: { self: `${testRealmURL}Pet/mango` } } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}person`,
+							name: "Person"
+						} }
+					} },
+					"Person/1.json": { data: {
+						type: "card",
+						attributes: {
+							firstName: "Hassan",
+							lastName: "Abdel-Rahman"
+						},
+						meta: { adoptsFrom: {
+							module: rri("../person"),
+							name: "Person"
+						} }
+					} },
+					"Pet/mango.json": { data: {
+						attributes: { name: "Mango" },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}pet`,
+							name: "Pet"
+						} }
+					} },
+					"Friend/amy.json": { data: {
+						attributes: { name: "Amy" },
+						relationships: { friend: { links: { self: `${testRealmURL}Friend/bob` } } },
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}friend`,
+							name: "Friend"
+						} }
+					} },
+					"Friend/bob.json": { data: {
+						attributes: { name: "Bob" },
+						relationships: {},
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}friend`,
+							name: "Friend"
+						} }
+					} },
+					"Person/with-friends.json": { data: {
+						attributes: {
+							firstName: "With",
+							lastName: "Friends"
+						},
+						relationships: {
+							"friends.0": { links: { self: `${testRealmURL}Friend/amy` } },
+							"friends.1": { links: { self: `${testRealmURL}Friend/bob` } }
+						},
+						meta: { adoptsFrom: {
+							module: `${testRealmURL}person`,
+							name: "Person"
+						} }
+					} },
+					"Country/united-states.json": { data: {
+						type: "card",
+						attributes: {
+							name: "United States",
+							cardDescription: null,
+							cardThumbnailURL: null
+						},
+						meta: { adoptsFrom: {
+							module: "../country",
+							name: "Country"
+						} }
+					} },
+					"BrokenCountry/broken-country.json": { data: {
+						type: "card",
+						attributes: { name: "Broken Country" },
+						meta: { adoptsFrom: {
+							module: "../broken-country",
+							name: "Country"
+						} }
+					} },
+					"hello.txt": txtSource,
+					"z00.json": "{}",
+					"z01.json": "{}",
+					"z02.json": "{}",
+					"z03.json": "{}",
+					"z04.json": "{}",
+					"z05.json": "{}",
+					"z06.json": "{}",
+					"z07.json": "{}",
+					"z08.json": "{}",
+					"z09.json": "{}",
+					"z10.json": "{}",
+					"z11.json": "{}",
+					"z12.json": "{}",
+					"z13.json": "{}",
+					"z14.json": "{}",
+					"z15.json": "{}",
+					"z16.json": "{}",
+					"z17.json": "{}",
+					"z18.json": "{}",
+					"z19.json": "{}",
+					"zzz/zzz/file.json": "{}",
+					"realm.json": realmConfigCardJSON({
+						name: "Test Workspace B",
+						backgroundURL: "/test-fixtures/realm-images/pawel-czerwinski-Ly-ZLa-A5jti-Y-unsplash.jpg",
+						iconURL: "/test-fixtures/realm-images/boxel-logo.png"
+					}),
+					"noop.gts": `export function noop() {};\nclass NoopClass {}`
+				}
+			})));
+		});
+		(0, import_qunit.test)("defaults to inheritance view and can toggle to file view", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/1.json`
+			});
+			await waitFor("[data-test-file-view-header]");
+			assert.dom("[data-test-file-view-header]").hasAttribute("aria-label", "Inspector");
+			assert.dom("[data-test-inspector-toggle]").hasClass("active");
+			assert.dom("[data-test-file-browser-toggle]").doesNotHaveClass("active");
+			await waitFor("[data-test-card-inspector-panel]");
+			assert.dom("[data-test-card-inspector-panel]").exists();
+			assert.dom("[data-test-file]").doesNotExist();
+			await click("[data-test-file-browser-toggle]");
+			assert.dom("[data-test-file-view-header]").hasAttribute("aria-label", "File Browser");
+			assert.dom("[data-test-inspector-toggle]").doesNotHaveClass("active");
+			assert.dom("[data-test-file-browser-toggle]").hasClass("active");
+			await waitFor("[data-test-file]");
+			assert.dom("[data-test-inheritance-placeholder]").doesNotExist();
+			assert.dom("[data-test-file]").exists();
+		});
+		(0, import_qunit.test)("non-card JSON is shown as a file instance with file inheritance", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}z01.json`
+			});
+			await waitFor("[data-test-card-instance-definition]");
+			assert.dom("[data-test-definition-file-extension]").hasText(".json");
+			await waitFor("[data-test-definition-realm-name]");
+			assert.dom("[data-test-definition-realm-name]").hasText("in Test Workspace B");
+			assert.dom("[data-test-code-mode-card-renderer-body]").exists();
+			assert.dom("[data-test-code-mode-card-renderer-header] [data-test-boxel-card-header-title]").includesText("JSON");
+			assert.dom("[data-test-format-chooser=\"edit\"]").doesNotExist();
+			assert.dom("[data-test-code-mode-card-renderer-header] [data-test-edit-button]").doesNotExist();
+			assert.dom("[data-test-definition-header]").includesText("File Instance");
+			assert.dom("[data-test-inheritance-panel-header]").includesText("File Inheritance");
+			assert.dom("[data-test-definition-realm-name]").hasText("in Test Workspace B");
+			assert.dom("[data-test-action-button=\"Delete\"]").exists();
+		});
+		(0, import_qunit.test)("invalid JSON is shown as a file instance with file inheritance", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}not-json.json`
+			});
+			await waitFor("[data-test-card-instance-definition]");
+			assert.dom("[data-test-definition-file-extension]").hasText(".json");
+			await waitFor("[data-test-definition-realm-name]");
+			assert.dom("[data-test-definition-realm-name]").hasText("in Test Workspace B");
+			assert.dom("[data-test-code-mode-card-renderer-body]").exists();
+		});
+		(0, import_qunit.test)("showing module with a syntax error will display the error", async function(assert) {
+			let operatorModeStateParam = wrapper_default({
+				stacks: [],
+				submode: "code",
+				codePath: `${testRealmURL}broken.gts`
+			});
+			await visit(`/?operatorModeEnabled=true&operatorModeState=${encodeURIComponent(operatorModeStateParam)}`);
+			await waitFor("[data-test-error-details]");
+			assert.dom("[data-test-error-details]").includesText("Parse Error at broken.gts:1:6: 1:10");
+			assert.dom("[data-test-ai-assistant-panel]").doesNotExist();
+			await click("[data-test-send-error-to-ai-assistant]");
+			assert.dom("[data-test-ai-assistant-panel]").exists();
+			assertMessages(assert, [{
+				from: "testuser",
+				message: `In the attachment file, I encountered an error that needs fixing: Syntax Error Stack trace: Error: Parse Error at broken.gts:1:6: 1:10`,
+				files: [{
+					name: "broken.gts",
+					sourceUrl: `${testRealmURL}broken.gts`
+				}]
+			}]);
+			let roomId = getService("matrix-service").currentRoomId;
+			let lastEvent = mockMatrixUtils.getRoomEvents(roomId).pop();
+			assert.ok(JSON.parse(lastEvent.content.data).context.agentId, "message has agentId context so that AI assistant knows not to respond to it");
+			assert.dom("[data-test-send-error-to-ai-assistant]").exists();
+			let originalWriteText = navigator.clipboard.writeText;
+			let copiedText;
+			navigator.clipboard.writeText = async (text) => {
+				copiedText = text;
+				return Promise.resolve();
+			};
+			await click("[data-test-boxel-copy-button]");
+			const expected = "{\"message\":\"\",\"stack\":\"Error: Parse Error at broken.gts:1:6: 1:10";
+			assert.ok(copiedText.startsWith(expected), `clipboard text starts with ${expected}`);
+			navigator.clipboard.writeText = originalWriteText;
+		});
+		(0, import_qunit.test)("it shows card preview errors", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}not-found-adoption-instance.json`
+			});
+			await waitFor("[data-test-card-error]");
+			await settled();
+			await click("[data-test-toggle-details]");
+			assert.dom("[data-test-error-details]").includesText(`${testRealmURL}non-card not found`);
+			await settled();
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}broken-adoption-instance.json`
+			});
+			await waitFor("[data-test-card-error]");
+			await settled();
+			await click("[data-test-toggle-details]");
+			assert.dom("[data-test-error-details]").includesText("Stack trace: Error: Encountered error rendering HTML for card: intentionalError is not defined at render");
+			await percySnapshot(assert);
+		});
+		(0, import_qunit.test)("it shows card preview errors and fix it button in playground panel", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}broken-country.gts`
+			});
+			await click("[data-test-module-inspector-view=\"preview\"]");
+			await waitFor("[data-test-card-error]");
+			await click("[data-test-toggle-details]");
+			assert.dom("[data-test-error-details]").includesText("Stack trace: Error: Encountered error rendering HTML for card: intentionalError is not defined at render");
+			assert.dom("[data-test-ai-assistant-panel]").doesNotExist();
+			await click("[data-test-send-error-to-ai-assistant]");
+			assert.dom("[data-test-ai-assistant-panel]").exists();
+			assertMessages(assert, [{
+				from: "testuser",
+				message: `In the attachment file, I encountered an error that needs fixing: Card Error Encountered error rendering HTML for card: intentionalError is not defined`,
+				files: [{
+					name: "broken-country.gts",
+					sourceUrl: `${testRealmURL}broken-country.gts`
+				}]
+			}]);
+			assert.dom("[data-test-send-error-to-ai-assistant]").exists();
+		});
+		(0, import_qunit.test)("erroring cards attached as files instead and errors are included in AI context", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}broken-country.gts`,
+				aiAssistantOpen: true,
+				moduleInspector: "preview"
+			});
+			assert.dom("[data-test-ai-assistant-panel]").exists();
+			let roomId = mockMatrixUtils.getRoomIds().pop();
+			let instanceId = document.querySelector("[data-test-card-error]")?.getAttribute("data-test-card-error");
+			if (!instanceId) assert.ok(false, "could not find instance ID for the instance error");
+			else {
+				await fillIn("[data-test-message-field]", `Please try to fix the problem`);
+				await click("[data-test-send-message-btn]");
+				assertMessages(assert, [{
+					from: "testuser",
+					message: `Please try to fix the problem`,
+					files: [{
+						name: "broken-country.gts",
+						sourceUrl: `${testRealmURL}broken-country.gts`
+					}, {
+						name: instanceId.split("/").pop(),
+						sourceUrl: `${instanceId}.json`
+					}]
+				}]);
+			}
+			let matrixEvents = mockMatrixUtils.getRoomEvents(roomId);
+			let lastEvent = matrixEvents[matrixEvents.length - 1];
+			let aiContext = JSON.parse(lastEvent.content.data).context;
+			assert.strictEqual(aiContext.errorsDisplayed[0].message, "Encountered error rendering HTML for card: intentionalError is not defined");
+			assert.ok(aiContext.errorsDisplayed[0].stack.match(/at render/));
+			assert.strictEqual(aiContext.errorsDisplayed[0].sourceUrl, `${testRealmURL}broken-country.gts`);
+		});
+		(0, import_qunit.test)("it shows card preview errors and fix it button in module inspector", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}BrokenCountry/broken-country.json`
+			});
+			assert.dom("[data-test-error-display]").exists();
+			assert.dom("[data-test-error-display] [data-test-error-message]").hasText("Encountered error rendering HTML for card: intentionalError is not defined");
+			assert.dom("[data-test-ai-assistant-panel]").doesNotExist();
+			await click("[data-test-send-error-to-ai-assistant]");
+			assert.dom("[data-test-ai-assistant-panel]").exists();
+			assertMessages(assert, [{
+				from: "testuser",
+				message: `In the attachment file, I encountered an error that needs fixing: Card Error Encountered error rendering HTML for card: intentionalError is not defined`,
+				files: [{
+					name: "broken-country.gts",
+					sourceUrl: `${testRealmURL}broken-country.gts`
+				}]
+			}]);
+		});
+		(0, import_qunit.test)("empty state displays default realm info", async function(assert) {
+			await visitOperatorMode({ submode: "code" });
+			await waitFor("[data-test-file]");
+			assert.dom("[data-test-file]").exists();
+			assert.dom("[data-test-file-browser-toggle]").hasClass("active");
+			assert.dom("[data-test-card-inspector-panel]").doesNotExist();
+			assert.dom("[data-test-file-view-header]").hasAttribute("aria-label", "File Browser");
+			assert.dom("[data-test-inspector-toggle]").isDisabled();
+			assert.dom("[data-test-empty-code-mode]").exists();
+			assert.dom("[data-test-empty-code-mode]").containsText("Choose a file on the left to open it");
+			assert.dom("[data-test-card-url-bar-input]").hasValue("");
+			assert.dom("[data-test-card-url-bar-realm-info]").containsText("in Test Workspace B");
+		});
+		(0, import_qunit.test)("not-found state displays default realm info", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}perso`
+			});
+			await waitFor("[data-test-file]");
+			assert.dom("[data-test-file]").exists();
+			assert.dom("[data-test-file-browser-toggle]").hasClass("active");
+			assert.dom("[data-test-card-inspector-panel]").doesNotExist();
+			assert.dom("[data-test-file-view-header]").hasAttribute("aria-label", "File Browser");
+			assert.dom("[data-test-inspector-toggle]").isDisabled();
+			assert.dom("[data-test-empty-code-mode]").doesNotExist();
+			assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}perso`);
+			assert.dom("[data-test-card-url-bar-realm-info]").containsText("in Test Workspace B");
+		});
+		(0, import_qunit.module)("with connection to test realm", function(hooks) {
+			hooks.beforeEach(function() {
+				setActiveRealms([testRealmURL, `${testModuleRealm}`]);
+			});
+			(0, import_qunit.test)("code submode handles binary files", async function(assert) {
+				await visitOperatorMode({
+					submode: "code",
+					codePath: `${testModuleRealm}mango.png`
+				});
+				await waitFor("[data-test-binary-info]");
+				await waitFor("[data-test-definition-file-extension]");
+				assert.dom("[data-test-definition-file-extension]").hasText(".png");
+				await waitFor("[data-test-definition-realm-name]");
+				assert.dom("[data-test-definition-realm-name]").hasText("in Test Workspace A");
+				assert.dom("[data-test-definition-info-text]").containsText("Last saved");
+				assert.dom("[data-test-binary-info] [data-test-file-name]").hasText("mango.png");
+				assert.dom("[data-test-binary-info] [data-test-size]").hasText("114.71 kB");
+				assert.dom("[data-test-binary-info] [data-test-last-modified]").containsText("Last modified");
+				assert.dom("[data-test-code-mode-card-renderer-body]").exists();
+				await percySnapshot(assert);
+			});
+		});
+		(0, import_qunit.test)("can handle error when user puts unidentified domain in card URL bar", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				fileView: "browser",
+				codePath: `${testRealmURL}Person/1.json`,
+				openDirs: { [testRealmURL]: ["Person/"] }
+			});
+			await fillIn("[data-test-card-url-bar-input]", `http://unknown-domain.com/test/mango.png`);
+			await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+			await waitFor("[data-test-card-url-bar-error]");
+			assert.dom("[data-test-card-url-bar-error]").containsText("This resource does not exist");
+		});
+		(0, import_qunit.test)("card preview will show in the 3rd column when submode is set to code", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			assert.dom("[data-test-code-mode-card-renderer-header]").hasText("Person - Fadhlan");
+			assert.dom("[data-test-code-mode-card-renderer-body]").includesText("Fadhlan");
+			assert.dom("[data-test-format-chooser]").exists({ count: cardDefFormats.length });
+			assert.dom("[data-test-format-chooser=\"edit\"]").exists();
+			assert.dom("[data-test-format-chooser=\"metadata\"]").doesNotExist();
+			assert.dom("[data-test-code-mode-card-renderer-header] [data-test-edit-button]").exists();
+			assert.dom("[data-test-format-chooser=\"isolated\"]").hasClass("active");
+			await click("[data-test-format-chooser=\"fitted\"]");
+			assert.dom("[data-test-format-chooser=\"fitted\"]").hasClass("active");
+			assert.dom("[data-test-code-mode-card-renderer-body ] .field-component-card.fitted-format").exists();
+			await click("[data-test-format-chooser=\"embedded\"]");
+			assert.dom("[data-test-format-chooser=\"embedded\"]").hasClass("active");
+			assert.dom("[data-test-code-mode-card-renderer-body ] .field-component-card.embedded-format").exists();
+			await click("[data-test-format-chooser=\"atom\"]");
+			assert.dom("[data-test-format-chooser=\"atom\"]").hasClass("active");
+			assert.dom("[data-test-code-mode-card-renderer-body] .atom-format").exists();
+			assert.dom("[data-test-code-mode-card-renderer-body] .atom-format").includesText("Fadhlan");
+			await click("[data-test-format-chooser=\"edit\"]");
+			assert.dom("[data-test-format-chooser=\"edit\"]").hasClass("active");
+			assert.dom("[data-test-code-mode-card-renderer-body ] .field-component-card.edit-format").exists();
+			await click("[data-test-format-chooser=\"markdown\"]");
+			assert.dom("[data-test-format-chooser=\"markdown\"]").hasClass("active");
+			assert.dom("[data-test-code-mode-card-renderer-body] .field-component-card.markdown-format").exists();
+			assert.dom("[data-test-card-schema]").doesNotExist();
+		});
+		(0, import_qunit.test)("\"form\" format button appears only for cards with a custom edit template", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}CustomEdit/sample.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			assert.dom("[data-test-format-chooser]").exists({ count: cardDefFormats.length + 1 });
+			assert.dom("[data-test-format-chooser=\"form\"]").exists("\"form\" button appears because CustomEdit defines a custom edit template");
+			assert.dom("[data-test-format-chooser=\"edit\"]").exists("\"edit\" button still present alongside \"form\"");
+			await click("[data-test-format-chooser=\"form\"]");
+			assert.dom("[data-test-format-chooser=\"form\"]").hasClass("active");
+			assert.dom("[data-test-code-mode-card-renderer-body] [data-test-custom-edit]").doesNotExist("base CardDef template is used, not the custom edit template");
+			assert.dom("[data-test-code-mode-card-renderer-body] .field-component-card.edit-format").exists("card renders in edit format");
+			await click("[data-test-format-chooser=\"edit\"]");
+			assert.dom("[data-test-format-chooser=\"edit\"]").hasClass("active");
+			assert.dom("[data-test-code-mode-card-renderer-body] [data-test-custom-edit]").exists("custom edit template is used when \"edit\" is selected");
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			assert.dom("[data-test-format-chooser=\"form\"]").doesNotExist("\"form\" button absent for cards without a custom edit template");
+		});
+		(0, import_qunit.test)("non-card file preview shows \"metadata\" format option and not \"edit\"", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}z01.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			assert.dom("[data-test-format-chooser]").exists({ count: fileDefFormats.length });
+			assert.dom("[data-test-format-chooser=\"metadata\"]").exists();
+			assert.dom("[data-test-format-chooser=\"edit\"]").doesNotExist();
+			assert.dom("[data-test-format-chooser=\"isolated\"]").exists();
+			assert.dom("[data-test-format-chooser=\"embedded\"]").exists();
+			assert.dom("[data-test-format-chooser=\"fitted\"]").exists();
+			assert.dom("[data-test-format-chooser=\"atom\"]").exists();
+			assert.dom("[data-test-format-chooser=\"head\"]").exists();
+			assert.dom("[data-test-format-chooser=\"markdown\"]").exists();
+		});
+		(0, import_qunit.test)("clicking \"metadata\" format for a non-card file shows metadata panel with JSON-API content", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}z01.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			await click("[data-test-format-chooser=\"metadata\"]");
+			assert.dom("[data-test-format-chooser=\"metadata\"]").hasClass("active", "metadata button is active after clicking");
+			await waitFor("[data-test-metadata-panel]");
+			assert.dom("[data-test-metadata-panel]").exists();
+			await waitFor("[data-test-metadata-content]");
+			assert.dom("[data-test-metadata-content]").exists();
+			let content = document.querySelector("[data-test-metadata-content]")?.textContent ?? "";
+			assert.true(content.includes("\"file-meta\""), "metadata content includes \"file-meta\" type");
+			assert.true(content.includes("adoptsFrom"), "metadata content includes adoptsFrom");
+		});
+		(0, import_qunit.test)("switching away from \"metadata\" format hides the metadata panel", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}z01.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			await click("[data-test-format-chooser=\"metadata\"]");
+			await waitFor("[data-test-metadata-panel]");
+			assert.dom("[data-test-metadata-panel]").exists();
+			await click("[data-test-format-chooser=\"isolated\"]");
+			assert.dom("[data-test-metadata-panel]").doesNotExist("metadata panel is hidden after switching formats");
+			assert.dom("[data-test-format-chooser=\"isolated\"]").hasClass("active", "isolated button is active after switching");
+		});
+		(0, import_qunit.test)("format chooser flips to compact mode in a narrow preview panel and restores on widen", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			let chooser = document.querySelector("[data-test-format-chooser-root]");
+			assert.ok(chooser, "format chooser is rendered");
+			assert.dom("[data-test-format-chooser-root]").hasAttribute("data-test-format-chooser-mode", "full", "chooser starts in full icon+text mode");
+			let previewResizeHandle = Array.from(document.querySelectorAll("[data-test-code-mode] .separator-horizontal[data-boxel-panel-resize-handle-id]")).at(-1);
+			assert.ok(previewResizeHandle, "preview panel resize handle exists");
+			let editorPanel = previewResizeHandle.previousElementSibling;
+			let previewPanel = previewResizeHandle.nextElementSibling;
+			assert.dom(editorPanel).hasAttribute("data-boxel-panel-id", /.+/, "the element before the handle is a resizable panel");
+			assert.dom(previewPanel).hasAttribute("data-boxel-panel-id", /.+/, "the element after the handle is a resizable panel");
+			let initialEditorWidth = editorPanel.getBoundingClientRect().width;
+			let initialPreviewWidth = previewPanel.getBoundingClientRect().width;
+			let dragDistance = Math.round(initialPreviewWidth * .75);
+			let shrinkRect = previewResizeHandle.getBoundingClientRect();
+			await triggerEvent(previewResizeHandle, "pointerdown", {
+				button: 0,
+				pointerId: 1,
+				clientX: shrinkRect.x + shrinkRect.width / 2,
+				clientY: shrinkRect.y + shrinkRect.height / 2
+			});
+			await triggerEvent(previewResizeHandle, "pointermove", {
+				pointerId: 1,
+				buttons: 1,
+				clientX: shrinkRect.x + shrinkRect.width / 2 + dragDistance,
+				clientY: shrinkRect.y + shrinkRect.height / 2
+			});
+			await triggerEvent(previewResizeHandle, "pointerup", {
+				pointerId: 1,
+				clientX: shrinkRect.x + shrinkRect.width / 2 + dragDistance,
+				clientY: shrinkRect.y + shrinkRect.height / 2
+			});
+			await waitUntil(() => chooser?.getAttribute("data-test-format-chooser-mode") === "compact");
+			assert.dom("[data-test-format-chooser-root]").hasAttribute("data-test-format-chooser-mode", "compact", "chooser switches to compact icon-only mode");
+			let embeddedButton = document.querySelector("[data-test-format-chooser=\"embedded\"]");
+			assert.ok(embeddedButton, "embedded format button exists");
+			let embeddedRect = embeddedButton.getBoundingClientRect();
+			await triggerEvent(embeddedButton, "mouseenter", {
+				clientX: embeddedRect.x + embeddedRect.width / 2,
+				clientY: embeddedRect.y + embeddedRect.height / 2
+			});
+			await triggerEvent(embeddedButton, "mousemove", {
+				clientX: embeddedRect.x + embeddedRect.width / 2,
+				clientY: embeddedRect.y + embeddedRect.height / 2
+			});
+			await waitFor("[data-test-tooltip-content]");
+			assert.dom("[data-test-tooltip-content]").hasText("embedded", "compact chooser shows an instant hover tooltip");
+			let widenRect = previewResizeHandle.getBoundingClientRect();
+			await triggerEvent(previewResizeHandle, "pointerdown", {
+				button: 0,
+				pointerId: 2,
+				clientX: widenRect.x + widenRect.width / 2,
+				clientY: widenRect.y + widenRect.height / 2
+			});
+			await triggerEvent(previewResizeHandle, "pointermove", {
+				pointerId: 2,
+				buttons: 1,
+				clientX: widenRect.x + widenRect.width / 2 - dragDistance,
+				clientY: widenRect.y + widenRect.height / 2
+			});
+			await triggerEvent(previewResizeHandle, "pointerup", {
+				pointerId: 2,
+				clientX: widenRect.x + widenRect.width / 2 - dragDistance,
+				clientY: widenRect.y + widenRect.height / 2
+			});
+			await waitUntil(() => chooser?.getAttribute("data-test-format-chooser-mode") === "full");
+			await triggerEvent(chooser, "mouseleave");
+			assert.dom("[data-test-format-chooser-root]").hasAttribute("data-test-format-chooser-mode", "full", "chooser returns to full icon+text mode after widening");
+			assert.dom("[data-test-tooltip-content]").doesNotExist("compact tooltip does not stick after widening");
+			assert.dom("[data-test-format-chooser-pill-label]").hasText("isolated", "full chooser label is restored");
+			assert.ok(Math.abs(previewPanel.getBoundingClientRect().width - initialPreviewWidth) <= 1, "preview panel is back to the width it started at");
+			assert.ok(Math.abs(editorPanel.getBoundingClientRect().width - initialEditorWidth) <= 1, "code editor panel is back to the width it started at");
+		});
+		(0, import_qunit.test)("displays clear message when a schema-editor incompatible item is selected within a valid file type", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}employee.gts`
+			});
+			await waitFor("[data-test-loading-indicator]", { count: 0 });
+			await waitFor("[data-test-in-this-file-selector] [data-test-boxel-selector-item-selected]");
+			assert.dom("[data-test-in-this-file-selector] [data-test-boxel-selector-item-selected]").hasText("isHourly function");
+			assert.dom("[data-test-schema-editor-file-incompatibility-message]").hasText(`No tools are available for the selected item: function "isHourly". Select a card or field definition in the inspector.`);
+			await click("[data-test-boxel-selector-item-text=\"Isolated\"]");
+			await waitFor("[data-test-loading-indicator]", { count: 0 });
+			assert.dom("[data-test-in-this-file-selector] [data-test-boxel-selector-item-selected]").hasText("Isolated class");
+			assert.dom("[data-test-schema-editor-file-incompatibility-message]").hasText(`No tools are available for the selected item: class "Isolated". Select a card or field definition in the inspector.`);
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}employee.gts`
+			});
+			await waitFor("[data-test-loading-indicator]", { count: 0 });
+			assert.dom("[data-test-schema-editor-file-incompatibility-message]").exists();
+		});
+		(0, import_qunit.test)("displays clear message on schema-editor when file is completely unsupported", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}hello.txt`
+			});
+			assert.dom("[data-test-code-mode-card-renderer-body]").exists();
+			assert.dom("[data-test-code-mode-card-renderer-header] [data-test-boxel-card-header-title]").includesText("File");
+			assert.dom("[data-test-code-mode-card-renderer-header] [data-test-boxel-card-header-title]").includesText("hello.txt");
+			assert.dom("[data-test-format-chooser=\"edit\"]").doesNotExist();
+			assert.dom("[data-test-code-mode-card-renderer-header] [data-test-edit-button]").doesNotExist();
+			await waitFor("[data-test-definition-file-extension]");
+			assert.dom("[data-test-definition-file-extension]").hasText(".txt");
+		});
+		(0, import_qunit.test)("Clicking card in search panel opens card JSON in editor", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}employee.gts`
+			});
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("prompt");
+			await click("[data-test-open-search-field]");
+			assert.dom("[data-test-search-sheet]").hasClass("prompt");
+			await fillIn("[data-test-search-field]", "Mango");
+			assert.dom("[data-test-search-sheet]").hasClass("results");
+			await waitFor(`[data-test-search-result="${testRealmURL}Pet/mango"]`, { timeout: 2e3 });
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("results");
+			assert.deepEqual(JSON.parse(getMonacoContent()), { data: {
+				attributes: { name: "Mango" },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}pet`,
+					name: "Pet"
+				} }
+			} });
+		});
+		(0, import_qunit.test)("Clicking a search result while the dashboard is open closes the dashboard and shows the file", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}employee.gts`,
+				workspaceChooserOpened: true
+			});
+			assert.dom("[data-test-dashboard]").exists();
+			await click("[data-test-open-search-field]");
+			await fillIn("[data-test-search-field]", "Mango");
+			await waitFor(`[data-test-search-result="${testRealmURL}Pet/mango"]`, { timeout: 2e3 });
+			await click(`[data-test-search-result="${testRealmURL}Pet/mango"]`);
+			assert.dom("[data-test-dashboard]").doesNotExist();
+			await waitFor("[data-test-card-url-bar-input]");
+			assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}Pet/mango.json`);
+		});
+		(0, import_qunit.test)("Clicking a file in search panel opens the file itself (no .json appended)", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}employee.gts`
+			});
+			await click("[data-test-open-search-field]");
+			await fillIn("[data-test-search-field]", "care-guide");
+			await waitFor(`[data-test-search-result="${testRealmURL}care-guide.md"]`, { timeout: 2e3 });
+			await click(`[data-test-search-result="${testRealmURL}care-guide.md"]`);
+			assert.dom("[data-test-search-sheet]").doesNotHaveClass("results");
+			await waitFor("[data-test-card-url-bar-input]");
+			assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}care-guide.md`, "the file opens at its own URL, without a .json extension appended");
+			assert.true(getMonacoContent().includes("Care Guide"), "the markdown file content is loaded in the editor");
+		});
+		(0, import_qunit.test)("clicking a linksTo field in card renderer panel opens the linked card JSON", async function(assert) {
+			let operatorModeStateService = getService("operator-mode-state-service");
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Friend/amy`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Friend/amy.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			assert.dom(`[data-test-card="${testRealmURL}Friend/amy"]`).exists();
+			await waitFor(`[data-test-card="${testRealmURL}Friend/bob"]`);
+			await click(`[data-test-card="${testRealmURL}Friend/bob"]`);
+			await waitUntil(() => operatorModeStateService.state?.codePath?.endsWith("Friend/bob.json"));
+			assert.strictEqual(operatorModeStateService.state?.codePath, `${testRealmURL}Friend/bob.json`);
+			assert.deepEqual(JSON.parse(getMonacoContent()), { data: {
+				attributes: { name: "Bob" },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}friend`,
+					name: "Friend"
+				} },
+				relationships: {}
+			} });
+		});
+		(0, import_qunit.test)("clicking a linksToMany field in card renderer panel opens the linked card JSON", async function(assert) {
+			let operatorModeStateService = getService("operator-mode-state-service");
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/with-friends`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/with-friends.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			assert.dom(`[data-test-card="${testRealmURL}Person/with-friends"]`).exists();
+			await waitFor(`[data-test-card="${testRealmURL}Friend/bob"]`);
+			await click(`[data-test-card="${testRealmURL}Friend/bob"]`);
+			await waitUntil(() => operatorModeStateService.state?.codePath?.endsWith("Friend/bob.json"));
+			assert.strictEqual(operatorModeStateService.state?.codePath, `${testRealmURL}Friend/bob.json`);
+			assert.deepEqual(JSON.parse(getMonacoContent()), { data: {
+				attributes: { name: "Bob" },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}friend`,
+					name: "Friend"
+				} },
+				relationships: {}
+			} });
+		});
+		(0, import_qunit.test)("clicking a linksTo field in playground panel opens the linked card JSON", async function(assert) {
+			let operatorModeStateService = getService("operator-mode-state-service");
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Friend/amy`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}friend.gts`
+			});
+			await click("[data-test-module-inspector-view=\"preview\"]");
+			assert.dom(`[data-test-card="${testRealmURL}Friend/amy"]`).exists();
+			await click(`[data-test-card="${testRealmURL}Friend/bob"]`);
+			await waitUntil(() => operatorModeStateService.state?.codePath?.endsWith("Friend/bob.json"));
+			assert.strictEqual(operatorModeStateService.state?.codePath, `${testRealmURL}Friend/bob.json`);
+			assert.deepEqual(JSON.parse(getMonacoContent()), { data: {
+				attributes: { name: "Bob" },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}friend`,
+					name: "Friend"
+				} },
+				relationships: {}
+			} });
+		});
+		(0, import_qunit.test)("clicking a linksToMany field in playground panel opens the linked card JSON", async function(assert) {
+			let operatorModeStateService = getService("operator-mode-state-service");
+			setPlaygroundSelections({ [`${testRealmURL}person/Person`]: {
+				cardId: rri(`${testRealmURL}Person/with-friends`),
+				format: "isolated"
+			} });
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/with-friends`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}person.gts`
+			});
+			await click("[data-test-module-inspector-view=\"preview\"]");
+			assert.dom(`[data-test-card="${testRealmURL}Person/with-friends"]`).exists();
+			await waitFor(`[data-test-card="${testRealmURL}Friend/amy"]`);
+			await click(`[data-test-card="${testRealmURL}Friend/amy"]`);
+			await waitUntil(() => operatorModeStateService.state?.codePath?.endsWith("Friend/amy.json"));
+			assert.strictEqual(operatorModeStateService.state?.codePath, `${testRealmURL}Friend/amy.json`);
+			assert.deepEqual(JSON.parse(getMonacoContent()), { data: {
+				attributes: { name: "Amy" },
+				meta: { adoptsFrom: {
+					module: `${testRealmURL}friend`,
+					name: "Friend"
+				} },
+				relationships: { friend: { links: { self: `${testRealmURL}Friend/bob` } } }
+			} });
+		});
+		(0, import_qunit.test)("changes cursor position when selected module declaration is changed", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}in-this-file.gts`
+			});
+			await waitFor("[data-test-card-inspector-panel]");
+			await waitFor("[data-test-current-module-name]");
+			await waitFor("[data-test-in-this-file-selector]");
+			let elementName = "default (DefaultClass) class";
+			assert.dom("[data-test-boxel-selector-item]:nth-of-type(11)").hasText(elementName);
+			assert.dom("[data-test-boxel-selector-item-selected]").hasText(elementName);
+			assert.true(monacoService.getLineCursorOn()?.includes("DefaultClass"), "cursor is on DefaultClass line");
+			elementName = "ExportedCard";
+			await click(`[data-test-boxel-selector-item-text="${elementName}"]`);
+			assert.true(monacoService.getLineCursorOn()?.includes(elementName), "cursor is on ExportedCard line");
+			elementName = "ExportedField";
+			await click(`[data-test-boxel-selector-item-text="${elementName}"]`);
+			assert.true(monacoService.getLineCursorOn()?.includes(elementName), "cursor is on ExportedField line");
+			elementName = "exportedFunction";
+			await click(`[data-test-boxel-selector-item-text="${elementName}"]`);
+			assert.true(monacoService.getLineCursorOn()?.includes(elementName), "cursor is on exportedFunction line");
+		});
+		(0, import_qunit.test)("changes selected module declaration when cursor position is changed", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}in-this-file.gts`
+			});
+			await waitFor("[data-test-card-inspector-panel]");
+			await waitFor("[data-test-current-module-name]");
+			await waitFor("[data-test-in-this-file-selector]");
+			let elementName = "default (DefaultClass) class";
+			assert.dom("[data-test-boxel-selector-item]:nth-of-type(11)").hasText(elementName);
+			assert.dom("[data-test-boxel-selector-item-selected]").hasText(elementName);
+			assert.true(monacoService.getLineCursorOn()?.includes("DefaultClass"));
+			elementName = "ExportedFieldInheritLocalField";
+			let position = new Position(45, 0);
+			monacoService.updateCursorPosition(position);
+			await waitFor(`[data-test-boxel-selector-item-selected] [data-test-boxel-selector-item-text="${elementName}"]`);
+			assert.dom("[data-test-boxel-selector-item-selected]").hasText(`${elementName} field def`);
+			elementName = "LocalField";
+			position = new Position(38, 0);
+			monacoService.updateCursorPosition(position);
+			await waitFor(`[data-test-boxel-selector-item-selected] [data-test-boxel-selector-item-text="${elementName}"]`);
+			assert.dom("[data-test-boxel-selector-item-selected]").hasText(`${elementName} field def`);
+			elementName = "ExportedCard";
+			position = new Position(31, 0);
+			monacoService.updateCursorPosition(position);
+			await waitFor(`[data-test-boxel-selector-item-selected] [data-test-boxel-selector-item-text="${elementName}"]`);
+			assert.dom("[data-test-boxel-selector-item-selected]").hasText(`${elementName} card def`);
+		});
+		(0, import_qunit.test)("the monaco cursor position is maintained during an auto-save", async function(assert) {
+			assert.expect(2);
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}in-this-file.gts`
+			});
+			let originalPosition;
+			setMonacoContent(`// This is a change \n${inThisFileSource}`);
+			monacoService.updateCursorPosition(new Position(45, 0));
+			originalPosition = monacoService.getCursorPosition();
+			await waitFor("[data-test-saved]");
+			await waitFor("[data-test-save-idle]");
+			let currentPosition = monacoService.getCursorPosition();
+			assert.strictEqual(originalPosition.lineNumber, currentPosition?.lineNumber, "cursor position line number has not changed");
+			assert.strictEqual(originalPosition.column, currentPosition?.column, "cursor position column has not changed");
+		});
+		(0, import_qunit.test)("cursor is placed at the correct declaration when user opens definition", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}employee.gts`
+			});
+			await waitFor(`[data-boxel-selector-item-text="Employee"]`);
+			await click(`[data-boxel-selector-item-text="Employee"]`);
+			let lineCursorOn = monacoService.getLineCursorOn();
+			assert.true(lineCursorOn?.includes("Employee"), "cursor is at Employee declaration");
+			await click(`[data-test-clickable-definition-container`);
+			await waitFor(`[data-boxel-selector-item-text="Person"]`);
+			await waitUntil(() => monacoService.hasFocus);
+			lineCursorOn = monacoService.getLineCursorOn();
+			assert.true(lineCursorOn?.includes("Person"), "cursor is at Person declaration");
+		});
+		(0, import_qunit.test)("cursor must not be in editor if user focuses on other elements", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}employee.gts`
+			});
+			await waitFor(`[data-boxel-selector-item-text="Employee"]`);
+			await click(`[data-boxel-selector-item-text="Employee"]`);
+			assert.true(monacoService.hasFocus);
+			await fillIn("[data-test-card-url-bar] input", `${testRealmURL}person.gts`);
+			assert.false(monacoService.hasFocus);
+			await triggerKeyEvent("[data-test-card-url-bar-input]", "keypress", "Enter");
+			await waitFor(`[data-boxel-selector-item-text="Person"]`);
+			assert.true(monacoService.hasFocus);
+			await fillIn("[data-test-card-url-bar] input", `${testRealmURL}person.gts-test`);
+			assert.false(monacoService.hasFocus);
+		});
+		(0, import_qunit.test)("scroll position persists when changing card preview format", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}Pet/mango.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			await scrollTo("[data-test-code-mode-card-renderer-body]", 0, 100);
+			await click("[data-test-format-chooser=\"edit\"]");
+			await click("[data-test-format-chooser=\"isolated\"]");
+			let element = document.querySelector("[data-test-code-mode-card-renderer-body]");
+			assert.strictEqual(element.scrollTop, 100, "the scroll position is correct");
+		});
+		(0, import_qunit.skip)("updates values in preview panel must be represented in editor panel", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-code-mode-card-renderer-body]");
+			await click("[data-test-format-chooser=\"edit\"]");
+			await fillIn("[data-test-field=\"lastName\"] input", "Ridhwanallah");
+			await fillIn("[data-test-field=\"streetAddress\"] input", "Unknown Address");
+			await fillIn("[data-test-field=\"city\"] input", "Bandung");
+			await fillIn("[data-test-field=\"fiveDigitPostalCode\"] input", "12345");
+			await fillIn("[data-test-field=\"fourDigitOptional\"] input", "1234");
+			await click("[data-test-links-to-many=\"countriesVisited\"] [data-test-add-new]");
+			await waitFor(`[data-test-item-button="${testRealmURL}Country/united-states"]`);
+			await click(`[data-test-item-button="${testRealmURL}Country/united-states"]`);
+			await click(`[data-test-card-chooser-go-button]`);
+			await waitFor("[data-test-saved]");
+			await waitFor("[data-test-save-idle]");
+			await settled();
+			let content = getMonacoContent();
+			await waitUntil(() => content.includes("Ridhwanallah"));
+			assert.ok(content.includes("Ridhwanallah"), "content includes Ridhwanallah");
+			assert.ok(content.includes("Unknown Address"), "content includes Unknown Address");
+			assert.ok(content.includes("Bandung"), "content includes Bandung");
+			assert.ok(content.includes("12345"), "content includes 12345");
+			assert.ok(content.includes("1234"), "content includes 1234");
+			assert.ok(content.includes(`${testRealmURL}Country/united-states`), "content includes Country/united-states");
+		});
+		(0, import_qunit.test)("monaco editor shows a change made just after the file opens", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitUntil(() => getMonacoContent().includes("Fadhlan"), { timeout: 5e3 });
+			await realm.write("Person/fadhlan.json", JSON.stringify({ data: {
+				type: "card",
+				attributes: { firstName: "FadhlanYYY" },
+				meta: { adoptsFrom: {
+					module: rri("../person"),
+					name: "Person"
+				} }
+			} }));
+			await waitUntil(() => getMonacoContent().includes("FadhlanYYY"), {
+				timeout: 5e3,
+				timeoutMessage: "monaco did not show the change made elsewhere"
+			});
+			assert.strictEqual(JSON.parse(getMonacoContent()).data.attributes.firstName, "FadhlanYYY", "monaco shows the saved document");
+		});
+		(0, import_qunit.test)("monaco editor live updates when index changes", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitUntil(() => getMonacoContent().includes("Fadhlan"), { timeout: 5e3 });
+			await realm.write("Person/fadhlan.json", JSON.stringify({ data: {
+				type: "card",
+				attributes: { firstName: "FadhlanXXX" },
+				meta: { adoptsFrom: {
+					module: rri("../person"),
+					name: "Person"
+				} }
+			} }));
+			try {
+				await waitUntil(() => getMonacoContent().includes("FadhlanXXX"), { timeout: 5e3 });
+			} catch (err) {
+				let monacoContent = getMonacoContent();
+				let sourceProbe;
+				let sourceOk;
+				try {
+					let res = await getService("network").authedFetch(`${testRealmURL}Person/fadhlan.json`, { headers: { Accept: "application/vnd.card+source" } });
+					let body = await res.text();
+					sourceOk = res.ok;
+					sourceProbe = sourceOk ? body : `<source-probe non-ok: ${res.status} ${res.statusText} body=${JSON.stringify(body)}>`;
+				} catch (e) {
+					sourceOk = false;
+					sourceProbe = `<source-probe error: ${e?.message ?? e}>`;
+				}
+				console.warn(`[monaco-live-updates flake-probe] waitUntil timed out. monaco includes "FadhlanXXX"=${monacoContent.includes("FadhlanXXX")}; source fetch ok=${sourceOk}; source on disk includes "FadhlanXXX"=${sourceOk && sourceProbe.includes("FadhlanXXX")}. monaco snapshot: ${JSON.stringify(monacoContent)}. source snapshot: ${JSON.stringify(sourceProbe)}.`);
+				throw err;
+			}
+			assert.true(getMonacoContent().includes("FadhlanXXX"), "monaco editor updated from index event");
+		});
+		(0, import_qunit.test)("code editor shows size limit error when json save exceeds limit", async function(assert) {
+			let environmentService = getService("environment-service");
+			let originalMaxSize = environmentService.cardSizeLimitBytes;
+			try {
+				await visitOperatorMode({
+					submode: "code",
+					codePath: `${testRealmURL}person-entry.json`
+				});
+				await waitFor("[data-test-editor]");
+				let content = getMonacoContent();
+				let currentSize = new TextEncoder().encode(content).length;
+				environmentService.cardSizeLimitBytes = currentSize + 50;
+				let doc = JSON.parse(content);
+				doc.data.attributes = {
+					...doc.data.attributes ?? {},
+					title: "x".repeat(currentSize + 200)
+				};
+				setMonacoContent(JSON.stringify(doc, null, 2));
+				await waitFor("[data-test-save-error]");
+				assert.dom("[data-test-save-error]").includesText(`exceeds maximum allowed size (${environmentService.cardSizeLimitBytes} bytes)`);
+			} finally {
+				environmentService.cardSizeLimitBytes = originalMaxSize;
+			}
+		});
+		(0, import_qunit.test)("card preview live updates when index changes", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			await realm.write("Person/fadhlan.json", JSON.stringify({ data: {
+				type: "card",
+				attributes: { firstName: "FadhlanXXX" },
+				meta: { adoptsFrom: {
+					module: rri("../person"),
+					name: "Person"
+				} }
+			} }));
+			await settled();
+			let previewText = () => document.querySelector("[data-test-code-mode-card-renderer-body]")?.textContent ?? "";
+			if (!previewText().includes("FadhlanXXX")) {
+				let realmEvents = mockMatrixUtils.getRoomIds().flatMap((roomId) => mockMatrixUtils.getRoomEvents(roomId)).filter((event) => event.type === APP_BOXEL_REALM_EVENT_TYPE).slice(-5).map((event) => event.content);
+				let instance = getService("store").peek(`${testRealmURL}Person/fadhlan`);
+				console.warn(`[card-preview-live-updates flake-probe] preview not updated after settled(). store firstName=${JSON.stringify(instance?.firstName)}; preview text=${JSON.stringify(previewText())}; last realm events in mock homeserver=${JSON.stringify(realmEvents)}.`);
+			}
+			assert.dom("[data-test-code-mode-card-renderer-body]").includesText("FadhlanXXX");
+		});
+		(0, import_qunit.test)("card preview live updates when there is a change in module", async function(assert) {
+			const personGts = `
+        import { contains, containsMany, field, linksTo, linksToMany, CardDef, Component } from "@cardstack/base/card-api";
+        import StringField from "@cardstack/base/string";
+        import { Friend } from './friend';
+        import { Pet } from "./pet";
+        import { Address } from './address';
+        import { Trips } from './trips';
+
+        export class Person extends CardDef {
+          static displayName = 'Person';
+          @field firstName = contains(StringField);
+          @field lastName = contains(StringField);
+          @field cardTitle = contains(StringField, {
+            computeVia: function (this: Person) {
+              return [this.firstName, this.lastName].filter(Boolean).join(' ');
+            },
+          });
+          @field pet = linksTo(Pet);
+          @field friends = linksToMany(Friend);
+          @field address = containsMany(StringField);
+          @field addressDetail = contains(Address);
+          @field trips = contains(Trips);
+          static isolated = class Isolated extends Component<typeof this> {
+            <template>
+              <div data-test-person>
+                Hello <@fields.firstName />
+              </div>
+              <style scoped>
+                div {
+                  color: blue;
+                }
+              </style>
+            </template>
+          };
+        };
+      `;
+			const getElementColor = (selector) => {
+				let element = document.querySelector(selector);
+				if (!element) return;
+				return src_default.getComputedStyle(element).color;
+			};
+			await visitOperatorMode({
+				stacks: [],
+				submode: "code",
+				codePath: `${testRealmURL}Person/1.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			assert.dom("[data-test-person]").containsText("First name: Hassan");
+			assert.strictEqual(getElementColor("[data-test-person]"), "rgb(0, 128, 0)");
+			await realm.write("person.gts", personGts);
+			await waitUntil(() => document.querySelector("[data-test-person]")?.textContent?.includes("Hello"), { timeout: 5e3 });
+			assert.dom("[data-test-person]").includesText("Hello Hassan");
+			assert.strictEqual(getElementColor("[data-test-person]"), "rgb(0, 0, 255)");
+			await click("[data-test-file-browser-toggle]");
+			await click("[data-test-file=\"Person/1.json\"]");
+			assert.dom("[data-test-person]").includesText("Hello Hassan");
+			assert.strictEqual(getElementColor("[data-test-person]"), "rgb(0, 0, 255)");
+		});
+		(0, import_qunit.test)("card preview live updates with error", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			assert.dom("[data-test-card-error]").doesNotExist("card error state is not displayed");
+			await realm.write("Person/fadhlan.json", JSON.stringify({ data: {
+				type: "card",
+				meta: { adoptsFrom: {
+					module: rri("../missing-person"),
+					name: "MissingPerson"
+				} }
+			} }));
+			await settled();
+			assert.dom("[data-test-card-error]").exists("card error state is displayed");
+			await realm.write("Person/fadhlan.json", JSON.stringify({ data: {
+				type: "card",
+				meta: { adoptsFrom: {
+					module: rri("../person"),
+					name: "Person"
+				} }
+			} }));
+			await settled();
+			assert.dom("[data-test-card-error]").doesNotExist("card error state is not displayed");
+		});
+		(0, import_qunit.test)("card-chooser does not offer to \"create new card\" when editing linked fields in code mode", async function(assert) {
+			await visitOperatorMode({
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			assert.dom(`[data-test-code-mode-card-renderer-header="${testRealmURL}Person/fadhlan"]`).exists();
+			await click("[data-test-format-chooser=\"edit\"]");
+			await click("[data-test-links-to-editor=\"pet\"] [data-test-remove-card]");
+			await waitFor("[data-test-links-to-editor=\"pet\"] [data-test-add-new]");
+			await click("[data-test-links-to-editor=\"pet\"] [data-test-add-new]");
+			await waitFor("[data-test-card-chooser-modal]");
+			assert.dom("[data-test-card-chooser-modal] [data-test-boxel-header-title]").containsText("Choose a Pet card");
+			assert.dom("[data-test-item-button-create-new]").doesNotExist("can not create new card for linksTo field in code mode");
+			await click("[aria-label=\"close modal\"]");
+			await waitFor("[data-test-card-chooser-modal]", { count: 0 });
+			await click("[data-test-links-to-many=\"friends\"] [data-test-add-new]");
+			await waitFor("[data-test-card-chooser-modal]");
+			assert.dom("[data-test-card-chooser-modal] [data-test-boxel-header-title]").containsText("Select 1 or more Friend cards");
+			assert.dom("[data-test-item-button-create-new]").doesNotExist("can not create new card for linksToMany field in code mode");
+		});
+		(0, import_qunit.test)("closes the top-most modal first when clicking overlay background", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/1`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/1.json`
+			});
+			await waitFor("[data-test-code-mode][data-test-save-idle]");
+			await waitFor("[data-test-new-file-button]");
+			await click("[data-test-new-file-button]");
+			await click(`[data-test-boxel-menu-item-text="Card Instance"]`);
+			await waitFor(`[data-test-create-file-modal][data-test-ready]`);
+			await click("[data-test-select-card-type]");
+			await waitFor("[data-test-card-chooser-modal]");
+			await percySnapshot(assert);
+			let cardChooserModalOverlay = document.querySelector("[data-test-card-chooser-modal]")?.previousElementSibling;
+			assert.dom(cardChooserModalOverlay).exists();
+			await click(cardChooserModalOverlay);
+			assert.dom("[data-test-card-chooser-modal]").doesNotExist();
+			let createFileModalOverlay = document.querySelector("[data-test-create-file-modal]")?.previousElementSibling;
+			assert.dom(createFileModalOverlay).exists();
+			await click(createFileModalOverlay);
+			assert.dom("[data-test-create-file-modal]").doesNotExist();
+		});
+		(0, import_qunit.test)("restores and remembers module inspector view from operator mode state", async function(assert) {
+			await visitOperatorMode({
+				stacks: [],
+				submode: "code",
+				codePath: `${testRealmURL}pet.gts`,
+				moduleInspector: "preview"
+			});
+			assert.dom("[data-test-active-module-inspector-view=\"preview\"]").exists();
+			assert.strictEqual(src_default.localStorage.getItem(ModuleInspectorSelections), JSON.stringify({ [`${testRealmURL}pet.gts`]: "preview" }));
+		});
+		(0, import_qunit.test)("remembers open module inspector panel via local storage", async function(assert) {
+			let accordionSelections = {
+				[`${testRealmURL}address.gts`]: "spec",
+				[`${testRealmURL}country.gts`]: null,
+				[`${testRealmURL}person.gts`]: "schema",
+				[`${testRealmURL}pet-person.gts`]: "preview"
+			};
+			src_default.localStorage.setItem(ModuleInspectorSelections, JSON.stringify(accordionSelections));
+			await visitOperatorMode({
+				stacks: [],
+				submode: "code",
+				codePath: `${testRealmURL}pet.gts`
+			});
+			assert.dom("[data-test-active-module-inspector-view=\"schema\"]").exists("defaults to schema-editor view");
+			await click("[data-test-module-inspector-view=\"preview\"]");
+			assert.dom("[data-test-active-module-inspector-view=\"preview\"]").exists();
+			await click("[data-test-file-browser-toggle]");
+			await click("[data-test-file=\"address.gts\"]");
+			assert.dom("[data-test-active-module-inspector-view=\"spec\"]").exists();
+			await click("[data-test-file=\"country.gts\"]");
+			assert.dom("[data-test-module-inspector=\"card-or-field\"]").exists();
+			assert.dom("[data-test-active-module-inspector-view=\"schema\"]").exists();
+			await click("[data-test-file=\"person.gts\"]");
+			assert.dom("[data-test-active-module-inspector-view=\"schema\"]").exists();
+			await click("[data-test-file=\"pet-person.gts\"]");
+			assert.dom("[data-test-active-module-inspector-view=\"preview\"]").exists();
+			await click("[data-test-module-inspector-view=\"spec\"]");
+			assert.dom("[data-test-active-module-inspector-view=\"spec\"]").exists();
+			let currentSelections = src_default.localStorage.getItem(ModuleInspectorSelections);
+			assert.strictEqual(currentSelections, JSON.stringify({
+				[`${testRealmURL}address.gts`]: "spec",
+				[`${testRealmURL}country.gts`]: "schema",
+				[`${testRealmURL}person.gts`]: "schema",
+				[`${testRealmURL}pet-person.gts`]: "spec",
+				[`${testRealmURL}pet.gts`]: "preview"
+			}));
+		});
+		(0, import_qunit.test)("module inspector query parameter takes precendence over local storage when loading", async function(assert) {
+			src_default.localStorage.setItem(ModuleInspectorSelections, JSON.stringify({ [`${testRealmURL}address.gts`]: "spec" }));
+			await visitOperatorMode({
+				stacks: [],
+				submode: "code",
+				codePath: `${testRealmURL}address.gts`,
+				moduleInspector: "preview"
+			});
+			assert.dom("[data-test-active-module-inspector-view=\"preview\"]").exists();
+		});
+		(0, import_qunit.test)("Open in Interact and Edit Template buttons work correctly", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}Person/fadhlan`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}Person/fadhlan.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			assert.dom("[data-test-edit-template-button]").exists("Edit Template button is rendered");
+			assert.dom("[data-test-open-in-interact-button]").exists("Open in Interact button is rendered");
+			assert.dom(".preview-text").hasText("Preview", "Preview text is displayed");
+			await click("[data-test-open-in-interact-button]");
+			await waitFor("[data-test-interact-submode]");
+			assert.dom("[data-test-interact-submode]").exists("Switched to interact mode");
+			assert.dom("[data-test-person]").includesText("Fadhlan");
+			await click("[data-test-submode-switcher] button");
+			await click("[data-test-boxel-menu-item-text=\"Code\"]");
+			await waitFor("[data-test-code-submode]");
+			await click("[data-test-edit-template-button]");
+			await waitFor("[data-test-card-url-bar-input]");
+			assert.dom("[data-test-card-url-bar-input]").hasValue(`${testRealmURL}person.gts`);
+		});
+		(0, import_qunit.test)("Edit Template opens the source of a card whose type lives in a mapped realm", async function(assert) {
+			await visitOperatorMode({
+				stacks: [[{
+					id: `${testRealmURL}person-entry`,
+					format: "isolated"
+				}]],
+				submode: "code",
+				codePath: `${testRealmURL}person-entry.json`
+			});
+			await waitFor("[data-test-card-resource-loaded]");
+			await click("[data-test-edit-template-button]");
+			await waitFor("[data-test-card-url-bar-input]");
+			assert.dom("[data-test-card-url-bar-input]").hasValue(baseRRI("spec.gts"), "the base realm's spec source opened, shown in its prefix form");
+		});
+	});
+});
+//#endregion