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

package/bundled-test-harness/assets/markdown-embed-preview-pane-test-B6rscKpk.js

@@ -0,0 +1,447 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { n as decorateMethodV2, r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { Ar as testRealmURL } from "./runtime-common-ClpqhbwG.js";
+import { D as baseRealm, h as GetCardsContextName, m as GetCardContextName, p as GetCardCollectionContextName, t as CardContextName } from "./constants-CqKWhRfY.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import "./template-factory-ds9s0u8l.js";
+import { t as templateOnly } from "./template-only-6nVzLWF-.js";
+import { n as getCardCollection } from "./card-collection-BXiO3i7R.js";
+import { n as getCard } from "./card-resource-JGLjQUy6.js";
+import { r as provide } from "./dist-Ble0L9o7.js";
+import { d as click, h as render, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
+import { n as EmbedFormatSelection, t as MarkdownEmbedPreviewPane } from "./pane-PYdezM7g.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { F as setupLocalIndexing, P as setupIntegrationTestRealm, lt as setupRenderingTest, t as setupMockMatrix } from "./mock-matrix-DPQ0j2MD.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { A as field, a as CardDef, w as contains } from "./card-api-Dzje0smT.js";
+import { t as string_default } from "./string-BHZZwNlZ.js";
+//#region tests/integration/components/93abf59820.css
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+//#endregion
+//#region tests/integration/components/markdown-embed-preview-pane-test.gts
+var PaneBox = setComponentTemplate(templateFactory({
+	"id": "WlRHywUD",
+	"block": "[[[10,0],[14,0,\"pane-box\"],[14,\"data-scopedcss-b5888ea623-316a0ec271\",\"\"],[12],[1,\"\\n  \"],[18,1,null],[1,\"\\n\"],[13],[1,\"\\n\"]],[\"&default\"],[\"yield\"]]",
+	"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+	"isStrictMode": true
+}), templateOnly());
+var HostContextProvider = class extends Component {
+	get getCardFn() {
+		return getCard;
+	}
+	static {
+		decorateMethodV2(this.prototype, "getCardFn", [provide(GetCardContextName)]);
+	}
+	get getCardsFn() {
+		let store = getService("store");
+		return store.getSearchResource.bind(store);
+	}
+	static {
+		decorateMethodV2(this.prototype, "getCardsFn", [provide(GetCardsContextName)]);
+	}
+	get getCardCollectionFn() {
+		return getCardCollection;
+	}
+	static {
+		decorateMethodV2(this.prototype, "getCardCollectionFn", [provide(GetCardCollectionContextName)]);
+	}
+	get cardContext() {
+		return {};
+	}
+	static {
+		decorateMethodV2(this.prototype, "cardContext", [provide(CardContextName)]);
+	}
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "MKLDoz7o",
+			"block": "[[[18,1,null]],[\"&default\"],[\"yield\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"isStrictMode": true
+		}), this);
+	}
+};
+var InsertHarness = class {
+	inserts = [];
+	onInsert = (bfm) => {
+		this.inserts.push(bfm);
+	};
+	get last() {
+		return this.inserts[this.inserts.length - 1];
+	}
+};
+async function chooseFormat(value) {
+	await click("[data-test-markdown-embed-preview-format-select]");
+	await waitFor(".ember-power-select-option", { timeout: 3e3 });
+	await click(`[data-test-format-option="${value}"]`);
+}
+(0, import_qunit.module)("Integration | markdown-embed-preview-pane", function(hooks) {
+	setupRenderingTest(hooks);
+	setupLocalIndexing(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [baseRealm.url, testRealmURL],
+		autostart: true
+	});
+	const mango = `${testRealmURL}books/mango`;
+	hooks.beforeEach(async function() {
+		class Book extends CardDef {
+			static displayName = "Book";
+			static {
+				decorateFieldV2(this.prototype, "title", [field], function() {
+					return contains(string_default);
+				});
+			}
+			#title = (initializeDeferredDecorator(this, "title"), void 0);
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			realmURL: testRealmURL,
+			contents: {
+				"book.gts": { Book },
+				"books/mango.json": new Book({ title: "Mango" })
+			}
+		});
+		await getService("realm").login(testRealmURL);
+	});
+	async function loadCard() {
+		return await getService("store").get(mango);
+	}
+	(0, import_qunit.test)("atom is the default; both placements are available", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		assert.dom("[data-test-markdown-embed-preview-cta]").hasText("Insert as Atom", "CTA reflects the default Atom category");
+		assert.dom("[data-test-markdown-embed-preview-block]").isNotDisabled("Block toggle is available for every format");
+		assert.dom("[data-test-markdown-embed-preview-size]").doesNotExist("no W/H inputs for Atom");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:card[${card.id}]`, "inline atom inserts the size-less inline directive");
+		await click("[data-test-markdown-embed-preview-block]");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::card[${card.id} | atom]`, "block atom emits the atom specifier");
+	});
+	(0, import_qunit.test)("embedded emits a block directive with the embedded keyword", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("embedded");
+		assert.dom("[data-test-markdown-embed-preview-cta]").hasText("Insert as Embedded");
+		assert.dom("[data-test-markdown-embed-preview-block]").isNotDisabled("Block re-enables for non-atom formats");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::card[${card.id} | embedded]`);
+	});
+	(0, import_qunit.test)("the preview tracks the selected format in either placement", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("embedded");
+		assert.dom("[data-test-markdown-embed-preview]").hasAttribute("data-test-markdown-embed-preview-format", "embedded", "block embedded previews in embedded format");
+		await click("[data-test-markdown-embed-preview-inline]");
+		assert.dom("[data-test-markdown-embed-preview]").hasAttribute("data-test-markdown-embed-preview-format", "embedded", "inline still previews the selected embedded format");
+	});
+	(0, import_qunit.test)("fitted variant prefills W/H and emits the variant id in both placements", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("tall-tile");
+		assert.dom("[data-test-markdown-embed-preview-cta]").hasText("Insert as Fitted");
+		assert.dom("[data-test-markdown-embed-preview-width]").hasValue("150", "width prefilled from the variant");
+		assert.dom("[data-test-markdown-embed-preview-height]").hasValue("275", "height prefilled from the variant");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::card[${card.id} | tall-tile]`, "block emits the named variant id");
+		await click("[data-test-markdown-embed-preview-inline]");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:card[${card.id} | tall-tile]`, "inline carries the same size specifier as block");
+	});
+	(0, import_qunit.test)("editing W/H to unknown dims switches to Custom and emits w:/h:", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("tall-tile");
+		await fillIn("[data-test-markdown-embed-preview-width]", "300");
+		await fillIn("[data-test-markdown-embed-preview-height]", "200");
+		assert.dom("[data-test-markdown-embed-preview-cta]").hasText("Insert as Custom", "unknown dims fall back to Custom");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::card[${card.id} | w:300 h:200]`);
+	});
+	(0, import_qunit.test)("editing W/H to a known variant follows the dropdown to that variant", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("tall-tile");
+		await fillIn("[data-test-markdown-embed-preview-width]", "250");
+		await fillIn("[data-test-markdown-embed-preview-height]", "170");
+		assert.dom("[data-test-markdown-embed-preview-cta]").hasText("Insert as Fitted", "an exact match stays in the Fitted category");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::card[${card.id} | regular-tile]`, "the dropdown follows the dimensions to the matching variant");
+	});
+	(0, import_qunit.test)("isolated emits in both placements", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("isolated");
+		assert.dom("[data-test-markdown-embed-preview-cta]").hasText("Insert as Isolated");
+		assert.dom("[data-test-markdown-embed-preview]").hasAttribute("data-test-markdown-embed-preview-format", "isolated", "preview switches to isolated");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::card[${card.id} | isolated]`, "block isolated emits the isolated specifier");
+		await click("[data-test-markdown-embed-preview-inline]");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:card[${card.id} | isolated]`, "inline isolated also carries the isolated specifier");
+	});
+	(0, import_qunit.test)("inline + embedded emits the explicit specifier on CTA", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("embedded");
+		await click("[data-test-markdown-embed-preview-inline]");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:card[${card.id} | embedded]`, "inline embedded carries the embedded specifier");
+	});
+	(0, import_qunit.test)("inline + custom dimensions emit w:/h: in the inline directive", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await chooseFormat("tall-tile");
+		await fillIn("[data-test-markdown-embed-preview-width]", "321");
+		await fillIn("[data-test-markdown-embed-preview-height]", "210");
+		await click("[data-test-markdown-embed-preview-inline]");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:card[${card.id} | w:321 h:210]`, "inline custom carries w:/h:");
+	});
+	(0, import_qunit.test)("refType drives the keyword (file)", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "iMp7hY9l",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"file\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:file[${card.id}]`, "atom inline file ref");
+		await chooseFormat("embedded");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::file[${card.id} | embedded]`);
+	});
+	(0, import_qunit.test)("the inserted ref is relativized against the document base URL", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		let documentBaseUrl = `${testRealmURL}posts/my-post`;
+		await render(setComponentTemplate(templateFactory({
+			"id": "diTBfuT3",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@documentBaseUrl\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5],[32,6,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				documentBaseUrl,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:card[../books/mango]`, "the inline atom ref is relativized against the document base URL");
+		await chooseFormat("embedded");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `::card[../books/mango | embedded]`, "the block directive carries the relative ref plus the format specifier");
+	});
+	(0, import_qunit.test)("atom, embedded, isolated carry the has-divider modifier; fitted/custom do not", async function(assert) {
+		let card = await loadCard();
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		await render(setComponentTemplate(templateFactory({
+			"id": "3GIM/7Fk",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@target\",\"@refType\",\"@selection\",\"@onInsert\"],[[32,3],\"card\",[32,4],[32,5,[\"onInsert\"]]]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				card,
+				selection,
+				harness
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		await click("[data-test-markdown-embed-preview-format-select]");
+		await waitFor(".ember-power-select-option", { timeout: 3e3 });
+		for (let value of [
+			"atom",
+			"embedded",
+			"isolated"
+		]) assert.dom(`[data-test-format-option="${value}"]`).hasClass("has-divider", `${value} wrapper carries has-divider so the dropdown can paint a gap below it`);
+		for (let value of ["tall-tile", "custom"]) assert.dom(`[data-test-format-option="${value}"]`).doesNotHaveClass("has-divider", `${value} wrapper has no divider — only the non-fitted heads do`);
+	});
+	(0, import_qunit.test)("a broken ref surfaces the broken preview; the CTA still serializes the broken URL", async function(assert) {
+		let harness = new InsertHarness();
+		let selection = new EmbedFormatSelection();
+		let brokenUrl = `${testRealmURL}books/deleted`;
+		let errorDoc = {
+			status: 404,
+			title: "Not Found",
+			message: `Could not find ${brokenUrl}`,
+			additionalErrors: null
+		};
+		await render(setComponentTemplate(templateFactory({
+			"id": "olQ3kscS",
+			"block": "[[[8,[32,0],null,null,[[\"default\"],[[[[1,\"\\n  \"],[8,[32,1],null,null,[[\"default\"],[[[[1,\"\\n    \"],[8,[32,2],null,[[\"@refType\",\"@selection\",\"@onInsert\",\"@brokenUrl\",\"@brokenDisplayName\",\"@errorDoc\",\"@brokenState\"],[\"card\",[32,3],[32,4,[\"onInsert\"]],[32,5],\"Book\",[32,6],\"not-found\"]],null],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"]],[]]]]]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/markdown-embed-preview-pane-test.gts",
+			"scope": () => [
+				PaneBox,
+				HostContextProvider,
+				MarkdownEmbedPreviewPane,
+				selection,
+				harness,
+				brokenUrl,
+				errorDoc
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		assert.dom("[data-test-broken-link-template]").exists("the broken-ref visual surfaces in the pane");
+		assert.dom("[data-test-broken-link-type]").hasText("Book");
+		await click("[data-test-markdown-embed-preview-cta]");
+		assert.strictEqual(harness.last, `:card[${brokenUrl}]`, "the CTA serializes the broken URL so Done/Accept keep the ref");
+	});
+});
+//#endregion