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

package/bundled-test-harness/assets/field-playground-test-CzhYzKGv.js

@@ -1,894 +0,0 @@
-import { s as __toESM } from "./chunk-Rp0pCe6z.js";
-import { Br as testRealmURL } from "./runtime-common-BTaLJEw-.js";
-import { T as rri } from "./paths-C9-NYXnM.js";
-import { Y as specRef } from "./constants-Icc0nFW-.js";
-import { g as fieldDefFormats } from "./bfm-card-references-Cjos2rOp.js";
-import { t as config } from "./environment-DIUJgBKt.js";
-import { T as settled, d as click, s as fillIn } from "./dist-BOAdzfkP.js";
-import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { D as realmConfigCardJSON, Et as percySnapshot, F as setupLocalIndexing, L as setupRealmCacheTeardown, Z as withCachedRealmSetup, a as SYSTEM_CARD_FIXTURE_CONTENTS, ct as setupApplicationTest, j as setupAcceptanceTestRealm, mt as setupAuthEndpoints, s as assertMessages, t as setupMockMatrix, z as setupUserSubscription } from "./mock-matrix-Dd8k0DNa.js";
-import { a as getPlaygroundSelections, c as removeSpecSelection, d as setPlaygroundSelections, f as togglePlaygroundPanel, i as createNewInstance, l as selectDeclaration, n as assertFieldExists, o as openFileInPlayground, p as toggleSpecPanel, r as chooseAnotherInstance, s as removePlaygroundSelections, t as assertCardExists, u as selectFormat } from "./playground-BwA8wFGK.js";
-import { s as setRecentFiles } from "./recent-files-cards-Ccqvv5_n.js";
-import { t as searchCardsForTest } from "./search-cards-DxcB56HL.js";
-//#region tests/acceptance/code-submode/field-playground-test.gts
-var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
-var { resolvedBaseRealmURL } = config;
-var authorCard = `import { contains, field, CardDef, Component, FieldDef } from "@cardstack/base/card-api";
-  import MarkdownField from '@cardstack/base/markdown';
-  import StringField from "@cardstack/base/string";
-  export class Author extends CardDef {
-    static displayName = 'Author';
-    @field firstName = contains(StringField);
-    @field lastName = contains(StringField);
-    @field bio = contains(MarkdownField);
-    @field cardTitle = contains(StringField, {
-      computeVia: function (this: Author) {
-        return [this.firstName, this.lastName].filter(Boolean).join(' ');
-      },
-    });
-    static isolated = class Isolated extends Component<typeof this> {
-    <template>
-      <article>
-        <header>
-          <h1 data-test-author-title><@fields.cardTitle /></h1>
-        </header>
-        <div data-test-author-bio><@fields.bio /></div>
-      </article>
-      <style scoped>
-        article {
-          margin-inline: 20px;
-        }
-      </style>
-    </template>
-    }
-  }
-
-  export class Quote extends FieldDef {
-    static displayName = 'Quote';
-    @field quote = contains(StringField);
-    @field attribution = contains(StringField);
-    static embedded = class Embedded extends Component<typeof this> {
-      <template>
-        <div data-test-quote-field-embedded>
-          <blockquote data-test-quote>
-            <p><@fields.quote /></p>
-          </blockquote>
-          <p data-test-attribution><@fields.attribution /></p>
-        </div>
-      </template>
-    }
-  }
-
-  export class FullNameField extends FieldDef {
-    static displayName = 'Full Name';
-    @field firstName = contains(StringField);
-    @field lastName = contains(StringField);
-    static embedded = class Embedded extends Component<typeof this> {
-      <template>
-        <div data-test-full-name-embedded>
-          <@fields.firstName /> <@fields.lastName />
-        </div>
-      </template>
-    }
-}`;
-var blogPostCard = `import { contains, containsMany, field, linksTo, CardDef, Component, FieldDef } from "@cardstack/base/card-api";
-  import DateTimeField from '@cardstack/base/datetime';
-  import MarkdownField from '@cardstack/base/markdown';
-  import StringField from "@cardstack/base/string";
-  import { Author } from './author';
-
-  export class Status extends StringField {
-    static displayName = 'Status';
-  }
-
-  class LocalStatusField extends Status {}
-
-  export class Comment extends FieldDef {
-    static displayName = 'Comment';
-    @field cardTitle = contains(StringField);
-    @field name = contains(StringField);
-    @field message = contains(StringField);
-
-    static embedded = class Embedded extends Component<typeof this> {
-      <template>
-        <div data-test-embedded-comment>
-          <h4 data-test-embedded-comment-title><@fields.cardTitle /></h4>
-          <p><@fields.message /> - by <@fields.name /></p>
-        </div>
-      </template>
-    }
-
-    static fitted = class Fitted extends Component<typeof this> {
-      <template>
-        <div data-test-fitted-comment><@fields.cardTitle /> - by <@fields.name /></div>
-      </template>
-    }
-  }
-
-  class LocalCommentField extends Comment {}
-
-  export class ContactInfo extends FieldDef {
-    @field email = contains(StringField);
-    static atom = class Atom extends Component<typeof this> {
-      <template>
-        <div data-test-atom-contact-info>
-          <@fields.email />
-        </div>
-      </template>
-    }
-    static embedded = class Embedded extends Component<typeof this> {
-      <template>
-        <div data-test-embedded-contact-info>
-          <@fields.email />
-        </div>
-      </template>
-    }
-  }
-
-  export class BlogPost extends CardDef {
-    static displayName = 'Blog Post';
-    @field cardTitle = contains(StringField)
-    @field publishDate = contains(DateTimeField);
-    @field author = linksTo(Author);
-    @field comments = containsMany(Comment);
-    @field localComments = containsMany(LocalCommentField);
-    @field body = contains(MarkdownField);
-    @field status = contains(Status, {
-      computeVia: function (this: BlogPost) {
-        if (!this.publishDate) {
-          return 'Draft';
-        }
-        if (Date.now() >= Date.parse(String(this.publishDate))) {
-          return 'Published';
-        }
-        return 'Scheduled';
-      },
-    });
-    @field localStatus = contains(LocalStatusField);
-
-    static isolated = class Isolated extends Component<typeof this> {
-    <template>
-      <article>
-        <header>
-          <h1 data-test-post-title><@fields.cardTitle /></h1>
-        </header>
-        <div data-test-byline><@fields.author /></div>
-        <div data-test-post-body><@fields.body /></div>
-      </article>
-      <style scoped>
-        article {
-          margin-inline: 20px;
-        }
-      </style>
-    </template>
-    }
-}`;
-var petCard = `import { contains, containsMany, field, CardDef, Component, FieldDef, StringField } from '@cardstack/base/card-api';
-  export class ToyField extends FieldDef {
-    static displayName = 'Toy';
-    @field cardTitle = contains(StringField);
-  }
-  export class TreatField extends FieldDef {
-    static displayName = 'Treat';
-    @field cardTitle = contains(StringField);
-  }
-  export class PetCard extends CardDef {
-    static displayName = 'Pet';
-    @field firstName = contains(StringField);
-    @field favoriteToys = containsMany(ToyField);
-  }
-`;
-var clone = (obj) => JSON.parse(JSON.stringify(obj));
-var commentSpec2 = { data: {
-	type: "card",
-	attributes: {
-		ref: {
-			name: "Comment",
-			module: "../blog-post"
-		},
-		specType: "field",
-		containedExamples: [{ cardTitle: "Spec 2 Example 1" }],
-		cardTitle: "Comment spec II"
-	},
-	meta: {
-		fields: { containedExamples: [{ adoptsFrom: {
-			module: "../blog-post",
-			name: "Comment"
-		} }] },
-		adoptsFrom: {
-			module: "@cardstack/base/spec",
-			name: "Spec"
-		}
-	}
-} };
-var commentSpec1 = { data: {
-	type: "card",
-	attributes: {
-		ref: {
-			name: "Comment",
-			module: "../blog-post"
-		},
-		specType: "field",
-		containedExamples: [{
-			cardTitle: "Terrible product",
-			name: "Marco",
-			message: "I would give 0 stars if I could. Do not buy!"
-		}, {
-			cardTitle: "Needs better packaging",
-			name: "Harry",
-			message: "Arrived broken"
-		}],
-		cardTitle: "Comment spec"
-	},
-	meta: {
-		fields: { containedExamples: [{ adoptsFrom: {
-			module: "../blog-post",
-			name: "Comment"
-		} }, { adoptsFrom: {
-			module: "../blog-post",
-			name: "Comment"
-		} }] },
-		adoptsFrom: {
-			module: "@cardstack/base/spec",
-			name: "Spec"
-		}
-	}
-} };
-(0, import_qunit.module)("Acceptance | code-submode | field playground", function(_hooks) {
-	(0, import_qunit.module)("single realm", function(hooks) {
-		let realm;
-		setupApplicationTest(hooks);
-		setupLocalIndexing(hooks);
-		setupRealmCacheTeardown(hooks);
-		let mockMatrixUtils = setupMockMatrix(hooks, {
-			loggedInAs: "@testuser:localhost",
-			activeRealms: [testRealmURL]
-		});
-		let { setRealmPermissions, setActiveRealms, createAndJoinRoom } = mockMatrixUtils;
-		hooks.beforeEach(async function() {
-			createAndJoinRoom({
-				sender: "@testuser:localhost",
-				name: "room-test"
-			});
-			setupUserSubscription();
-			setupAuthEndpoints();
-			({realm} = await withCachedRealmSetup(async () => setupAcceptanceTestRealm({
-				mockMatrixUtils,
-				realmURL: testRealmURL,
-				contents: {
-					...SYSTEM_CARD_FIXTURE_CONTENTS,
-					"author.gts": authorCard,
-					"blog-post.gts": blogPostCard,
-					"pet.gts": petCard,
-					"Author/jane-doe.json": { data: {
-						attributes: {
-							firstName: "Jane",
-							lastName: "Doe",
-							bio: "Jane Doe is the Senior Managing Editor at <em>Ramped.com</em>, where she leads content strategy, editorial direction, and ensures the highest standards of quality across all publications. With over a decade of experience in digital media and editorial management, Jane has a proven track record of shaping impactful narratives, growing engaged audiences, and collaborating with cross-functional teams to deliver compelling content. When she's not editing, you can find her exploring new books, hiking, or indulging in her love of photography."
-						},
-						meta: { adoptsFrom: {
-							module: `${testRealmURL}author`,
-							name: "Author"
-						} }
-					} },
-					"BlogPost/remote-work.json": { data: {
-						attributes: {
-							cardTitle: "The Ultimate Guide to Remote Work",
-							cardDescription: "In today’s digital age, remote work has transformed from a luxury to a necessity. This comprehensive guide will help you navigate the world of remote work, offering tips, tools, and best practices for success."
-						},
-						relationships: { author: { links: { self: `${testRealmURL}Author/jane-doe` } } },
-						meta: { adoptsFrom: {
-							module: `${testRealmURL}blog-post`,
-							name: "BlogPost"
-						} }
-					} },
-					"Spec/comment-alt.json": clone(commentSpec2),
-					"Spec/comment-main.json": clone(commentSpec1),
-					"Spec/full-name.json": { data: {
-						type: "card",
-						attributes: {
-							ref: {
-								name: "FullNameField",
-								module: "../author"
-							},
-							specType: "field",
-							containedExamples: [],
-							cardTitle: "FullNameField spec"
-						},
-						meta: { adoptsFrom: {
-							module: "@cardstack/base/spec",
-							name: "Spec"
-						} }
-					} },
-					"Spec/contact-info.json": { data: {
-						type: "card",
-						attributes: {
-							ref: {
-								name: "ContactInfo",
-								module: "../blog-post"
-							},
-							specType: "field",
-							containedExamples: [
-								{ email: "marcelius@email.com" },
-								{ email: "lilian@email.com" },
-								{ email: "susie@email.com" }
-							],
-							cardTitle: "Contact Info"
-						},
-						meta: {
-							fields: { containedExamples: [
-								{ adoptsFrom: {
-									module: "../blog-post",
-									name: "ContactInfo"
-								} },
-								{ adoptsFrom: {
-									module: "../blog-post",
-									name: "ContactInfo"
-								} },
-								{ adoptsFrom: {
-									module: "../blog-post",
-									name: "ContactInfo"
-								} }
-							] },
-							adoptsFrom: {
-								module: "@cardstack/base/spec",
-								name: "Spec"
-							}
-						}
-					} },
-					"Spec/toy.json": { data: {
-						type: "card",
-						attributes: {
-							ref: {
-								name: "ToyField",
-								module: "../pet"
-							},
-							specType: "field",
-							containedExamples: [{ cardTitle: "Tug rope" }, { cardTitle: "Lambchop" }],
-							cardTitle: "Toy"
-						},
-						meta: {
-							fields: { containedExamples: [{ adoptsFrom: {
-								module: "../pet",
-								name: "ToyField"
-							} }, { adoptsFrom: {
-								module: "../pet",
-								name: "ToyField"
-							} }] },
-							adoptsFrom: {
-								module: "@cardstack/base/spec",
-								name: "Spec"
-							}
-						}
-					} },
-					"Pet/mango.json": { data: {
-						attributes: {
-							firstName: "Mango",
-							cardTitle: "Mango",
-							favoriteToys: [{ cardTitle: "Tug rope" }, { cardTitle: "Lambchop" }]
-						},
-						meta: { adoptsFrom: {
-							module: `${testRealmURL}pet`,
-							name: "PetCard"
-						} }
-					} }
-				}
-			})));
-			await realm.delete("Spec/comment-main.json");
-			await realm.write("Spec/comment-main.json", JSON.stringify(commentSpec1));
-			setRecentFiles([
-				[testRealmURL, "blog-post.gts"],
-				[testRealmURL, "author.gts"],
-				[testRealmURL, "BlogPost/remote-work.json"],
-				[testRealmURL, "Author/jane-doe.json"]
-			]);
-			removePlaygroundSelections();
-			removeSpecSelection();
-			setActiveRealms([testRealmURL]);
-			setRealmPermissions({ [testRealmURL]: ["read", "write"] });
-		});
-		(0, import_qunit.test)("can preview compound field instance", async function(assert) {
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Comment" });
-			assert.dom("[data-test-playground-format-chooser] [data-test-format-chooser]").exists({ count: fieldDefFormats.length });
-			assert.dom("[data-test-format-chooser=\"isolated\"]").doesNotExist();
-			assert.dom("[data-test-format-chooser=\"embedded\"]").hasClass("active");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Terrible product");
-			assert.dom("[data-test-embedded-comment]").containsText("0 stars");
-			await percySnapshot(assert);
-			await selectFormat("atom");
-			assert.dom("[data-test-format-chooser=\"embedded\"]").hasNoClass("active");
-			assert.dom("[data-test-format-chooser=\"atom\"]").hasClass("active");
-			assertFieldExists(assert, "atom");
-			await selectFormat("edit");
-			assertFieldExists(assert, "edit");
-			assert.dom("[data-test-field-preview-card] [data-test-field]").exists({ count: 3 });
-			assert.dom("[data-test-field-preview-card] [data-test-field=\"name\"] input").hasValue("Marco");
-			await selectFormat("fitted");
-			assertFieldExists(assert, "fitted");
-			assert.dom("[data-test-fitted-comment]").containsText("by Marco");
-			await selectFormat("markdown");
-			await settled();
-			assert.dom("[data-test-format-chooser=\"markdown\"]").hasClass("active");
-			assert.dom("[data-test-markdown-preview]").exists("markdown preview container renders");
-		});
-		(0, import_qunit.test)("can not preview non-exports or primitives", async function(assert) {
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Comment" });
-			assert.dom("[data-test-playground-panel]").exists();
-			await selectDeclaration("Status");
-			assert.dom("[data-test-playground-panel]").doesNotExist("primitive field");
-			assert.dom("[data-test-incompatible-primitives]").exists();
-			await selectDeclaration("LocalStatusField");
-			assert.dom("[data-test-playground-panel]").doesNotExist("local primitive field");
-			assert.dom("[data-test-incompatible-primitives]").exists();
-			await selectDeclaration("LocalCommentField");
-			assert.dom("[data-test-playground-panel]").doesNotExist("local compound field");
-			assert.dom("[data-test-incompatible-nonexports]").exists();
-		});
-		(0, import_qunit.test)("can populate instance chooser dropdown options with containedExamples from Spec", async function(assert) {
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "ContactInfo" });
-			assertFieldExists(assert, "embedded");
-			assert.dom("[data-test-selected-item]").containsText("Contact Info - Example 1");
-			assert.dom("[data-test-embedded-contact-info]").hasText("marcelius@email.com");
-			await click("[data-test-instance-chooser]");
-			assert.dom("[data-option-index]").exists({ count: 3 });
-			assert.dom("[data-option-index=\"0\"]").hasText("marcelius@email.com");
-			assert.dom("[data-option-index=\"1\"]").hasText("lilian@email.com");
-			assert.dom("[data-option-index=\"2\"]").hasText("susie@email.com");
-			await click("[data-option-index=\"2\"]");
-			assert.dom("[data-test-selected-item]").containsText("Contact Info - Example 3");
-			assert.dom("[data-test-embedded-contact-info]").hasText("susie@email.com");
-		});
-		(0, import_qunit.test)("can update the instance chooser when selected declaration changes", async function(assert) {
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "ContactInfo" });
-			assertFieldExists(assert, "embedded");
-			assert.dom("[data-test-selected-item]").containsText("Contact Info - Example 1");
-			assert.dom("[data-test-embedded-contact-info]").hasText("marcelius@email.com");
-			await click("[data-test-instance-chooser]");
-			assert.dom("[data-option-index]").exists({ count: 3 });
-			assert.dom("[data-option-index=\"0\"]").hasText("marcelius@email.com");
-			await selectDeclaration("Comment");
-			assert.dom("[data-test-selected-item]").containsText("Comment spec - Example 1");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Terrible product");
-			await click("[data-test-instance-chooser]");
-			assert.dom("[data-option-index]").exists({ count: 2 });
-			assert.dom("[data-option-index=\"0\"]").hasText("Terrible product");
-			assert.dom("[data-option-index=\"1\"]").hasText("Needs better packaging");
-			await selectDeclaration("BlogPost");
-			assert.dom("[data-test-selected-item]").containsText("Remote Work", "most-recent card is pre-selected");
-			assertCardExists(assert, `${testRealmURL}BlogPost/remote-work`);
-			await selectDeclaration("ContactInfo");
-			assertFieldExists(assert, "embedded");
-			assert.dom("[data-test-selected-item]").containsText("Contact Info - Example 1");
-		});
-		(0, import_qunit.test)("changing the selected spec in Boxel Spec panel changes selected spec in playground", async function(assert) {
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Comment" });
-			assert.dom("[data-test-selected-item]").containsText("Comment spec - Example 1");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Terrible product");
-			let selection = getPlaygroundSelections()?.[`${testRealmURL}blog-post/Comment`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${testRealmURL}Spec/comment-main`),
-				format: "embedded",
-				fieldIndex: 0
-			});
-			await toggleSpecPanel();
-			assert.dom(`[data-test-card="${testRealmURL}Spec/comment-main"] [data-test-boxel-input-id="spec-title"]`).hasValue("Comment spec");
-			assert.dom("[data-test-spec-selector] [data-test-spec-selector-item-path]").containsText("Spec/comment-main");
-			await click("[data-test-spec-selector] > div");
-			assert.dom("[data-option-index=\"1\"] [data-test-spec-selector-item-path]").hasText("Spec/comment-alt");
-			await click("[data-option-index=\"1\"]");
-			assert.dom("[data-test-spec-selector] [data-test-spec-selector-item-path]").containsText("Spec/comment-alt");
-			assert.dom(`[data-test-card="${testRealmURL}Spec/comment-alt"] [data-test-boxel-input-id="spec-title"]`).hasValue("Comment spec II");
-			await togglePlaygroundPanel();
-			assert.dom("[data-test-selected-item]").containsText("Comment spec II - Example 1");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Spec 2 Example 1");
-			selection = getPlaygroundSelections()?.[`${testRealmURL}blog-post/Comment`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${testRealmURL}Spec/comment-alt`),
-				format: "embedded",
-				fieldIndex: 0
-			});
-		});
-		(0, import_qunit.test)("can select a different instance to preview from the spec's containedExamples collection", async function(assert) {
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Comment" });
-			assert.dom("[data-test-selected-item]").containsText("Comment spec - Example 1");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Terrible product");
-			let selection = getPlaygroundSelections()?.[`${testRealmURL}blog-post/Comment`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${testRealmURL}Spec/comment-main`),
-				format: "embedded",
-				fieldIndex: 0
-			});
-			await chooseAnotherInstance();
-			assert.dom("[data-test-field-chooser] [data-test-boxel-header-title]").hasText("Choose a Comment Instance");
-			assert.dom("[data-test-field-instance]").exists({ count: 2 });
-			assert.dom("[data-test-field-instance=\"0\"]").hasClass("selected");
-			assert.dom("[data-test-field-instance=\"1\"]").doesNotHaveClass("selected");
-			await click("[data-test-field-instance=\"1\"]");
-			assert.dom("[data-test-field-chooser]").doesNotExist("field chooser modal is closed");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Needs better packaging");
-			selection = getPlaygroundSelections()?.[`${testRealmURL}blog-post/Comment`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${testRealmURL}Spec/comment-main`),
-				format: "embedded",
-				fieldIndex: 1
-			});
-		});
-		(0, import_qunit.test)("preview the next available example if the previously selected one has been deleted", async function(assert) {
-			setPlaygroundSelections({ [`${testRealmURL}blog-post/Comment`]: {
-				cardId: rri(`${testRealmURL}Spec/comment-main`),
-				format: "embedded",
-				fieldIndex: 1
-			} });
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Comment" });
-			assert.dom("[data-test-selected-item]").containsText("Comment spec - Example 2");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Needs better packaging");
-			await toggleSpecPanel();
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"1\"] [data-test-field=\"cardTitle\"] input").hasValue("Needs better packaging");
-			await click("[data-test-contains-many=\"containedExamples\"] [data-test-remove=\"1\"]");
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"1\"]").doesNotExist();
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"0\"]").exists();
-			await togglePlaygroundPanel();
-			assert.dom("[data-test-embedded-comment-title]").hasText("Terrible product");
-			await toggleSpecPanel();
-			await click("[data-test-contains-many=\"containedExamples\"] [data-test-remove=\"0\"]");
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item]").doesNotExist();
-			await togglePlaygroundPanel();
-			assert.dom("[data-test-selected-item]").containsText("Comment spec - Example 1");
-			assertFieldExists(assert, "edit", "new field instance is autogenerated");
-		});
-		(0, import_qunit.test)("can autogenerate new Spec and field instance (no preexisting Spec)", async function(assert) {
-			await openFileInPlayground("author.gts", testRealmURL, { declaration: "Quote" });
-			assert.dom("[data-test-instance-chooser]").containsText("Quote - Example 1");
-			assertFieldExists(assert, "edit");
-			assert.dom("[data-test-field=\"quote\"] input").hasNoValue();
-			await toggleSpecPanel();
-			assert.dom("[data-test-spec-selector] > .ember-basic-dropdown-trigger").hasAttribute("aria-disabled", "true", "has only 1 spec instance");
-			assert.dom("[data-test-boxel-input-id=\"spec-title\"]").hasValue("Quote");
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"0\"] [data-test-field=\"quote\"] input").hasNoValue();
-			await togglePlaygroundPanel();
-			assertFieldExists(assert, "edit");
-			await toggleSpecPanel();
-			assert.dom("[data-test-spec-selector] > .ember-basic-dropdown-trigger").hasAttribute("aria-disabled", "true", "still has only 1 spec instance");
-		});
-		(0, import_qunit.test)("can create new field instance (has preexisting Spec)", async function(assert) {
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Comment" });
-			assert.dom("[data-test-selected-item]").containsText("Comment spec - Example 1");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Terrible product");
-			let selection = getPlaygroundSelections()?.[`${testRealmURL}blog-post/Comment`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${testRealmURL}Spec/comment-main`),
-				format: "embedded",
-				fieldIndex: 0
-			});
-			await createNewInstance();
-			assert.dom("[data-test-field-preview-card] [data-test-field=\"cardTitle\"] input").hasNoValue();
-			selection = getPlaygroundSelections()?.[`${testRealmURL}blog-post/Comment`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${testRealmURL}Spec/comment-main`),
-				format: "edit",
-				fieldIndex: 2
-			});
-			await toggleSpecPanel();
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item]").exists({ count: 3 });
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"2\"] [data-test-field=\"cardTitle\"] input").hasNoValue();
-			await togglePlaygroundPanel();
-			await chooseAnotherInstance();
-			assert.dom("[data-test-field-chooser] [data-test-field-instance]").exists({ count: 3 });
-		});
-		(0, import_qunit.test)("can autogenerate new field instance when spec exists but has no examples", async function(assert) {
-			let selection = getPlaygroundSelections()?.[`${testRealmURL}author/FullNameField`];
-			assert.strictEqual(selection, void 0);
-			await openFileInPlayground("author.gts", testRealmURL, { declaration: "FullNameField" });
-			assert.dom("[data-test-selected-item]").containsText("FullNameField spec - Example 1");
-			assertFieldExists(assert, "edit");
-			assert.dom("[data-test-field-preview-card] [data-test-field=\"firstName\"] input").hasNoValue();
-			await fillIn("[data-test-field=\"firstName\"] input", "Marco");
-			await fillIn("[data-test-field=\"lastName\"] input", "N.");
-			await chooseAnotherInstance();
-			assert.dom("[data-test-field-chooser] [data-test-field-instance]").exists({ count: 1 });
-			assert.dom("[data-test-field-chooser] [data-test-full-name-embedded]").hasText("Marco N.");
-			await click("[data-test-field-chooser] [data-test-close-modal]");
-			await toggleSpecPanel();
-			assert.dom("[data-test-spec-selector] > .ember-basic-dropdown-trigger").hasAttribute("aria-disabled", "true", "has only 1 spec instance");
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item]").exists({ count: 1 });
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"0\"] [data-test-field=\"firstName\"] input").hasValue("Marco");
-			selection = getPlaygroundSelections()?.[`${testRealmURL}author/FullNameField`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${testRealmURL}Spec/full-name`),
-				format: "edit",
-				fieldIndex: 0
-			});
-		});
-		(0, import_qunit.test)("has default templates when a format template is not provided", async function(assert) {
-			await openFileInPlayground("pet.gts", testRealmURL, { declaration: "TreatField" });
-			assert.dom("[data-test-instance-chooser]").containsText("TreatField - Example 1");
-			assertFieldExists(assert, "edit");
-			await selectFormat("embedded");
-			assert.dom("[data-test-missing-template-text=\"embedded\"]").hasText("Missing embedded component for FieldDef: Treat");
-			await selectFormat("fitted");
-			assert.dom("[data-test-missing-template-text=\"fitted\"]").hasText("Missing fitted component for FieldDef: Treat");
-			await selectFormat("atom");
-			assert.dom("[data-test-compound-field-format=\"atom\"]").hasText("Untitled Treat");
-		});
-		(0, import_qunit.test)("does not persist the wrong card for field", async function(assert) {
-			const cardId = rri(`${testRealmURL}Pet/mango`);
-			const specId = rri(`${testRealmURL}Spec/toy`);
-			let selections = { [`${testRealmURL}pet/PetCard`]: {
-				cardId,
-				format: "isolated"
-			} };
-			setRecentFiles([[testRealmURL, "Pet/mango.json"]]);
-			setPlaygroundSelections(selections);
-			await openFileInPlayground("pet.gts", testRealmURL, { declaration: "ToyField" });
-			assert.dom("[data-test-instance-chooser]").containsText("Toy - Example 1");
-			assertFieldExists(assert, "embedded");
-			selections = {
-				...selections,
-				[`${testRealmURL}pet/ToyField`]: {
-					cardId: specId,
-					fieldIndex: 0,
-					format: "embedded"
-				}
-			};
-			assert.deepEqual(getPlaygroundSelections(), selections, "persisted selections are correct");
-			await selectDeclaration("PetCard");
-			assertCardExists(assert, cardId, "isolated");
-			await selectDeclaration("ToyField");
-			assert.dom("[data-test-instance-chooser]").containsText("Toy - Example 1");
-			assertFieldExists(assert, "embedded");
-			assert.deepEqual(getPlaygroundSelections(), selections, "persisted selections are still correct");
-		});
-		(0, import_qunit.test)("editing compound field instance live updates the preview", async function(assert) {
-			const updatedCommentField = blogPostCard.replace(`    static embedded = class Embedded extends Component<typeof this> {
-      <template>
-        <div data-test-embedded-comment>
-          <h4 data-test-embedded-comment-title><@fields.cardTitle /></h4>
-          <p><@fields.message /> - by <@fields.name /></p>
-        </div>
-      </template>
-    }
-`, `    static embedded = class Embedded extends Component<typeof this> {
-      <template>
-        <div data-test-embedded-comment>
-          <p><@fields.message /> - by <@fields.name /></p>
-        </div>
-      </template>
-    }
-`);
-			if (updatedCommentField === blogPostCard) throw new Error("failed to apply updated comment template");
-			await openFileInPlayground("blog-post.gts", testRealmURL, { declaration: "Comment" });
-			assertFieldExists(assert, "embedded");
-			assert.dom("[data-test-embedded-comment-title]").hasText("Terrible product");
-			await realm.write("blog-post.gts", updatedCommentField);
-			await settled();
-			assertFieldExists(assert, "embedded");
-			assert.dom("[data-test-embedded-comment-title]").doesNotExist();
-		});
-		(0, import_qunit.test)("can request AI assistant to fill in sample data", async function(assert) {
-			const prompt = `Fill in sample data for this example on the card's spec.`;
-			const menuItem = "Fill in Sample Data with AI";
-			const commandMessage = {
-				from: "testuser",
-				message: prompt,
-				cards: [{ id: `${testRealmURL}Spec/toy` }],
-				files: [{
-					name: "pet.gts",
-					sourceUrl: `${testRealmURL}pet.gts`
-				}]
-			};
-			await openFileInPlayground("pet.gts", testRealmURL, { declaration: "ToyField" });
-			assert.dom("[data-test-instance-chooser]").containsText("Toy - Example 1");
-			assertFieldExists(assert, "embedded");
-			await click("[data-test-instance-chooser]");
-			await click(`[data-test-boxel-menu-item-text="${menuItem}"]`);
-			assertMessages(assert, [commandMessage]);
-		});
-		(0, import_qunit.test)("can request AI assistant to bulk generate samples", async function(assert) {
-			const prompt = `Generate 3 additional examples on this card's spec.`;
-			const menuItem = `Generate 3 examples with AI`;
-			const commandMessage = {
-				from: "testuser",
-				message: prompt,
-				cards: [{ id: `${testRealmURL}Spec/toy` }],
-				files: [{
-					name: "pet.gts",
-					sourceUrl: `${testRealmURL}pet.gts`
-				}]
-			};
-			await openFileInPlayground("pet.gts", testRealmURL, { declaration: "ToyField" });
-			assert.dom("[data-test-instance-chooser]").containsText("Toy - Example 1");
-			assertFieldExists(assert, "embedded");
-			await click("[data-test-instance-chooser]");
-			await click(`[data-test-boxel-menu-item-text="${menuItem}"]`);
-			assertMessages(assert, [commandMessage]);
-		});
-	});
-	(0, import_qunit.module)("multiple realms", function(hooks) {
-		let realm;
-		let origin = new URL(resolvedBaseRealmURL).origin;
-		let personalRealmURL = `${origin}/testuser/personal/`;
-		let additionalRealmURL = `${origin}/testuser/aaa/`;
-		setupApplicationTest(hooks);
-		setupLocalIndexing(hooks);
-		setupRealmCacheTeardown(hooks);
-		let mockMatrixUtils = setupMockMatrix(hooks, {
-			loggedInAs: "@testuser:localhost",
-			activeRealms: [personalRealmURL, additionalRealmURL]
-		});
-		let { setRealmPermissions, createAndJoinRoom } = mockMatrixUtils;
-		hooks.beforeEach(async function() {
-			createAndJoinRoom({
-				sender: "@testuser:localhost",
-				name: "room-test"
-			});
-			setupUserSubscription();
-			({realm} = await withCachedRealmSetup(async () => {
-				await setupAcceptanceTestRealm({
-					mockMatrixUtils,
-					realmURL: personalRealmURL,
-					contents: {
-						...SYSTEM_CARD_FIXTURE_CONTENTS,
-						"author.gts": authorCard,
-						"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"
-						})
-					}
-				});
-				return setupAcceptanceTestRealm({
-					mockMatrixUtils,
-					realmURL: additionalRealmURL,
-					contents: {
-						...SYSTEM_CARD_FIXTURE_CONTENTS,
-						"author.gts": authorCard,
-						"pet.gts": petCard,
-						"Spec/toy.json": { data: {
-							type: "card",
-							attributes: {
-								ref: {
-									name: "ToyField",
-									module: "../pet"
-								},
-								specType: "field",
-								containedExamples: [{ cardTitle: "Tug rope" }],
-								cardTitle: "Toy"
-							},
-							meta: {
-								fields: { containedExamples: [{ adoptsFrom: {
-									module: "../pet",
-									name: "ToyField"
-								} }] },
-								adoptsFrom: {
-									module: "@cardstack/base/spec",
-									name: "Spec"
-								}
-							}
-						} },
-						"Spec/full-name.json": { data: {
-							type: "card",
-							attributes: {
-								ref: {
-									name: "FullNameField",
-									module: "../author"
-								},
-								specType: "field",
-								containedExamples: [],
-								cardTitle: "FullNameField spec"
-							},
-							meta: { adoptsFrom: {
-								module: "@cardstack/base/spec",
-								name: "Spec"
-							} }
-						} },
-						"realm.json": realmConfigCardJSON({
-							name: `Additional Workspace`,
-							backgroundURL: "/test-fixtures/realm-images/4k-powder-puff.jpg",
-							iconURL: "/test-fixtures/realm-images/letter-a.png"
-						})
-					}
-				});
-			}));
-			setRealmPermissions({
-				[additionalRealmURL]: [
-					"read",
-					"write",
-					"realm-owner"
-				],
-				[personalRealmURL]: [
-					"read",
-					"write",
-					"realm-owner"
-				]
-			});
-		});
-		(0, import_qunit.test)("can autogenerate new Spec and field instance (no preexisting Spec)", async function(assert) {
-			let queryEngine = realm.realmIndexQueryEngine;
-			let { data: matching } = await searchCardsForTest(queryEngine, { filter: {
-				on: specRef,
-				eq: {
-					specType: "field",
-					isField: true,
-					cardTitle: "Quote",
-					moduleHref: `${additionalRealmURL}author`
-				}
-			} });
-			assert.strictEqual(matching.length, 0);
-			await openFileInPlayground("author.gts", additionalRealmURL, { declaration: "Quote" });
-			assert.dom("[data-test-instance-chooser]").containsText("Quote - Example 1");
-			assertFieldExists(assert, "edit");
-			assert.dom("[data-test-field=\"quote\"] input").hasNoValue();
-			({data: matching} = await searchCardsForTest(queryEngine, { filter: {
-				on: specRef,
-				eq: {
-					specType: "field",
-					isField: true,
-					cardTitle: "Quote",
-					moduleHref: `${additionalRealmURL}author`
-				}
-			} }));
-			assert.strictEqual(matching.length, 1);
-			assert.ok(matching[0].id.startsWith(`${additionalRealmURL}Spec/`));
-			await toggleSpecPanel();
-			assert.dom("[data-test-spec-selector] > .ember-basic-dropdown-trigger").hasAttribute("aria-disabled", "true", "has only 1 spec instance");
-			assert.dom("[data-test-boxel-input-id=\"spec-title\"]").hasValue("Quote");
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"0\"] [data-test-field=\"quote\"] input").hasNoValue();
-			await togglePlaygroundPanel();
-			assertFieldExists(assert, "edit");
-			await toggleSpecPanel();
-			assert.dom("[data-test-spec-selector] > .ember-basic-dropdown-trigger").hasAttribute("aria-disabled", "true", "still has only 1 spec instance");
-		});
-		(0, import_qunit.test)("can create new field instance (has preexisting Spec)", async function(assert) {
-			await openFileInPlayground("pet.gts", additionalRealmURL, { declaration: "ToyField" });
-			assert.dom("[data-test-selected-item]").containsText("Toy - Example 1");
-			await selectFormat("atom");
-			assertFieldExists(assert, "atom");
-			assert.dom("[data-test-playground-panel] [data-test-compound-field-format=\"atom\"]").hasText("Tug rope");
-			let selection = getPlaygroundSelections()?.[`${additionalRealmURL}pet/ToyField`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${additionalRealmURL}Spec/toy`),
-				format: "atom",
-				fieldIndex: 0
-			});
-			await createNewInstance();
-			assert.dom("[data-test-field-preview-card] [data-test-field=\"cardTitle\"] input").hasNoValue();
-			selection = getPlaygroundSelections()?.[`${additionalRealmURL}pet/ToyField`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${additionalRealmURL}Spec/toy`),
-				format: "edit",
-				fieldIndex: 1
-			});
-			await toggleSpecPanel();
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item]").exists({ count: 2 });
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"1\"] [data-test-field=\"cardTitle\"] input").hasNoValue();
-			await togglePlaygroundPanel();
-			await chooseAnotherInstance();
-			assert.dom("[data-test-field-chooser] [data-test-field-instance]").exists({ count: 2 });
-		});
-		(0, import_qunit.test)("can autogenerate new field instance when spec exists but has no examples", async function(assert) {
-			let selection = getPlaygroundSelections()?.[`${additionalRealmURL}author/FullNameField`];
-			assert.strictEqual(selection, void 0);
-			await openFileInPlayground("author.gts", additionalRealmURL, { declaration: "FullNameField" });
-			assert.dom("[data-test-selected-item]").containsText("FullNameField spec - Example 1");
-			assertFieldExists(assert, "edit");
-			assert.dom("[data-test-field-preview-card] [data-test-field=\"firstName\"] input").hasNoValue();
-			await fillIn("[data-test-field=\"firstName\"] input", "Marco");
-			await fillIn("[data-test-field=\"lastName\"] input", "N.");
-			await chooseAnotherInstance();
-			assert.dom("[data-test-field-chooser] [data-test-field-instance]").exists({ count: 1 });
-			assert.dom("[data-test-field-chooser] [data-test-full-name-embedded]").hasText("Marco N.");
-			await click("[data-test-field-chooser] [data-test-close-modal]");
-			await toggleSpecPanel();
-			assert.dom("[data-test-spec-selector] > .ember-basic-dropdown-trigger").hasAttribute("aria-disabled", "true", "has only 1 spec instance");
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item]").exists({ count: 1 });
-			assert.dom("[data-test-contains-many=\"containedExamples\"] [data-test-item=\"0\"] [data-test-field=\"firstName\"] input").hasValue("Marco");
-			selection = getPlaygroundSelections()?.[`${additionalRealmURL}author/FullNameField`];
-			assert.deepEqual(selection, {
-				cardId: rri(`${additionalRealmURL}Spec/full-name`),
-				format: "edit",
-				fieldIndex: 0
-			});
-		});
-	});
-});
-//#endregion