@cardstack/boxel-cli 0.3.2-unstable.59 → 0.3.2-unstable.60

package/bundled-test-harness/assets/rich-markdown-field-test-BJeQx1tL.js

@@ -0,0 +1,806 @@
+import { s as __toESM } from "./chunk-CGdGNDIi.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime-CYyqkz5q-z3Y1hsJm.js";
+import { Zn as testRealmURL, _i as baseRRI, ci as PermissionsContextName, vi as baseRealm } from "./runtime-common-C7uLt5dN.js";
+import { $n as setComponentTemplate } from "./service-DJ87xpDt.js";
+import { V as templateFactory } from "./index-DaCZcoCY-D2gI_aMw.js";
+import "./template-D3TMIrc1.js";
+import "./template-factory-DMEv2kVd.js";
+import { I as waitUntil, d as click, o as waitFor } from "./dist-D1U_uSwt.js";
+import { t as require_qunit } from "./qunit-Cqwmt9Vl.js";
+import { r as getService } from "./dist-CY3T64Hs.js";
+import { A as setupIntegrationTestRealm, O as setupCardLogs, X as provide, j as setupLocalIndexing, rt as setupRenderingTest, t as setupMockMatrix } from "./mock-matrix-BhFWlMMr.js";
+import { G as contains, I as StringField, P as RichMarkdownField, Q as field, a as CardDef, d as Component, mt as setupBaseRealm } from "./base-realm-DpSTsZxD.js";
+import { t as renderCard } from "./render-component-Bs21y6iv.js";
+//#region tests/integration/components/rich-markdown-field-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var loader;
+(0, import_qunit.module)("Integration | RichMarkdownField", function(hooks) {
+	setupRenderingTest(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks);
+	setupBaseRealm(hooks);
+	hooks.beforeEach(function() {
+		provide(PermissionsContextName, {
+			canWrite: true,
+			canRead: true
+		});
+		loader = getService("loader-service").loader;
+	});
+	setupLocalIndexing(hooks);
+	setupCardLogs(hooks, async () => await loader.import(`${baseRealm.url}card-api`));
+	(0, import_qunit.test)("renders markdown as HTML", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "# Hello World\n\nSome **bold** text." }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector("h1")).hasText("Hello World");
+		assert.dom(root.querySelector("strong")).hasText("bold");
+	});
+	(0, import_qunit.test)("edit template renders CodeMirror editor for content", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Edit me" }) });
+		let root = await renderCard(loader, card, "edit");
+		let editor = root.querySelector("[data-test-codemirror-editor]");
+		let loading = root.querySelector("[data-test-codemirror-loading]");
+		let hasEditorOrLoading = editor !== null || loading !== null;
+		assert.true(hasEditorOrLoading, "CodeMirror editor or loading state is rendered");
+	});
+	(0, import_qunit.test)("renders with null content without error", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard();
+		let root = await renderCard(loader, card, "edit");
+		assert.dom(root).exists("renders without error");
+	});
+	(0, import_qunit.test)("renders inline :card references as BFM elements", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "See :card[https://example.com/cards/1] for details." }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector("[data-boxel-bfm-inline-ref]")).exists("inline card reference is rendered as BFM element");
+		assert.dom(root.querySelector("[data-boxel-bfm-inline-ref]")).hasAttribute("data-boxel-bfm-inline-ref", "https://example.com/cards/1");
+	});
+	(0, import_qunit.test)("renders block ::card references as BFM elements", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "::card[https://example.com/cards/2]\n" }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector("[data-boxel-bfm-block-ref]")).exists("block card reference is rendered as BFM element");
+		assert.dom(root.querySelector("[data-boxel-bfm-block-ref]")).hasAttribute("data-boxel-bfm-block-ref", "https://example.com/cards/2");
+	});
+	(0, import_qunit.test)("cardReferenceUrls computes resolved URLs from markdown content", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "See :card[https://example.com/cards/1] for details.\n\n::card[https://example.com/cards/2]\n" }) });
+		await renderCard(loader, card, "embedded");
+		assert.deepEqual(card.body.cardReferenceUrls, ["https://example.com/cards/1", "https://example.com/cards/2"], "cardReferenceUrls contains both inline and block reference URLs");
+	});
+	(0, import_qunit.test)("cardReferenceUrls returns empty array for content without references", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "# Just plain markdown\n\nNo card references here." }) });
+		await renderCard(loader, card, "embedded");
+		assert.deepEqual(card.body.cardReferenceUrls, [], "cardReferenceUrls is empty");
+	});
+	(0, import_qunit.test)("linkedCards query resolves referenced cards from the realm", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		let sampleCards = { "referenced-card.json": { data: {
+			type: "card",
+			attributes: { cardTitle: "Referenced Card" },
+			meta: { adoptsFrom: {
+				module: baseRRI("card-api"),
+				name: "CardDef"
+			} }
+		} } };
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"test-card.gts": { TestCard },
+				...sampleCards
+			}
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: `:card[${testRealmURL}referenced-card]` }) });
+		let root = await renderCard(loader, card, "embedded");
+		assert.dom(root.querySelector("[data-boxel-bfm-inline-ref]")).exists("card reference placeholder is rendered");
+	});
+	(0, import_qunit.test)("renders footnotes", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Text with a footnote[^1].\n\n[^1]: This is the footnote content." }) });
+		let root = await renderCard(loader, card, "atom");
+		assert.dom(root.querySelector(".footnotes")).exists("footnote section is rendered");
+		assert.ok(root.textContent.includes("This is the footnote content"), "footnote content is present");
+	});
+	(0, import_qunit.test)("linkedCards render inside the markdown when card is loaded from realm", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(StringField);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(StringField, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "fc+zviHm",
+						"block": "[[[10,0],[14,\"data-test-pet-embedded\",\"\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Inline ref: :card[${testRealmURL}Pet/mango]\n\nBlock ref:\n\n::card[${testRealmURL}Pet/mango]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		assert.dom("[data-test-pet-atom]").exists("inline card reference renders the referenced card in atom format");
+		assert.dom("[data-test-pet-atom]").hasText("Mango", "inline atom shows the correct card");
+		assert.dom("[data-test-pet-embedded]").exists("block card reference renders the referenced card in embedded format");
+		assert.dom("[data-test-pet-embedded]").hasText("Mango", "block embedded shows the correct card");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").doesNotExist("no unresolved Pill remains after card resolves (inline)");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").doesNotExist("no unresolved Pill remains after card resolves (block)");
+	});
+	(0, import_qunit.test)("card references show loading shimmer before linkedCards resolves, not broken Pills", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(StringField);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(StringField, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Inline ref: :card[${testRealmURL}Pet/mango]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		let unresolvedPillEverAppeared = false;
+		let testRoot = document.querySelector("#ember-testing");
+		let testObserver = new MutationObserver(() => {
+			if (testRoot.querySelector("[data-test-markdown-bfm-unresolved-inline]")) unresolvedPillEverAppeared = true;
+		});
+		testObserver.observe(testRoot, {
+			childList: true,
+			subtree: true
+		});
+		let inlineRef = document.querySelector("[data-boxel-bfm-inline-ref]");
+		assert.ok(inlineRef, "card ref element exists in the DOM");
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		testObserver.disconnect();
+		assert.false(unresolvedPillEverAppeared, "no broken Pill flashed during the loading→resolved transition");
+		assert.dom("[data-test-pet-atom]").hasText("Mango", "card resolves correctly");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").doesNotExist("no unresolved Pill after card resolves");
+	});
+	(0, import_qunit.test)("unresolved card references render as muted Pill indicators", async function(assert) {
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"article.gts": { ArticleCard },
+				"article-unresolved.json": { data: {
+					attributes: { body: { content: `Inline: :card[https://nonexistent.example/Pet/missing]\n\nBlock:\n\n::card[https://nonexistent.example/BlogPost/gone]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-unresolved`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitUntil(() => document.querySelector("[data-test-markdown-bfm-unresolved-inline]") !== null, { timeout: 1e4 });
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").hasText("Pet", "inline unresolved ref shows type name in Pill");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").hasAttribute("title", "https://nonexistent.example/Pet/missing", "inline Pill title shows the raw URL");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").exists("block unresolved ref renders a Pill");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").hasAttribute("title", "https://nonexistent.example/BlogPost/gone", "block Pill title shows the raw URL");
+	});
+	(0, import_qunit.test)("unresolved block ref with fitted size spec carries the card footprint", async function(assert) {
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"article.gts": { ArticleCard },
+				"article-fitted-unresolved.json": { data: {
+					attributes: { body: { content: `::card[https://nonexistent.example/BlogPost/gone | 400x200]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-fitted-unresolved`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitUntil(() => document.querySelector("[data-test-markdown-bfm-unresolved-block]") !== null, { timeout: 1e4 });
+		let brokenBlock = document.querySelector("[data-test-markdown-bfm-unresolved-block]");
+		assert.ok(brokenBlock, "broken-link block exists");
+		assert.dom(brokenBlock).hasClass("markdown-bfm-broken--fitted", "fitted ref carries the fitted footprint class");
+		let style = brokenBlock?.getAttribute("style") ?? "";
+		assert.true(/width:\s*400px/.test(style), `broken-link inline style includes width: 400px (got "${style}")`);
+		assert.true(/height:\s*200px/.test(style), `broken-link inline style includes height: 200px (got "${style}")`);
+	});
+	(0, import_qunit.test)("linkedCards resolve when markdown uses relative card references", async function(assert) {
+		class Pet extends CardDef {
+			static displayName = "Pet";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(StringField);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(StringField, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "fc+zviHm",
+						"block": "[[[10,0],[14,\"data-test-pet-embedded\",\"\"],[12],[8,[30,1,[\"name\"]],null,null,null],[13]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+			static atom = class Atom extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "hIHHAuC1",
+						"block": "[[[10,1],[14,\"data-test-pet-atom\",\"\"],[12],[1,[30,1,[\"name\"]]],[13]],[\"@model\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ArticleCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"pet.gts": { Pet },
+				"article.gts": { ArticleCard },
+				"Pet/mango.json": { data: {
+					attributes: {
+						name: "Mango",
+						cardTitle: "Mango"
+					},
+					meta: { adoptsFrom: {
+						module: "../pet",
+						name: "Pet"
+					} }
+				} },
+				"article-1.json": { data: {
+					attributes: { body: { content: `Inline ref: :card[./Pet/mango]\n\nBlock ref:\n\n::card[./Pet/mango]\n` } },
+					meta: { adoptsFrom: {
+						module: "./article",
+						name: "ArticleCard"
+					} }
+				} }
+			}
+		});
+		let store = getService("store");
+		let article = await store.get(`${testRealmURL}article-1`);
+		await store.loaded();
+		await renderCard(loader, article, "isolated");
+		await waitFor("[data-test-pet-atom]", { timeout: 1e4 });
+		assert.dom("[data-test-pet-atom]").exists("inline card reference with relative path renders the referenced card");
+		assert.dom("[data-test-pet-atom]").hasText("Mango", "inline atom shows the correct card");
+		assert.dom("[data-test-pet-embedded]").exists("block card reference with relative path renders the referenced card");
+		assert.dom("[data-test-pet-embedded]").hasText("Mango", "block embedded shows the correct card");
+		assert.dom("[data-test-markdown-bfm-unresolved-inline]").doesNotExist("no unresolved Pill remains after card resolves (inline)");
+		assert.dom("[data-test-markdown-bfm-unresolved-block]").doesNotExist("no unresolved Pill remains after card resolves (block)");
+	});
+	(0, import_qunit.test)("edit template renders mode switcher with Compose, Source, and Preview buttons", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		assert.dom("[data-test-mode-switcher]").exists("mode switcher is rendered");
+		assert.dom("[data-test-mode-compose]").hasText("Compose", "Compose button is rendered");
+		assert.dom("[data-test-mode-source]").hasText("Source", "Source button is rendered");
+		assert.dom("[data-test-mode-preview]").hasText("Preview", "Preview button is rendered");
+	});
+	(0, import_qunit.test)("default mode shows editor, not preview", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		assert.dom("[data-test-markdown-preview]").doesNotExist("preview is not shown by default");
+		let editorOrLoading = document.querySelector("[data-test-codemirror-editor]") ?? document.querySelector("[data-test-codemirror-loading]");
+		assert.ok(editorOrLoading, "editor is shown by default (edit mode)");
+	});
+	(0, import_qunit.test)("clicking Preview shows rendered markdown and hides editor", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "# Hello World\n\nSome **bold** text." }) });
+		await renderCard(loader, card, "edit");
+		await click("[data-test-mode-preview]");
+		assert.dom("[data-test-markdown-preview]").exists("markdown preview is rendered");
+		assert.dom("[data-test-codemirror-editor]").doesNotExist("CodeMirror editor is not shown in preview mode");
+		assert.dom("[data-test-codemirror-loading]").doesNotExist("CodeMirror loading is not shown in preview mode");
+		assert.dom("[data-test-markdown-preview] h1").hasText("Hello World", "heading is rendered as HTML");
+		assert.dom("[data-test-markdown-preview] strong").hasText("bold", "bold text is rendered as HTML");
+	});
+	(0, import_qunit.test)("clicking Source hides preview and shows editor", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		await click("[data-test-mode-source]");
+		assert.dom("[data-test-markdown-preview]").doesNotExist("preview is not shown in source mode");
+		let editorOrLoading = document.querySelector("[data-test-codemirror-editor]") ?? document.querySelector("[data-test-codemirror-loading]");
+		assert.ok(editorOrLoading, "editor is shown in source mode");
+	});
+	(0, import_qunit.test)("switching from Preview back to Compose restores editor", async function(assert) {
+		class TestCard extends CardDef {
+			static {
+				decorateFieldV2(this.prototype, "body", [field], function() {
+					return contains(RichMarkdownField);
+				});
+			}
+			#body = (initializeDeferredDecorator(this, "body"), void 0);
+			static edit = class Edit extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "nKOoxfii",
+						"block": "[[[8,[30,1,[\"body\"]],null,null,null]],[\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/rich-markdown-field-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: { "test-card.gts": { TestCard } }
+		});
+		let card = new TestCard({ body: new RichMarkdownField({ content: "Hello world" }) });
+		await renderCard(loader, card, "edit");
+		await click("[data-test-mode-preview]");
+		assert.dom("[data-test-markdown-preview]").exists("preview is shown");
+		await click("[data-test-mode-compose]");
+		assert.dom("[data-test-markdown-preview]").doesNotExist("preview is hidden after switching back");
+		let editorOrLoading = document.querySelector("[data-test-codemirror-editor]") ?? document.querySelector("[data-test-codemirror-loading]");
+		assert.ok(editorOrLoading, "editor is restored after switching back to Compose");
+	});
+});
+//#endregion