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

package/bundled-test-harness/assets/computed-test-DtyZGgdc.js

@@ -0,0 +1,1320 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
+import { G as realmURL, H as meta, x as PermissionsContextName } from "./constants-Icc0nFW-.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import "./template-factory-ds9s0u8l.js";
+import { T as settled, d as click } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, nt as provide, p as cleanWhiteSpace, t as setupMockMatrix } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { A as field, H as linksTo, T as containsMany, U as linksToMany, a as CardDef, l as FieldDef, o as CardInfoField, s as Component, w as contains, y as Theme } from "./card-api-Cc8uZunB.js";
+import { t as string_default } from "./string-5IAMEUit.js";
+import { t as NumberField } from "./number-BYHu62Pt.js";
+import { t as renderCard } from "./render-component-B15Z0e2v.js";
+//#region tests/integration/components/computed-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var loader;
+(0, import_qunit.module)("Integration | computeds", function(hooks) {
+	setupRenderingTest(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks);
+	hooks.beforeEach(function() {
+		provide(PermissionsContextName, {
+			canWrite: true,
+			canRead: true
+		});
+		loader = getService("loader-service").loader;
+	});
+	setupLocalIndexing(hooks);
+	setupCardLogs(hooks, async () => await loader.import("@cardstack/base/card-api"));
+	(0, import_qunit.test)("can render a synchronous computed field", async function(assert) {
+		class Person extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "lastName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#lastName = (initializeDeferredDecorator(this, "lastName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "fullName", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return `${this.firstName} ${this.lastName}`;
+					} });
+				});
+			}
+			#fullName = (initializeDeferredDecorator(this, "fullName"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "ll4X47Xd",
+						"block": "[[[8,[30,1,[\"fullName\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let mango = new Person({
+			firstName: "Mango",
+			lastName: "Abdel-Rahman"
+		});
+		let root = await renderCard(loader, mango, "isolated");
+		assert.strictEqual(root.textContent.trim(), "Mango Abdel-Rahman");
+	});
+	(0, import_qunit.test)("can render a computed that consumes a nested property", async function(assert) {
+		class Person extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+		}
+		class Post extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "author", [field], function() {
+					return contains(Person);
+				});
+			}
+			#author = (initializeDeferredDecorator(this, "author"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "summary", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return `${this.cardTitle} by ${this.author.firstName}`;
+					} });
+				});
+			}
+			#summary = (initializeDeferredDecorator(this, "summary"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+vgWKVat",
+						"block": "[[[8,[30,1,[\"summary\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Post,
+				Person
+			} }
+		});
+		let firstPost = new Post({
+			cardTitle: "First Post",
+			author: new Person({ firstName: "Mango" })
+		});
+		let root = await renderCard(loader, firstPost, "isolated");
+		assert.strictEqual(root.textContent.trim(), "First Post by Mango");
+	});
+	(0, import_qunit.test)("can render a computed that is a composite type", async function(assert) {
+		class Person extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+rKkYlPv",
+						"block": "[[[10,1],[14,\"data-test\",\"firstName\"],[12],[8,[30,1,[\"firstName\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Post extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "author", [field], function() {
+					return contains(Person, { computeVia: function() {
+						let person = new Person();
+						person.firstName = "Mango";
+						return person;
+					} });
+				});
+			}
+			#author = (initializeDeferredDecorator(this, "author"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+tyBYqcK",
+						"block": "[[[10,0],[14,\"data-test\",\"title\"],[12],[8,[30,1,[\"cardTitle\"]],null,null,null],[13],[1,\"\\nby\\n\"],[8,[30,1,[\"author\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let firstPost = new Post({ cardTitle: "First Post" });
+		await renderCard(loader, firstPost, "isolated");
+		assert.dom("[data-test=\"title\"]").hasText("First Post");
+		assert.dom("[data-test=\"firstName\"]").hasText("Mango");
+	});
+	(0, import_qunit.test)("can render a containsMany computed primitive field", async function(assert) {
+		class Person extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "languagesSpoken", [field], function() {
+					return containsMany(string_default);
+				});
+			}
+			#languagesSpoken = (initializeDeferredDecorator(this, "languagesSpoken"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "reverseLanguagesSpoken", [field], function() {
+					return containsMany(string_default, { computeVia: function() {
+						return [...this.languagesSpoken].reverse();
+					} });
+				});
+			}
+			#reverseLanguagesSpoken = (initializeDeferredDecorator(this, "reverseLanguagesSpoken"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "aoh9MFS1",
+						"block": "[[[8,[30,1,[\"firstName\"]],null,null,null],[1,\" speaks \"],[8,[30,1,[\"reverseLanguagesSpoken\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let mango = new Person({
+			firstName: "Mango",
+			languagesSpoken: ["japanese", "english"]
+		});
+		let root = await renderCard(loader, mango, "isolated");
+		assert.strictEqual(cleanWhiteSpace(root.textContent), "Mango speaks english japanese");
+	});
+	(0, import_qunit.test)("supports an empty containsMany computed primitive field", async function(assert) {
+		class Person extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "languagesSpoken", [field], function() {
+					return containsMany(string_default);
+				});
+			}
+			#languagesSpoken = (initializeDeferredDecorator(this, "languagesSpoken"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "reverseLanguagesSpoken", [field], function() {
+					return containsMany(string_default, { computeVia: function() {
+						return [...this.languagesSpoken].reverse();
+					} });
+				});
+			}
+			#reverseLanguagesSpoken = (initializeDeferredDecorator(this, "reverseLanguagesSpoken"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "aoh9MFS1",
+						"block": "[[[8,[30,1,[\"firstName\"]],null,null,null],[1,\" speaks \"],[8,[30,1,[\"reverseLanguagesSpoken\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let mango = new Person({ firstName: "Mango" });
+		await renderCard(loader, mango, "isolated");
+		assert.deepEqual(mango.reverseLanguagesSpoken, [], "empty containsMany field is initialized to an empty array");
+	});
+	(0, import_qunit.test)("can render a containsMany computed composite field", async function(assert) {
+		class Person extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "ScySg9U/",
+						"block": "[[[10,0],[14,\"data-test-firstName\",\"\"],[12],[8,[30,1,[\"firstName\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Family extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "people", [field], function() {
+					return containsMany(Person);
+				});
+			}
+			#people = (initializeDeferredDecorator(this, "people"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "reversePeople", [field], function() {
+					return containsMany(Person, { computeVia: function() {
+						return [...this.people].reverse();
+					} });
+				});
+			}
+			#reversePeople = (initializeDeferredDecorator(this, "reversePeople"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "YJv9F1rJ",
+						"block": "[[[8,[30,1,[\"reversePeople\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Family,
+				Person
+			} }
+		});
+		let abdelRahmans = new Family({ people: [
+			new Person({ firstName: "Mango" }),
+			new Person({ firstName: "Van Gogh" }),
+			new Person({ firstName: "Hassan" }),
+			new Person({ firstName: "Mariko" }),
+			new Person({ firstName: "Yume" }),
+			new Person({ firstName: "Sakura" })
+		] });
+		await renderCard(loader, abdelRahmans, "isolated");
+		assert.deepEqual([...this.element.querySelectorAll("[data-test-firstName]")].map((element) => element.textContent?.trim()), [
+			"Sakura",
+			"Yume",
+			"Mariko",
+			"Hassan",
+			"Van Gogh",
+			"Mango"
+		]);
+		await renderCard(loader, abdelRahmans, "edit");
+		assert.dom("[data-test-contains-many=\"people\"] [data-test-remove]").exists({ count: 6 });
+		assert.dom("[data-test-contains-many=\"slowPeople\"] [data-test-remove]").doesNotExist();
+	});
+	(0, import_qunit.test)("supports an empty containsMany computed composite field", async function(assert) {
+		class Person extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "DuYn1FyS",
+						"block": "[[[8,[30,1,[\"firstName\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Family extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "people", [field], function() {
+					return containsMany(Person);
+				});
+			}
+			#people = (initializeDeferredDecorator(this, "people"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "reversePeople", [field], function() {
+					return containsMany(Person, { computeVia: function() {
+						return [...this.people].reverse();
+					} });
+				});
+			}
+			#reversePeople = (initializeDeferredDecorator(this, "reversePeople"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "YJv9F1rJ",
+						"block": "[[[8,[30,1,[\"reversePeople\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let abdelRahmans = new Family();
+		await renderCard(loader, abdelRahmans, "isolated");
+		assert.deepEqual(abdelRahmans.reversePeople, [], "empty containsMany field is initialized to an empty array");
+	});
+	(0, import_qunit.test)("can recompute containsMany field", async function(assert) {
+		class Person extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "age", [field], function() {
+					return contains(NumberField);
+				});
+			}
+			#age = (initializeDeferredDecorator(this, "age"), void 0);
+		}
+		class Family extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "people", [field], function() {
+					return containsMany(Person);
+				});
+			}
+			#people = (initializeDeferredDecorator(this, "people"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "totalAge", [field], function() {
+					return contains(NumberField, { computeVia: function() {
+						return this.people.reduce((sum, person) => sum += person.age, 0);
+					} });
+				});
+			}
+			#totalAge = (initializeDeferredDecorator(this, "totalAge"), void 0);
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Family,
+				Person
+			} }
+		});
+		let family = new Family({ people: [new Person({
+			firstName: "Mango",
+			age: 3
+		}), new Person({
+			firstName: "Van Gogh",
+			age: 6
+		})] });
+		assert.strictEqual(family.totalAge, 9, "computed is correct");
+		family.people[0].age = 4;
+		family.people = [...family.people];
+		assert.strictEqual(family.totalAge, 10, "computed is correct");
+	});
+	(0, import_qunit.test)("computed fields render as embedded format in the edit format", async function(assert) {
+		class Person extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "alias", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this.firstName;
+					} });
+				});
+			}
+			#alias = (initializeDeferredDecorator(this, "alias"), void 0);
+		}
+		let person = new Person({ firstName: "Mango" });
+		await renderCard(loader, person, "edit");
+		assert.dom("[data-test-field=alias] input").doesNotExist();
+		assert.dom("[data-test-field=alias]").hasText("Alias Mango");
+	});
+	(0, import_qunit.test)("can render a computed linksTo relationship", async function(assert) {
+		class Pet extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "mZOA4Bdz",
+						"block": "[[[10,1],[14,\"data-test\",\"name\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Person extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "bestFriend", [field], function() {
+					return linksTo(Pet);
+				});
+			}
+			#bestFriend = (initializeDeferredDecorator(this, "bestFriend"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "78F5O7Os",
+						"block": "[[[10,1],[14,\"data-test\",\"firstName\"],[12],[8,[30,1,[\"firstName\"]],null,null,null],[13],[1,\"\\n\"],[10,1],[14,\"data-test\",\"bestFriend\"],[12],[8,[30,1,[\"bestFriend\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Post extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "author", [field], function() {
+					return contains(Person);
+				});
+			}
+			#author = (initializeDeferredDecorator(this, "author"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "friend", [field], function() {
+					return linksTo(Pet, { computeVia: function() {
+						return this.author.bestFriend;
+					} });
+				});
+			}
+			#friend = (initializeDeferredDecorator(this, "friend"), void 0);
+		}
+		let firstPost = new Post({
+			cardTitle: "First Post",
+			author: new Person({
+				firstName: "Mango",
+				bestFriend: new Pet({ name: "Van Gogh" })
+			})
+		});
+		await renderCard(loader, firstPost, "isolated");
+		assert.dom("[data-test-field=\"cardInfo-name\"]").hasText("First Post");
+		assert.dom("[data-test-field=\"author\"] [data-test=\"firstName\"]").hasText("Mango");
+		assert.dom("[data-test-field=\"friend\"] [data-test=\"name\"]").hasText("Van Gogh");
+		await renderCard(loader, firstPost, "edit");
+		assert.dom("[data-test-field=\"bestFriend\"] [data-test-links-to-editor=\"bestFriend\"]").exists();
+		assert.dom("[data-test-field=\"friend\"] [data-test-links-to-editor=\"friend\"]").doesNotExist();
+	});
+	(0, import_qunit.test)("can render a computed linksToMany relationship", async function(assert) {
+		class Pet extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "mZOA4Bdz",
+						"block": "[[[10,1],[14,\"data-test\",\"name\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Person extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "pets", [field], function() {
+					return linksToMany(Pet);
+				});
+			}
+			#pets = (initializeDeferredDecorator(this, "pets"), void 0);
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "+rKkYlPv",
+						"block": "[[[10,1],[14,\"data-test\",\"firstName\"],[12],[8,[30,1,[\"firstName\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Post extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "author", [field], function() {
+					return linksTo(Person);
+				});
+			}
+			#author = (initializeDeferredDecorator(this, "author"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "factCheckers", [field], function() {
+					return linksToMany(Pet);
+				});
+			}
+			#factCheckers = (initializeDeferredDecorator(this, "factCheckers"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "collaborators", [field], function() {
+					return linksToMany(Pet, { computeVia() {
+						return [this.author.pets.find((p) => p.name === "Mango"), ...this.factCheckers];
+					} });
+				});
+			}
+			#collaborators = (initializeDeferredDecorator(this, "collaborators"), void 0);
+		}
+		let p1 = new Pet({
+			id: `${testRealmURL}mango`,
+			name: "Mango"
+		});
+		let p2 = new Pet({ name: "Tango" });
+		let f1 = new Pet({ name: "A" });
+		let f2 = new Pet({ name: "B" });
+		let f3 = new Pet({ name: "C" });
+		let firstPost = new Post({
+			cardTitle: "First Post",
+			author: new Person({
+				firstName: "Van Gogh",
+				pets: [p1, p2]
+			}),
+			factCheckers: [
+				f1,
+				f2,
+				f3
+			]
+		});
+		await renderCard(loader, firstPost, "isolated");
+		assert.dom("[data-test-field=\"cardInfo-name\"]").hasText("First Post");
+		assert.dom("[data-test-field=\"author\"] [data-test=\"firstName\"]").hasText("Van Gogh");
+		assert.deepEqual([...this.element.querySelectorAll("[data-test-field=\"collaborators\"] [data-test=\"name\"]")].map((element) => element.textContent?.trim()), [
+			"Mango",
+			"A",
+			"B",
+			"C"
+		]);
+		await renderCard(loader, firstPost, "edit");
+		assert.dom("[data-test-links-to-many=\"factCheckers\"] [data-test-remove-card]").exists({ count: 3 });
+		assert.dom("[data-test-links-to-many=\"collaborators\"] [data-test-remove-card]").doesNotExist();
+	});
+	(0, import_qunit.test)("computed field invalidates when contained card property changes at runtime", async function(assert) {
+		class Author extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "lastName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#lastName = (initializeDeferredDecorator(this, "lastName"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "XjBibA9l",
+						"block": "[[[10,1],[14,\"data-test-author-name\",\"\"],[12],[8,[30,1,[\"firstName\"]],null,null,null],[1,\"\\n  \"],[8,[30,1,[\"lastName\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Post extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "author", [field], function() {
+					return contains(Author);
+				});
+			}
+			#author = (initializeDeferredDecorator(this, "author"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "summary", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return `${this.cardTitle} by ${this.author.firstName} ${this.author.lastName}`;
+					} });
+				});
+			}
+			#summary = (initializeDeferredDecorator(this, "summary"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "1lvKL+RG",
+						"block": "[[[10,0],[14,\"data-test-summary\",\"\"],[12],[8,[30,1,[\"summary\"]],null,null,null],[13],[1,\"\\n\"],[10,0],[14,\"data-test-author\",\"\"],[12],[8,[30,1,[\"author\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Post,
+				Author
+			} }
+		});
+		let author = new Author({
+			firstName: "John",
+			lastName: "Doe"
+		});
+		let post = new Post({
+			cardTitle: "My First Post",
+			author
+		});
+		await renderCard(loader, post, "isolated");
+		assert.dom("[data-test-summary]").hasText("My First Post by John Doe");
+		assert.dom("[data-test-author-name]").hasText("John Doe");
+		author.firstName = "Jane";
+		await settled();
+		assert.dom("[data-test-summary]").hasText("My First Post by Jane Doe");
+		assert.dom("[data-test-author-name]").hasText("Jane Doe");
+	});
+	(0, import_qunit.test)("computed field re-renders when containsMany property changes at runtime", async function(assert) {
+		class Tag extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "X6H85KaG",
+						"block": "[[[10,1],[14,\"data-test-tag-name\",\"\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Article extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "tags", [field], function() {
+					return containsMany(Tag);
+				});
+			}
+			#tags = (initializeDeferredDecorator(this, "tags"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "tagSummary", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						if (this.tags.length === 0) return `${this.cardTitle} (no tags)`;
+						let tagNames = this.tags.map((tag) => tag.name).join(", ");
+						return `${this.cardTitle} [${tagNames}]`;
+					} });
+				});
+			}
+			#tagSummary = (initializeDeferredDecorator(this, "tagSummary"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "WzBesiex",
+						"block": "[[[10,0],[14,\"data-test-tag-summary\",\"\"],[12],[8,[30,1,[\"tagSummary\"]],null,null,null],[13],[1,\"\\n\"],[10,0],[14,\"data-test-tags\",\"\"],[12],[8,[30,1,[\"tags\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Article,
+				Tag
+			} }
+		});
+		let tag1 = new Tag({ name: "tech" });
+		let article = new Article({
+			cardTitle: "My Article",
+			tags: [tag1, new Tag({ name: "web" })]
+		});
+		await renderCard(loader, article, "isolated");
+		assert.dom("[data-test-tag-summary]").hasText("My Article [tech, web]");
+		assert.dom("[data-test-tags] [data-test-tag-name]").exists({ count: 2 });
+		tag1.name = "technology";
+		await settled();
+		assert.dom("[data-test-tag-summary]").hasText("My Article [technology, web]");
+		assert.dom("[data-test-tags] [data-test-tag-name]").exists({ count: 2 });
+		let tag3 = new Tag({ name: "javascript" });
+		article.tags.push(tag3);
+		await settled();
+		assert.dom("[data-test-tag-summary]").hasText("My Article [technology, web, javascript]");
+		assert.dom("[data-test-tags] [data-test-tag-name]").exists({ count: 3 });
+	});
+	(0, import_qunit.test)("computed field re-renders when linksToMany property changes at runtime", async function(assert) {
+		class Category extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static fitted = class Fitted extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "71ejmO9D",
+						"block": "[[[10,1],[14,\"data-test-category-name\",\"\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Blog extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "categories", [field], function() {
+					return linksToMany(Category);
+				});
+			}
+			#categories = (initializeDeferredDecorator(this, "categories"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "categorySummary", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						if (this.categories.length === 0) return `${this.cardTitle} (no categories)`;
+						let categoryNames = this.categories.map((cat) => cat.name).join(", ");
+						return `${this.cardTitle} [${categoryNames}]`;
+					} });
+				});
+			}
+			#categorySummary = (initializeDeferredDecorator(this, "categorySummary"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "Ng5Tho2W",
+						"block": "[[[10,0],[14,\"data-test-category-summary\",\"\"],[12],[8,[30,1,[\"categorySummary\"]],null,null,null],[13],[1,\"\\n\"],[10,0],[14,\"data-test-categories\",\"\"],[12],[8,[30,1,[\"categories\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Blog,
+				Category
+			} }
+		});
+		let cat1 = new Category({ name: "programming" });
+		let blog = new Blog({
+			cardTitle: "My Blog",
+			categories: [cat1, new Category({ name: "design" })]
+		});
+		await renderCard(loader, blog, "isolated");
+		assert.dom("[data-test-category-summary]").hasText("My Blog [programming, design]");
+		assert.dom("[data-test-categories] [data-test-category-name]").exists({ count: 2 });
+		cat1.name = "software-engineering";
+		await settled();
+		assert.dom("[data-test-category-summary]").hasText("My Blog [software-engineering, design]");
+		assert.dom("[data-test-categories] [data-test-category-name]").exists({ count: 2 });
+		let cat3 = new Category({ name: "tutorials" });
+		blog.categories.push(cat3);
+		await settled();
+		assert.dom("[data-test-category-summary]").hasText("My Blog [software-engineering, design, tutorials]");
+		assert.dom("[data-test-categories] [data-test-category-name]").exists({ count: 3 });
+	});
+	(0, import_qunit.test)("a computed read several times in one render runs its computeVia once per data change", async function(assert) {
+		let totalCalls = 0;
+		class Ledger extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "amounts", [field], function() {
+					return containsMany(NumberField);
+				});
+			}
+			#amounts = (initializeDeferredDecorator(this, "amounts"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "total", [field], function() {
+					return contains(NumberField, { computeVia: function() {
+						totalCalls++;
+						return this.amounts.reduce((sum, amount) => sum + amount, 0);
+					} });
+				});
+			}
+			#total = (initializeDeferredDecorator(this, "total"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "doubled", [field], function() {
+					return contains(NumberField, { computeVia: function() {
+						return this.total + this.total;
+					} });
+				});
+			}
+			#doubled = (initializeDeferredDecorator(this, "doubled"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "summary", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return `${this.total} (${this.doubled})`;
+					} });
+				});
+			}
+			#summary = (initializeDeferredDecorator(this, "summary"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "DtYyia3Z",
+						"block": "[[[10,0],[14,\"data-test-total\",\"\"],[12],[8,[30,1,[\"total\"]],null,null,null],[13],[1,\"\\n\"],[10,0],[14,\"data-test-total-again\",\"\"],[12],[1,[30,2,[\"total\"]]],[13],[1,\"\\n\"],[10,0],[14,\"data-test-doubled\",\"\"],[12],[8,[30,1,[\"doubled\"]],null,null,null],[13],[1,\"\\n\"],[10,0],[14,\"data-test-summary\",\"\"],[12],[8,[30,1,[\"summary\"]],null,null,null],[13]],[\"@fields\",\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": { Ledger } }
+		});
+		let ledger = new Ledger({ amounts: [1, 2] });
+		await renderCard(loader, ledger, "isolated");
+		assert.dom("[data-test-total]").hasText("3");
+		assert.dom("[data-test-total-again]").hasText("3");
+		assert.dom("[data-test-doubled]").hasText("6");
+		assert.dom("[data-test-summary]").hasText("3 (6)");
+		assert.strictEqual(totalCalls, 1, "the render evaluates the computed once, however many reads reach it");
+		ledger.amounts = [
+			1,
+			2,
+			4
+		];
+		await settled();
+		assert.dom("[data-test-total]").hasText("7");
+		assert.dom("[data-test-total-again]").hasText("7");
+		assert.dom("[data-test-doubled]").hasText("14");
+		assert.dom("[data-test-summary]").hasText("7 (14)");
+		assert.strictEqual(totalCalls, 2, "the re-render after one data change evaluates the computed once more");
+	});
+	(0, import_qunit.test)("iterating a computed containsMany in a render runs its computeVia once", async function(assert) {
+		let daysCalls = 0;
+		class Day extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "label", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#label = (initializeDeferredDecorator(this, "label"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "minutes", [field], function() {
+					return contains(NumberField);
+				});
+			}
+			#minutes = (initializeDeferredDecorator(this, "minutes"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "r63QN/Or",
+						"block": "[[[10,1],[14,\"data-test-day\",\"\"],[12],[8,[30,1,[\"label\"]],null,null,null],[1,\" \"],[8,[30,1,[\"minutes\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Timesheet extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "minutesByDay", [field], function() {
+					return containsMany(NumberField);
+				});
+			}
+			#minutesByDay = (initializeDeferredDecorator(this, "minutesByDay"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "days", [field], function() {
+					return containsMany(Day, { computeVia: function() {
+						daysCalls++;
+						return this.minutesByDay.map((minutes, index) => new Day({
+							label: `Day ${index + 1}`,
+							minutes
+						}));
+					} });
+				});
+			}
+			#days = (initializeDeferredDecorator(this, "days"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "totalMinutes", [field], function() {
+					return contains(NumberField, { computeVia: function() {
+						return this.days.reduce((sum, day) => sum + day.minutes, 0);
+					} });
+				});
+			}
+			#totalMinutes = (initializeDeferredDecorator(this, "totalMinutes"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "naF5uFPA",
+						"block": "[[[10,0],[14,\"data-test-days\",\"\"],[12],[8,[30,1,[\"days\"]],null,null,null],[13],[1,\"\\n\"],[10,\"ul\"],[12],[1,\"\\n\"],[42,[28,[31,1],[[28,[31,1],[[30,1,[\"days\"]]],null]],null],null,[[[1,\"    \"],[10,\"li\"],[14,\"data-test-each-day\",\"\"],[12],[8,[30,2],null,null,null],[13],[1,\"\\n\"]],[2]],null],[13],[1,\"\\n\"],[10,0],[14,\"data-test-total-minutes\",\"\"],[12],[8,[30,1,[\"totalMinutes\"]],null,null,null],[13]],[\"@fields\",\"Day\"],[\"each\",\"-track-array\"]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Timesheet,
+				Day
+			} }
+		});
+		let timesheet = new Timesheet({ minutesByDay: [
+			480,
+			450,
+			510,
+			300
+		] });
+		await renderCard(loader, timesheet, "isolated");
+		assert.dom("[data-test-days] [data-test-day]").exists({ count: 4 });
+		assert.dom("[data-test-each-day]").exists({ count: 4 });
+		assert.dom("[data-test-total-minutes]").hasText("1740");
+		assert.strictEqual(daysCalls, 1, "every row, the iteration and the derived total share one evaluation");
+	});
+	(0, import_qunit.test)("iterating a computed containsMany on a store-loaded card runs its computeVia once per render", async function(assert) {
+		let daysCalls = 0;
+		class Day extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "label", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#label = (initializeDeferredDecorator(this, "label"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "minutes", [field], function() {
+					return contains(NumberField);
+				});
+			}
+			#minutes = (initializeDeferredDecorator(this, "minutes"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "r63QN/Or",
+						"block": "[[[10,1],[14,\"data-test-day\",\"\"],[12],[8,[30,1,[\"label\"]],null,null,null],[1,\" \"],[8,[30,1,[\"minutes\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class Timesheet extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "minutesByDay", [field], function() {
+					return containsMany(NumberField);
+				});
+			}
+			#minutesByDay = (initializeDeferredDecorator(this, "minutesByDay"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "days", [field], function() {
+					return containsMany(Day, { computeVia: function() {
+						daysCalls++;
+						return this.minutesByDay.map((minutes, index) => new Day({
+							label: `Day ${index + 1}`,
+							minutes
+						}));
+					} });
+				});
+			}
+			#days = (initializeDeferredDecorator(this, "days"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "totalMinutes", [field], function() {
+					return contains(NumberField, { computeVia: function() {
+						return this.days.reduce((sum, day) => sum + day.minutes, 0);
+					} });
+				});
+			}
+			#totalMinutes = (initializeDeferredDecorator(this, "totalMinutes"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "naF5uFPA",
+						"block": "[[[10,0],[14,\"data-test-days\",\"\"],[12],[8,[30,1,[\"days\"]],null,null,null],[13],[1,\"\\n\"],[10,\"ul\"],[12],[1,\"\\n\"],[42,[28,[31,1],[[28,[31,1],[[30,1,[\"days\"]]],null]],null],null,[[[1,\"    \"],[10,\"li\"],[14,\"data-test-each-day\",\"\"],[12],[8,[30,2],null,null,null],[13],[1,\"\\n\"]],[2]],null],[13],[1,\"\\n\"],[10,0],[14,\"data-test-total-minutes\",\"\"],[12],[8,[30,1,[\"totalMinutes\"]],null,null,null],[13]],[\"@fields\",\"Day\"],[\"each\",\"-track-array\"]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"test-cards.gts": {
+					Timesheet,
+					Day
+				},
+				"Timesheet/week.json": { data: {
+					type: "card",
+					attributes: { minutesByDay: [
+						480,
+						450,
+						510,
+						300
+					] },
+					meta: { adoptsFrom: {
+						module: `${testRealmURL}test-cards`,
+						name: "Timesheet"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let timesheet = await store.get(`${testRealmURL}Timesheet/week`);
+		await store.loaded();
+		assert.ok(timesheet[meta]?.realmURL, "the instance carries the realm meta a served card has");
+		daysCalls = 0;
+		await renderCard(loader, timesheet, "isolated");
+		assert.dom("[data-test-days] [data-test-day]").exists({ count: 4 });
+		assert.dom("[data-test-each-day]").exists({ count: 4 });
+		assert.dom("[data-test-total-minutes]").hasText("1740");
+		assert.strictEqual(daysCalls, 1, "every row, the iteration and the derived total share one evaluation");
+	});
+	(0, import_qunit.test)("every place that reads a memoized computed re-renders when its dependency changes", async function(assert) {
+		class Author extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "firstName", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#firstName = (initializeDeferredDecorator(this, "firstName"), void 0);
+		}
+		class Post extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "author", [field], function() {
+					return contains(Author);
+				});
+			}
+			#author = (initializeDeferredDecorator(this, "author"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "byline", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return `by ${this.author.firstName}`;
+					} });
+				});
+			}
+			#byline = (initializeDeferredDecorator(this, "byline"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "6W8uzmXJ",
+						"block": "[[[10,\"header\"],[14,\"data-test-header-byline\",\"\"],[12],[8,[30,1,[\"byline\"]],null,null,null],[13],[1,\"\\n\"],[10,\"footer\"],[14,\"data-test-footer-byline\",\"\"],[12],[1,[30,2,[\"byline\"]]],[13]],[\"@fields\",\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/computed-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": {
+				Post,
+				Author
+			} }
+		});
+		let author = new Author({ firstName: "Mango" });
+		let post = new Post({ author });
+		await renderCard(loader, post, "isolated");
+		assert.dom("[data-test-header-byline]").hasText("by Mango");
+		assert.dom("[data-test-footer-byline]").hasText("by Mango");
+		author.firstName = "Van Gogh";
+		await settled();
+		assert.dom("[data-test-header-byline]").hasText("by Van Gogh");
+		assert.dom("[data-test-footer-byline]").hasText("by Van Gogh");
+	});
+	(0, import_qunit.test)("a computed read in the same turn as a write reflects the write", async function(assert) {
+		let totalCalls = 0;
+		class Ledger extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "label", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#label = (initializeDeferredDecorator(this, "label"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "amounts", [field], function() {
+					return containsMany(NumberField);
+				});
+			}
+			#amounts = (initializeDeferredDecorator(this, "amounts"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "total", [field], function() {
+					return contains(NumberField, { computeVia: function() {
+						totalCalls++;
+						return this.amounts.reduce((sum, amount) => sum + amount, 0);
+					} });
+				});
+			}
+			#total = (initializeDeferredDecorator(this, "total"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "title", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return `${this.label}: ${this.total}`;
+					} });
+				});
+			}
+			#title = (initializeDeferredDecorator(this, "title"), void 0);
+		}
+		let ledger = new Ledger({
+			label: "Petty cash",
+			amounts: [1, 2]
+		});
+		assert.strictEqual(ledger.total, 3);
+		assert.strictEqual(ledger.total, 3);
+		assert.strictEqual(totalCalls, 1, "repeated reads with no write between them evaluate once");
+		ledger.amounts.push(4);
+		assert.strictEqual(ledger.total, 7, "an in-place array mutation is seen by the next read in the same turn");
+		ledger.amounts = [10];
+		assert.strictEqual(ledger.total, 10, "a field assignment is seen by the next read in the same turn");
+		ledger.label = "Float";
+		assert.strictEqual(ledger.title, "Float: 10", "a computed derived from a memoized one sees a write to its other dependency");
+	});
+	(0, import_qunit.test)("a computed that reads realm meta sees a meta assignment in the same turn", async function(assert) {
+		class Note extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "home", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this[realmURL]?.href ?? "nowhere";
+					} });
+				});
+			}
+			#home = (initializeDeferredDecorator(this, "home"), void 0);
+		}
+		let note = new Note();
+		note[meta] = {
+			...note[meta],
+			realmURL: "http://example.com/first/"
+		};
+		assert.strictEqual(note.home, "http://example.com/first/");
+		note[meta] = {
+			...note[meta],
+			realmURL: "http://example.com/second/"
+		};
+		assert.strictEqual(note.home, "http://example.com/second/", "the read after the assignment is not served the memoized value");
+	});
+	(0, import_qunit.test)("a field computed that reads its realm sees the realm it is attached to in the same turn", async function(assert) {
+		class Place extends FieldDef {
+			static {
+				decorateFieldV2(this.prototype, "home", [field], function() {
+					return contains(string_default, { computeVia: function() {
+						return this[realmURL]?.href ?? "nowhere";
+					} });
+				});
+			}
+			#home = (initializeDeferredDecorator(this, "home"), void 0);
+		}
+		class Trip extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "place", [field], function() {
+					return contains(Place);
+				});
+			}
+			#place = (initializeDeferredDecorator(this, "place"), void 0);
+		}
+		let trip = new Trip();
+		trip[meta] = {
+			...trip[meta],
+			realmURL: "http://example.com/trips/"
+		};
+		let place = new Place();
+		assert.strictEqual(place.home, "nowhere");
+		trip.place = place;
+		assert.strictEqual(trip.place.home, "http://example.com/trips/", "the read after the field is attached is not served the detached value");
+	});
+	(0, import_qunit.test)("a computed whose computeVia throws throws on every read in the turn", async function(assert) {
+		class Gauge extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "reading", [field], function() {
+					return contains(NumberField);
+				});
+			}
+			#reading = (initializeDeferredDecorator(this, "reading"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "level", [field], function() {
+					return contains(NumberField, { computeVia: function() {
+						if (this.reading < 0) throw new Error("negative reading");
+						return this.reading * 2;
+					} });
+				});
+			}
+			#level = (initializeDeferredDecorator(this, "level"), void 0);
+		}
+		let failing = new Gauge({ reading: -1 });
+		assert.throws(() => failing.level, /negative reading/);
+		assert.throws(() => failing.level, /negative reading/, "a failed first evaluation is not served as a value");
+		let gauge = new Gauge({ reading: 1 });
+		assert.strictEqual(gauge.level, 2);
+		gauge.reading = -1;
+		assert.throws(() => gauge.level, /negative reading/);
+		assert.throws(() => gauge.level, /negative reading/, "a failed recompute does not fall back to the last good value");
+	});
+	(0, import_qunit.test)("CardDef.cardTheme resolves from cardInfo.theme", async function(assert) {
+		class Article extends CardDef {
+			static displayName = "Article";
+		}
+		await setupIntegrationTestRealm({
+			skipBootIndex: true,
+			mockMatrixUtils,
+			contents: { "test-cards.gts": { Article } }
+		});
+		let instance = new Article({ cardInfo: new CardInfoField({ theme: new Theme({ cardInfo: new CardInfoField({ name: "Ocean Blue" }) }) }) });
+		await renderCard(loader, instance, "edit");
+		await click("[data-test-toggle-preview]");
+		assert.dom("[data-test-edit-preview=\"cardTheme\"]").containsText("Ocean Blue");
+	});
+});
+//#endregion