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

package/bundled-test-harness/assets/theme-card-test-BQmT7rqr.js

@@ -1,621 +0,0 @@
-import { s as __toESM } from "./chunk-Rp0pCe6z.js";
-import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
-import { Ar as testRealmURL, Sc as Deferred } from "./runtime-common-ClpqhbwG.js";
-import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
-import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
-import { n as src_default } from "./src-DPaAwa4H.js";
-import "./component-BJO47HTh.js";
-import "./template-factory-ds9s0u8l.js";
-import { B as BoxelInput } from "./components-CbCTWAON.js";
-import { d as click, s as fillIn } from "./dist-BOAdzfkP.js";
-import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
-import { D as realmConfigCardJSON, F as setupLocalIndexing, I as setupOnSave, L as setupRealmCacheTeardown, Z as withCachedRealmSetup, a as SYSTEM_CARD_FIXTURE_CONTENTS, ct as setupApplicationTest, j as setupAcceptanceTestRealm, pt as setupAuthEndpoints, st as visitOperatorMode, t as setupMockMatrix, wt as percySnapshot, z as setupUserSubscription } from "./mock-matrix-DPQ0j2MD.js";
-import { r as getService } from "./dist-CPfIHBla.js";
-import { t as SOFT_POP_VARS } from "./theme-fixtures-Cbx3kJqv.js";
-//#region tests/acceptance/theme-card-test.gts
-var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
-var ROOT_CSS_VARS = {
-	background: "#0a0f23",
-	foreground: "#f4f1e8",
-	primary: "#ffd700",
-	primaryForeground: "#0a0f23",
-	secondary: "#2d3561",
-	secondaryForeground: "#c5c2b0",
-	destructive: "#cd5c5c",
-	destructiveForeground: "#f4f1e8",
-	muted: "#1e2347",
-	mutedForeground: "#8a8772",
-	accent: "#ffb347",
-	accentForeground: "#1a1f3a",
-	card: "#1a1f3a",
-	cardForeground: "#e8e5d3",
-	ring: "#ffd700",
-	input: "#2d3561",
-	popover: "#242952",
-	popoverForeground: "#f4f1e8",
-	sidebar: "#0f1428",
-	sidebarForeground: "#c5c2b0",
-	border: "#3a4073",
-	fontMono: "'Source Code Pro', 'Courier New', monospace",
-	fontSans: "'Libre Baskerville', 'Georgia', serif",
-	fontSerif: "'Crimson Text', 'Times New Roman', serif",
-	spacing: "0.3rem",
-	trackingNormal: "0.01em",
-	radius: "0.75rem",
-	shadow: "0 6px 12px rgba(255, 215, 0, 0.3)",
-	shadow2xl: "0 6px 12px rgba(255, 215, 0, 0.5)",
-	chart1: "#ffb347"
-};
-var DARK_MODE_VARS = {
-	background: "#050813",
-	foreground: "#f7f4e9",
-	primary: "#ffef94",
-	primaryForeground: "#050813",
-	secondary: "#1e2347",
-	secondaryForeground: "#d0cd98",
-	accent: "#ffc975",
-	accentForeground: "#0f1428",
-	muted: "#141933",
-	mutedForeground: "#9d9a85",
-	destructive: "#e07a7a",
-	destructiveForeground: "#f7f4e9",
-	card: "#0f1428",
-	cardForeground: "#ebe8d5",
-	popover: "#1a1f3a",
-	popoverForeground: "#f7f4e9",
-	sidebar: "#050813",
-	sidebarForeground: "#d0cd98",
-	ring: "#ffef94",
-	input: "#1e2347",
-	border: "#2d3561",
-	radius: "0.75rem",
-	shadow: "0 6px 12px rgba(255, 239, 148, 0.35)",
-	spacing: "0.3rem",
-	fontMono: "'Source Code Pro', 'Courier New', monospace",
-	fontSans: "'Libre Baskerville', 'Georgia', serif",
-	fontSerif: "'Crimson Text', 'Times New Roman', serif",
-	trackingNormal: "0.01em"
-};
-var DARK_GOLD_THEME_VARS = {
-	primary: "#ffd700",
-	primaryForeground: "#0a0f23",
-	border: "#3a4073",
-	background: "#1a1f3a",
-	spacing: "0.3rem"
-};
-var OCEAN_BLUE_THEME_VARS = {
-	primary: "#0058A3",
-	primaryForeground: "#FFFFFF",
-	border: "#003B6F",
-	background: "#E3F2FD",
-	spacing: "0.25rem"
-};
-var FOREST_GREEN_THEME_VARS = {
-	primary: "#2e7d32",
-	primaryForeground: "#FFFFFF",
-	border: "#1b5e20",
-	background: "#E8F5E9",
-	spacing: "0.25rem"
-};
-function computedProperty(selector, property) {
-	let el = document.querySelector(selector);
-	if (!el) throw new Error(`expected to find element: ${selector}`);
-	return src_default.getComputedStyle(el).getPropertyValue(property).trim();
-}
-function hexToRgb(hex) {
-	return `rgb(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)})`;
-}
-(0, import_qunit.module)("Acceptance | theme-card-test", function(hooks) {
-	setupApplicationTest(hooks);
-	setupLocalIndexing(hooks);
-	setupOnSave(hooks);
-	setupRealmCacheTeardown(hooks);
-	let mockMatrixUtils = setupMockMatrix(hooks, {
-		loggedInAs: "@testuser:localhost",
-		activeRealms: [testRealmURL]
-	});
-	let { createAndJoinRoom } = mockMatrixUtils;
-	const themeCardId = `${testRealmURL}starry-night`;
-	const softPopCardId = `${testRealmURL}soft-pop`;
-	const styleRefCardId = `${testRealmURL}style-ref-starry-night`;
-	hooks.beforeEach(async function() {
-		createAndJoinRoom({
-			sender: "@testuser:localhost",
-			name: "room-test"
-		});
-		setupUserSubscription();
-		setupAuthEndpoints();
-		let loader = getService("loader-service").loader;
-		let cardApi;
-		let booleanMod;
-		cardApi = await loader.import("@cardstack/base/card-api");
-		booleanMod = await loader.import("@cardstack/base/boolean");
-		let { field, contains, CardDef, Component } = cardApi;
-		let { default: BooleanField } = booleanMod;
-		class CheckboxCard extends CardDef {
-			static displayName = "Checkbox Card";
-			static {
-				decorateFieldV2(this.prototype, "isChecked", [field], function() {
-					return contains(BooleanField);
-				});
-			}
-			#isChecked = (initializeDeferredDecorator(this, "isChecked"), void 0);
-			static isolated = class Isolated extends Component {
-				static {
-					setComponentTemplate(templateFactory({
-						"id": "TX+YzjiH",
-						"block": "[[[10,\"h2\"],[12],[1,\"Checkbox Card\"],[13],[1,\"\\n\"],[8,[32,0],[[24,\"data-test-checkbox-checked\",\"\"]],[[\"@type\",\"@value\"],[\"checkbox\",true]],null],[1,\"\\n\"],[8,[32,0],[[24,\"data-test-checkbox-unchecked\",\"\"]],[[\"@type\",\"@value\"],[\"checkbox\",false]],null]],[],[]]",
-						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/acceptance/theme-card-test.gts",
-						"scope": () => [BoxelInput],
-						"isStrictMode": true
-					}), this);
-				}
-			};
-		}
-		await withCachedRealmSetup(async () => {
-			await setupAcceptanceTestRealm({
-				mockMatrixUtils,
-				contents: {
-					...SYSTEM_CARD_FIXTURE_CONTENTS,
-					"checkbox-card.gts": { CheckboxCard },
-					"realm.json": realmConfigCardJSON({ name: "Theme Playground" }),
-					"starry-night.json": { data: {
-						meta: { adoptsFrom: {
-							name: "default",
-							module: "@cardstack/base/structured-theme"
-						} },
-						type: "card",
-						attributes: {
-							cardInfo: {
-								name: "Starry Night",
-								summmary: "A celestial theme",
-								cardThumbnailURL: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=400&auto=format&fit=crop"
-							},
-							cssImports: [
-								"https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap",
-								"https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap",
-								"https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
-							],
-							rootVariables: ROOT_CSS_VARS,
-							darkModeVariables: DARK_MODE_VARS
-						}
-					} },
-					"style-ref-starry-night.json": { data: {
-						meta: { adoptsFrom: {
-							name: "default",
-							module: "@cardstack/base/style-reference"
-						} },
-						type: "card",
-						attributes: {
-							cardInfo: {
-								notes: "Color palette extracted from the famous painting: deep Prussian blue (#0a0f23), golden yellow (#ffd700), warm amber (#ffb347), and creamy highlights (#f4f1e8). Uses elegant serif fonts to match the artistic, classical nature of the inspiration.",
-								name: "Starry Night",
-								summary: "A celestial theme inspired by Van Gogh's masterpiece, featuring deep midnight blues swirling with golden yellows and warm amber accents.",
-								cardThumbnailURL: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=400&auto=format&fit=crop"
-							},
-							styleName: "Starry Night",
-							visualDNA: "A celestial theme inspired by Van Gogh's masterpiece, featuring deep midnight blues swirling with golden yellows and warm amber accents. The palette captures the cosmic energy of a starlit night with flowing, organic movements and luminous highlights that dance across dark surfaces.",
-							cssImports: [
-								"https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap",
-								"https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap",
-								"https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"
-							],
-							inspirations: [
-								"Van Gogh",
-								"Post-Impressionism",
-								"Cosmic swirls",
-								"Night sky",
-								"Cypress trees",
-								"Village lights",
-								"Impasto technique",
-								"Dynamic brushstrokes"
-							],
-							rootVariables: ROOT_CSS_VARS,
-							wallpaperImages: [
-								"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1200&auto=format&fit=crop",
-								"https://images.unsplash.com/photo-1447433589675-4aaa569f3e05?q=80&w=1200&auto=format&fit=crop",
-								"https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?q=80&w=1200&auto=format&fit=crop"
-							],
-							darkModeVariables: DARK_MODE_VARS
-						}
-					} },
-					"soft-pop.json": { data: {
-						meta: { adoptsFrom: {
-							name: "default",
-							module: "@cardstack/base/structured-theme"
-						} },
-						type: "card",
-						attributes: { cardInfo: {
-							name: "Soft Pop",
-							summary: "A theme with soft color pops"
-						} }
-					} },
-					"dark-gold-theme.json": { data: {
-						meta: { adoptsFrom: {
-							name: "default",
-							module: "@cardstack/base/structured-theme"
-						} },
-						type: "card",
-						attributes: {
-							cardInfo: { name: "Dark Gold" },
-							rootVariables: DARK_GOLD_THEME_VARS,
-							typography: { body: { fontSize: "18px" } }
-						}
-					} },
-					"ocean-blue-theme.json": { data: {
-						meta: { adoptsFrom: {
-							name: "default",
-							module: "@cardstack/base/structured-theme"
-						} },
-						type: "card",
-						attributes: {
-							cardInfo: { name: "Ocean Blue" },
-							rootVariables: OCEAN_BLUE_THEME_VARS,
-							typography: { body: { fontSize: "14px" } }
-						}
-					} },
-					"forest-green-theme.json": { data: {
-						meta: { adoptsFrom: {
-							name: "default",
-							module: "@cardstack/base/structured-theme"
-						} },
-						type: "card",
-						attributes: {
-							cardInfo: { name: "Forest Green" },
-							rootVariables: FOREST_GREEN_THEME_VARS,
-							typography: { body: { fontSize: "16px" } }
-						}
-					} },
-					"checkbox-dark-gold.json": { data: {
-						meta: { adoptsFrom: {
-							name: "CheckboxCard",
-							module: `${testRealmURL}checkbox-card`
-						} },
-						type: "card",
-						attributes: {
-							isChecked: true,
-							cardInfo: { name: "Dark Gold Checkbox" }
-						},
-						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}dark-gold-theme` } } }
-					} },
-					"checkbox-ocean-blue.json": { data: {
-						meta: { adoptsFrom: {
-							name: "CheckboxCard",
-							module: `${testRealmURL}checkbox-card`
-						} },
-						type: "card",
-						attributes: {
-							isChecked: true,
-							cardInfo: { name: "Ocean Blue Checkbox" }
-						},
-						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}ocean-blue-theme` } } }
-					} },
-					"checkbox-forest-green-2.json": { data: {
-						meta: { adoptsFrom: {
-							name: "CheckboxCard",
-							module: `${testRealmURL}checkbox-card`
-						} },
-						type: "card",
-						attributes: {
-							isChecked: false,
-							cardInfo: { name: "Second Forest Green Checkbox" }
-						},
-						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}forest-green-theme` } } }
-					} },
-					"checkbox-forest-green.json": { data: {
-						meta: { adoptsFrom: {
-							name: "CheckboxCard",
-							module: `${testRealmURL}checkbox-card`
-						} },
-						type: "card",
-						attributes: {
-							isChecked: true,
-							cardInfo: { name: "Forest Green Checkbox" }
-						},
-						relationships: { "cardInfo.theme": { links: { self: `${testRealmURL}forest-green-theme` } } }
-					} }
-				}
-			});
-		});
-	});
-	(0, import_qunit.module)("style-reference-card", () => {
-		(0, import_qunit.test)("renders with scoped theme css variables", async function(assert) {
-			await visitOperatorMode({ stacks: [[{
-				id: styleRefCardId,
-				format: "isolated"
-			}]] });
-			let cardSelector = `[data-test-card="${styleRefCardId}"]`;
-			assert.dom(`${cardSelector} h1`).hasText("Starry Night");
-			assert.dom(cardSelector).hasClass("boxel-card-container--themed");
-			assert.dom(cardSelector).hasAttribute("data-boxel-theme-scope");
-			assert.strictEqual(computedProperty(cardSelector, "--background"), ROOT_CSS_VARS.background, "computed --background matches the theme root variable");
-			assert.strictEqual(computedProperty(cardSelector, "--primary"), ROOT_CSS_VARS.primary, "computed --primary matches the theme root variable");
-			let computedFontFamily = computedProperty(cardSelector, "font-family");
-			assert.ok(computedFontFamily.includes("Libre Baskerville"), `computed font-family includes themed value`);
-		});
-	});
-	(0, import_qunit.module)("structured-theme-card", () => {
-		(0, import_qunit.test)("renders with scoped theme css variables", async function(assert) {
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			let cardSelector = `[data-test-card="${themeCardId}"]`;
-			assert.dom(`${cardSelector} h1`).hasText("Starry Night");
-			assert.dom("[data-test-css-field]").containsText("--radius: 0.75rem;");
-			assert.dom(cardSelector).hasClass("boxel-card-container--themed");
-			assert.dom(cardSelector).hasAttribute("data-boxel-theme-scope");
-			let containerScope = document.querySelector(cardSelector).getAttribute("data-boxel-theme-scope");
-			let dashboardScope = document.querySelector(`${cardSelector} article[data-boxel-theme-scope]`).getAttribute("data-boxel-theme-scope");
-			assert.true(containerScope.startsWith(`${themeCardId}-`), "scope derives from the theme card id");
-			assert.strictEqual(dashboardScope, containerScope, "dashboard scope matches the container scope");
-			assert.strictEqual(computedProperty(cardSelector, "--background"), "#0a0f23", "computed --background matches the root variable");
-			assert.strictEqual(computedProperty(cardSelector, "--chart-1"), "#ffb347", "computed --chart-1 matches the root variable");
-			assert.strictEqual(computedProperty(cardSelector, "--shadow-2xl"), "0 6px 12px rgba(255, 215, 0, 0.5)", "computed --shadow-2xl matches the root variable");
-			let computedFontFamily = computedProperty(cardSelector, "font-family");
-			assert.ok(computedFontFamily.includes("Libre Baskerville"), `computed font-family includes themed value`);
-			assert.dom(`${cardSelector} [data-test-pill-preview]`).exists({ count: 6 }, "the color system previews all pill variants");
-			assert.strictEqual(computedProperty(`${cardSelector} [data-test-pill-preview="primary"]`, "background-color"), hexToRgb(ROOT_CSS_VARS.primary), "the primary pill previews the theme primary color");
-			assert.strictEqual(computedProperty(`${cardSelector} [data-test-pill-preview="destructive"]`, "background-color"), hexToRgb(ROOT_CSS_VARS.destructive), "the destructive pill previews the theme destructive color");
-			assert.dom(`${cardSelector} [data-test-action-sample]`).exists({ count: 3 }, "default, primary, and secondary action samples render");
-			await visitOperatorMode({
-				stacks: [],
-				codePath: themeCardId,
-				submode: "code"
-			});
-			assert.dom(`${cardSelector} h1`).hasText("Starry Night");
-			assert.dom("[data-test-css-field]").containsText("--radius: 0.75rem;");
-			assert.dom(cardSelector).hasAttribute("data-boxel-theme-scope");
-			assert.strictEqual(computedProperty(cardSelector, "--background"), "#0a0f23", "computed --background matches the root variable in code submode");
-			await percySnapshot(assert);
-		});
-		(0, import_qunit.test)("dark mode preview toggle applies dark theme variables to the dashboard", async function(assert) {
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			let dashboardSelector = `[data-test-card="${themeCardId}"] .detailed-style-reference`;
-			assert.strictEqual(computedProperty(dashboardSelector, "--background"), ROOT_CSS_VARS.background, "dashboard shows root variables before toggling");
-			await click("[data-test-mode=\"toggle-dark\"]");
-			assert.strictEqual(computedProperty(dashboardSelector, "--background"), DARK_MODE_VARS.background, "dashboard shows dark mode variables after toggling dark");
-			assert.strictEqual(computedProperty(dashboardSelector, "--primary"), DARK_MODE_VARS.primary, "dashboard --primary flips to the dark value");
-			await click("[data-test-mode=\"toggle-light\"]");
-			assert.strictEqual(computedProperty(dashboardSelector, "--background"), ROOT_CSS_VARS.background, "dashboard shows root variables again after toggling light");
-		});
-		(0, import_qunit.test)("dark mode preview keeps dark defaults for tokens the theme omits", async function(assert) {
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			let scopeSelector = `[data-test-card="${themeCardId}"] [data-test-theme-dashboard]`;
-			assert.strictEqual(computedProperty(scopeSelector, "--canvas"), "#f8f7fa", "an omitted token resolves to the boxel light default");
-			await click("[data-test-mode=\"toggle-dark\"]");
-			assert.strictEqual(computedProperty(scopeSelector, "--canvas"), "#1e1b26", "an omitted token resolves to the boxel dark default in the dark preview");
-			assert.strictEqual(computedProperty(scopeSelector, "--background"), DARK_MODE_VARS.background, "the theme still overrides the tokens it defines");
-		});
-		(0, import_qunit.test)("dark mode variables apply when the ambient scheme is dark", async function(assert) {
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			let cardSelector = `[data-test-card="${themeCardId}"]`;
-			assert.strictEqual(computedProperty(cardSelector, "--background"), ROOT_CSS_VARS.background, "root variables apply under the default light scheme");
-			document.documentElement.setAttribute("data-theme", "dark");
-			try {
-				assert.strictEqual(computedProperty(cardSelector, "--background"), DARK_MODE_VARS.background, "dark mode variables apply when the ambient scheme is dark");
-				assert.strictEqual(computedProperty(cardSelector, "--primary"), DARK_MODE_VARS.primary, "dark mode --primary applies when the ambient scheme is dark");
-			} finally {
-				document.documentElement.removeAttribute("data-theme");
-			}
-			assert.strictEqual(computedProperty(cardSelector, "--background"), ROOT_CSS_VARS.background, "root variables apply again when the ambient scheme returns to light");
-		});
-		(0, import_qunit.test)("applies pasted custom CSS variables", async function(assert) {
-			assert.expect(11);
-			await visitOperatorMode({ stacks: [[{
-				id: softPopCardId,
-				format: "isolated"
-			}]] });
-			let deferred = new Deferred();
-			this.onSave((url, json) => {
-				if (typeof json === "string") throw new Error("expected JSON save data");
-				assert.strictEqual(url.href, softPopCardId);
-				assert.strictEqual(json?.data.attributes?.rootVariables?.primary, "oklch(0.5106 0.2301 276.9656)", "primary root var is saved");
-				assert.strictEqual(json?.data.attributes?.rootVariables?.fontSans, "DM Sans, sans-serif", "font-sans root var is saved");
-				assert.strictEqual(json?.data.attributes?.darkModeVariables?.foreground, "oklch(1.0000 0 0)", "dark foreground is saved");
-				deferred.fulfill();
-			});
-			assert.dom("[data-test-dashboard-empty-state]").exists("a theme-less isolated view shows the empty state");
-			await click("[data-test-edit-button]");
-			await fillIn("[data-test-custom-css-variables]", SOFT_POP_VARS);
-			await click("[data-test-import-theme]");
-			assert.dom("[data-test-root-vars] [data-test-field=\"secondary\"] [data-test-color-text-input]").hasValue("oklch(0.7038 0.1230 182.5025)");
-			assert.dom("[data-test-css-field]").containsText("--background: oklch(0.9789 0.0082 121.6272);");
-			assert.dom("[data-test-css-field]").containsText("--background: oklch(0 0 0);");
-			assert.dom("[data-test-root-vars] [data-test-field=\"accent\"] [data-test-color-text-input]").hasValue("oklch(0.7686 0.1647 70.0804)");
-			await click("[data-test-mode=\"toggle-dark\"]");
-			assert.dom("[data-test-dark-vars] [data-test-field=\"muted\"] [data-test-color-text-input]").hasValue("oklch(0.3211 0 0)");
-			assert.dom("[data-test-dark-vars] [data-test-field=\"accent\"] [data-test-color-text-input]").hasValue("oklch(0.8790 0.1534 91.6054)");
-		});
-		(0, import_qunit.test)("updates CSS variables when editing textarea values", async function(assert) {
-			assert.expect(16);
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			let deferred = new Deferred();
-			this.onSave((url, json) => {
-				if (typeof json === "string") throw new Error("expected JSON save data");
-				assert.strictEqual(url.href, themeCardId);
-				const rootVars = json?.data.attributes?.rootVariables;
-				const darkVars = json?.data.attributes?.darkModeVariables;
-				assert.strictEqual(rootVars?.background, "#455A68", "background value is updated");
-				assert.strictEqual(rootVars?.foreground, "#FCD2A7", "foreground value is updated");
-				assert.strictEqual(rootVars?.card, "#1a1f3a", "card value did not change");
-				assert.strictEqual(darkVars?.background, "#050813", "dark background did not change");
-				assert.strictEqual(darkVars?.card, "black", "dark card background is updated");
-				deferred.fulfill();
-			});
-			assert.dom("[data-test-root-vars] [data-test-var-value=\"--background\"]").containsText("#0a0f23");
-			assert.dom("[data-test-root-vars] [data-test-var-value=\"--card\"]").containsText("#1a1f3a");
-			await click("[data-test-mode=\"toggle-dark\"]");
-			assert.dom("[data-test-dark-vars] [data-test-var-value=\"--background\"]").containsText("#050813");
-			await click("[data-test-mode=\"toggle-light\"]");
-			await click("[data-test-edit-button]");
-			await fillIn("[data-test-custom-css-variables]", ":root { --background: #455A68; --foreground: #FCD2A7; } .dark { --card: black; }");
-			await click("[data-test-import-theme]");
-			assert.dom("[data-test-root-vars] [data-test-field=\"background\"] [data-test-color-text-input]").hasValue("#455A68", "value is updated");
-			assert.dom("[data-test-root-vars] [data-test-field=\"card\"] [data-test-color-text-input]").hasValue("#1a1f3a", "existing value remains");
-			assert.dom("[data-test-css-field]").containsText("--background: #455A68;");
-			assert.dom("[data-test-css-field]").containsText("--card: #1a1f3a;");
-			assert.dom("[data-test-root-vars] [data-test-field=\"foreground\"] [data-test-color-text-input]").hasValue("#FCD2A7", "foreground is updated in edit mode");
-			await click("[data-test-mode=\"toggle-dark\"]");
-			assert.dom("[data-test-dark-vars] [data-test-field=\"card\"] [data-test-color-text-input]").hasValue("black", "dark card background is updated in edit mode");
-			assert.dom("[data-test-dark-vars] [data-test-field=\"background\"] [data-test-color-text-input]").hasValue("#050813", "existing value remains in edit mode");
-		});
-		(0, import_qunit.test)("recomputes cssVariables after editing fields", async function(assert) {
-			assert.expect(4);
-			const NEW_FOREGROUND = "#a6f4ca";
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "edit"
-			}]] });
-			let deferred = new Deferred();
-			this.onSave((url, json) => {
-				if (typeof json === "string") throw new Error("expected JSON save data");
-				assert.strictEqual(url.href, themeCardId);
-				const rootVars = json?.data.attributes?.rootVariables;
-				assert.strictEqual(rootVars?.background, "#0a0f23", "background value did not change");
-				assert.strictEqual(rootVars?.foreground, NEW_FOREGROUND, "foreground value is updated");
-				deferred.fulfill();
-			});
-			await fillIn("[data-test-root-vars] [data-test-field=\"foreground\"] [data-test-boxel-input]", NEW_FOREGROUND);
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			assert.dom("[data-test-css-field]").containsText(` --foreground: ${NEW_FOREGROUND}; `);
-		});
-		(0, import_qunit.test)("can reset all css variables", async function(assert) {
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			assert.dom("[data-test-var-value=\"--accent\"] [data-test-swatch=\"#ffb347\"]").exists();
-			assert.dom("[data-test-reset]").doesNotExist("the reset button is an edit mode tool");
-			await click("[data-test-edit-button]");
-			await click("[data-test-reset]");
-			assert.dom("[data-test-css-field]").containsText("/* No CSS defined */");
-			assert.dom("[data-test-custom-css-variables]").exists("the import editor remains available in edit mode");
-			await visitOperatorMode({ stacks: [[{
-				id: themeCardId,
-				format: "isolated"
-			}]] });
-			assert.dom("[data-test-dashboard-empty-state]").exists("a reset theme shows the isolated empty state");
-			assert.dom("[data-test-root-vars]").doesNotExist("the visualizer is hidden once the theme is reset");
-			assert.dom("[data-test-custom-css-variables]").doesNotExist("the importer is an edit mode tool");
-		});
-	});
-	(0, import_qunit.module)("themed-checkbox", () => {
-		(0, import_qunit.test)("dark gold theme applies correct checkbox styles", async function(assert) {
-			let cardId = `${testRealmURL}checkbox-dark-gold`;
-			await visitOperatorMode({ stacks: [[{
-				id: cardId,
-				format: "isolated"
-			}]] });
-			assert.dom(`[data-test-card="${cardId}"]`).hasClass("boxel-card-container--themed");
-			let container = document.querySelector(`[data-test-card="${cardId}"]`);
-			assert.ok(container, "themed card container is present");
-			assert.dom(`[data-test-card="${cardId}"]`).hasAttribute("data-boxel-theme-scope");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#ffd700", "computed --primary matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--border"), "#3a4073", "computed --border matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--background"), "#1a1f3a", "computed --background matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--theme-body-font-size"), "18px", "computed --theme-body-font-size matches the theme");
-			assert.dom("[data-test-checkbox-checked]").exists("checked checkbox renders");
-			assert.dom("[data-test-checkbox-unchecked]").exists("unchecked checkbox renders");
-			let checkedEl = document.querySelector("[data-test-checkbox-checked]");
-			let uncheckedEl = document.querySelector("[data-test-checkbox-unchecked]");
-			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("background-color"), hexToRgb("#ffd700"), "checked checkbox background-color matches --primary");
-			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("border-color"), hexToRgb("#3a4073"), "unchecked checkbox border-color matches --border");
-			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("background-color"), hexToRgb("#1a1f3a"), "unchecked checkbox background-color matches --background");
-			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("width"), "18px", "checkbox size matches --theme-body-font-size");
-		});
-		(0, import_qunit.test)("ocean blue theme applies correct checkbox styles", async function(assert) {
-			let cardId = `${testRealmURL}checkbox-ocean-blue`;
-			await visitOperatorMode({ stacks: [[{
-				id: cardId,
-				format: "isolated"
-			}]] });
-			assert.dom(`[data-test-card="${cardId}"]`).hasClass("boxel-card-container--themed");
-			let container = document.querySelector(`[data-test-card="${cardId}"]`);
-			assert.ok(container, "themed card container is present");
-			assert.dom(`[data-test-card="${cardId}"]`).hasAttribute("data-boxel-theme-scope");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#0058A3", "computed --primary matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--border"), "#003B6F", "computed --border matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--background"), "#E3F2FD", "computed --background matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--theme-body-font-size"), "14px", "computed --theme-body-font-size matches the theme");
-			assert.dom("[data-test-checkbox-checked]").exists("checked checkbox renders");
-			assert.dom("[data-test-checkbox-unchecked]").exists("unchecked checkbox renders");
-			let checkedEl = document.querySelector("[data-test-checkbox-checked]");
-			let uncheckedEl = document.querySelector("[data-test-checkbox-unchecked]");
-			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("background-color"), hexToRgb("#0058A3"), "checked checkbox background-color matches --primary");
-			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("border-color"), hexToRgb("#003B6F"), "unchecked checkbox border-color matches --border");
-			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("background-color"), hexToRgb("#E3F2FD"), "unchecked checkbox background-color matches --background");
-			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("width"), "14px", "checkbox size matches --theme-body-font-size");
-		});
-		(0, import_qunit.test)("forest green theme applies correct checkbox styles", async function(assert) {
-			let cardId = `${testRealmURL}checkbox-forest-green`;
-			await visitOperatorMode({ stacks: [[{
-				id: cardId,
-				format: "isolated"
-			}]] });
-			assert.dom(`[data-test-card="${cardId}"]`).hasClass("boxel-card-container--themed");
-			let container = document.querySelector(`[data-test-card="${cardId}"]`);
-			assert.ok(container, "themed card container is present");
-			assert.dom(`[data-test-card="${cardId}"]`).hasAttribute("data-boxel-theme-scope");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#2e7d32", "computed --primary matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--border"), "#1b5e20", "computed --border matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--background"), "#E8F5E9", "computed --background matches the theme");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--theme-body-font-size"), "16px", "computed --theme-body-font-size matches the theme");
-			assert.dom("[data-test-checkbox-checked]").exists("checked checkbox renders");
-			assert.dom("[data-test-checkbox-unchecked]").exists("unchecked checkbox renders");
-			let checkedEl = document.querySelector("[data-test-checkbox-checked]");
-			let uncheckedEl = document.querySelector("[data-test-checkbox-unchecked]");
-			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("background-color"), hexToRgb("#2e7d32"), "checked checkbox background-color matches --primary");
-			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("border-color"), hexToRgb("#1b5e20"), "unchecked checkbox border-color matches --border");
-			assert.strictEqual(src_default.getComputedStyle(uncheckedEl).getPropertyValue("background-color"), hexToRgb("#E8F5E9"), "unchecked checkbox background-color matches --background");
-			assert.strictEqual(src_default.getComputedStyle(checkedEl).getPropertyValue("width"), "16px", "checkbox size matches --theme-body-font-size");
-		});
-		(0, import_qunit.test)("cards sharing a theme emit identical scoped stylesheets with only one active copy", async function(assert) {
-			let cardId = `${testRealmURL}checkbox-forest-green`;
-			let otherCardId = `${testRealmURL}checkbox-forest-green-2`;
-			await visitOperatorMode({ stacks: [[{
-				id: cardId,
-				format: "isolated"
-			}], [{
-				id: otherCardId,
-				format: "isolated"
-			}]] });
-			let themeStyleText = (id) => {
-				return [...document.querySelector(`[data-test-card="${id}"]`).querySelectorAll("style")].map((style) => style.textContent?.trim()).filter((text) => text?.includes("data-boxel-theme-scope")).join("");
-			};
-			let scope = document.querySelector(`[data-test-card="${cardId}"]`).getAttribute("data-boxel-theme-scope");
-			let otherScope = document.querySelector(`[data-test-card="${otherCardId}"]`).getAttribute("data-boxel-theme-scope");
-			assert.ok(scope, "theme scope is set");
-			assert.true(scope.startsWith(`${testRealmURL}forest-green-theme-`), "scope derives from the theme card id plus a content hash");
-			assert.strictEqual(scope, otherScope, "cards sharing a theme share a scope");
-			assert.ok(themeStyleText(cardId).length, "theme stylesheet is rendered within the card container");
-			assert.strictEqual(themeStyleText(cardId), themeStyleText(otherCardId), "cards sharing a theme emit byte-identical theme stylesheets");
-			let copies = () => [...document.querySelectorAll("style")].filter((style) => style.textContent?.includes(`data-boxel-theme-scope="${testRealmURL}forest-green-theme-`));
-			assert.strictEqual(copies().length, 2, "each card emits its own copy");
-			assert.strictEqual(copies().filter((style) => !style.disabled).length, 1, "exactly one copy participates in style matching");
-			assert.strictEqual(computedProperty(`[data-test-card="${cardId}"]`, "--primary"), "#2e7d32", "the first card resolves the theme variables");
-			assert.strictEqual(computedProperty(`[data-test-card="${otherCardId}"]`, "--primary"), "#2e7d32", "the second card resolves the theme variables");
-			copies().find((style) => !style.disabled).remove();
-			await new Promise((resolve) => setTimeout(resolve, 0));
-			assert.strictEqual(copies().length, 1, "one copy remains");
-			assert.false(copies()[0].disabled, "the surviving copy is re-enabled");
-			assert.strictEqual(computedProperty(`[data-test-card="${otherCardId}"]`, "--primary"), "#2e7d32", "the theme stays applied after the active copy is removed");
-		});
-	});
-});
-//#endregion