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

package/bundled-test-harness/assets/overlay-menu-items-test-Bl2k0aAa.js

@@ -0,0 +1,317 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { Ar as testRealmURL } from "./runtime-common-ClpqhbwG.js";
+import { D as baseRealm, F as getMenuItems } 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 OperatorModeContainer } from "./container-Dj-5prh9.js";
+import { M as waitUntil, a as find, d as click, l as triggerEvent, o as waitFor } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { D as realmConfigCardJSON, F as setupLocalIndexing, H as testModuleRealm, I as setupOnSave, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-DPQ0j2MD.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import { n as renderComponent } from "./render-component-B15Z0e2v.js";
+//#region tests/integration/components/overlay-menu-items-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var loader;
+var setCardInOperatorModeState;
+(0, import_qunit.module)("Integration | overlay-menu-items", function(hooks) {
+	let noop = () => {};
+	setupRenderingTest(hooks);
+	setupOperatorModeStateCleanup(hooks);
+	hooks.beforeEach(async function() {
+		loader = getService("loader-service").loader;
+	});
+	setupLocalIndexing(hooks);
+	setupOnSave(hooks);
+	setupCardLogs(hooks, async () => await loader.import("@cardstack/base/card-api"));
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [
+			baseRealm.url,
+			testRealmURL,
+			testModuleRealm
+		],
+		realmPermissions: {
+			[testRealmURL]: ["read", "write"],
+			[testModuleRealm]: ["read", "write"]
+		},
+		autostart: true
+	});
+	hooks.beforeEach(async function() {
+		setCardInOperatorModeState = (leftCards) => {
+			getService("operator-mode-state-service").restore({ stacks: [leftCards.map((url) => ({
+				type: "card",
+				id: url,
+				format: "isolated"
+			}))] });
+		};
+		let cardApi;
+		let string;
+		let markdownFileDef;
+		cardApi = await loader.import("@cardstack/base/card-api");
+		string = await loader.import("@cardstack/base/string");
+		markdownFileDef = await loader.import("@cardstack/base/markdown-file-def");
+		let { field, contains, linksTo, CardDef, Component } = cardApi;
+		let { default: StringField } = string;
+		let { MarkdownDef } = markdownFileDef;
+		class CardWithCustomMenu extends CardDef {
+			static displayName = "Card With Custom Menu";
+			static {
+				decorateFieldV2(this.prototype, "title", [field], function() {
+					return contains(StringField);
+				});
+			}
+			#title = (initializeDeferredDecorator(this, "title"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(StringField, { computeVia: function() {
+						return this.title;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			[getMenuItems](params) {
+				let menuItems = super[getMenuItems](params);
+				menuItems.push({
+					label: "Custom Action",
+					action: () => {}
+				});
+				return menuItems;
+			}
+			static embedded = class Embedded extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "010MBIgC",
+						"block": "[[[10,1],[15,\"data-test-custom-card\",[30,1,[\"title\"]]],[12],[8,[30,2,[\"title\"]],null,null,null],[13]],[\"@model\",\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/overlay-menu-items-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ParentCard extends CardDef {
+			static displayName = "Parent Card";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(StringField);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "linkedCard", [field], function() {
+					return linksTo(CardWithCustomMenu);
+				});
+			}
+			#linkedCard = (initializeDeferredDecorator(this, "linkedCard"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(StringField, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "19X19R5M",
+						"block": "[[[10,\"h2\"],[15,\"data-test-parent\",[30,1,[\"name\"]]],[12],[8,[30,2,[\"name\"]],null,null,null],[13],[1,\"\\n\"],[8,[30,2,[\"linkedCard\"]],null,null,null]],[\"@model\",\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/overlay-menu-items-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		class ParentWithFile extends CardDef {
+			static displayName = "Parent With File";
+			static {
+				decorateFieldV2(this.prototype, "name", [field], function() {
+					return contains(StringField);
+				});
+			}
+			#name = (initializeDeferredDecorator(this, "name"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "markdown", [field], function() {
+					return linksTo(MarkdownDef);
+				});
+			}
+			#markdown = (initializeDeferredDecorator(this, "markdown"), void 0);
+			static {
+				decorateFieldV2(this.prototype, "cardTitle", [field], function() {
+					return contains(StringField, { computeVia: function() {
+						return this.name;
+					} });
+				});
+			}
+			#cardTitle = (initializeDeferredDecorator(this, "cardTitle"), void 0);
+			static isolated = class Isolated extends Component {
+				static {
+					setComponentTemplate(templateFactory({
+						"id": "vVa7gGCo",
+						"block": "[[[10,\"h2\"],[15,\"data-test-parent-with-file\",[30,1,[\"name\"]]],[12],[8,[30,2,[\"name\"]],null,null,null],[13],[1,\"\\n\"],[8,[30,2,[\"markdown\"]],null,null,null]],[\"@model\",\"@fields\"],[]]",
+						"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/overlay-menu-items-test.gts",
+						"isStrictMode": true
+					}), this);
+				}
+			};
+		}
+		await setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"card-with-custom-menu.gts": { CardWithCustomMenu },
+				"parent-card.gts": { ParentCard },
+				"parent-with-file.gts": { ParentWithFile },
+				"ParentWithFile/notes.md": "# Hello\n\nMarkdown content for the FileDef overlay test.",
+				"index.json": { data: {
+					type: "card",
+					meta: { adoptsFrom: {
+						module: "@cardstack/base/cards-grid",
+						name: "CardsGrid"
+					} }
+				} },
+				"CardWithCustomMenu/1.json": { data: {
+					type: "card",
+					attributes: { title: "My Custom Card" },
+					meta: { adoptsFrom: {
+						module: "../card-with-custom-menu",
+						name: "CardWithCustomMenu"
+					} }
+				} },
+				"ParentCard/1.json": { data: {
+					type: "card",
+					attributes: { name: "My Parent" },
+					relationships: { linkedCard: { links: { self: `${testRealmURL}CardWithCustomMenu/1` } } },
+					meta: { adoptsFrom: {
+						module: "../parent-card",
+						name: "ParentCard"
+					} }
+				} },
+				"ParentWithFile/1.json": { data: {
+					type: "card",
+					attributes: { name: "My Parent With File" },
+					relationships: { markdown: {
+						links: { self: "./notes.md" },
+						data: {
+							type: "file-meta",
+							id: "./notes.md"
+						}
+					} },
+					meta: { adoptsFrom: {
+						module: "../parent-with-file",
+						name: "ParentWithFile"
+					} }
+				} },
+				"realm.json": realmConfigCardJSON({
+					name: "Test Workspace 1",
+					backgroundURL: "/test-fixtures/realm-images/pawel-czerwinski-Ly-ZLa-A5jti-Y-unsplash.jpg",
+					iconURL: "/test-fixtures/realm-images/boxel-logo.png"
+				})
+			}
+		});
+	});
+	(0, import_qunit.test)("linked card overlay menu shows \"View card\" item", async function(assert) {
+		setCardInOperatorModeState([`${testRealmURL}ParentCard/1`]);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "DOsRusI8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/overlay-menu-items-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-card="${testRealmURL}CardWithCustomMenu/1"]`);
+		await triggerEvent(`[data-test-card="${testRealmURL}CardWithCustomMenu/1"]`, "mouseenter");
+		await waitFor(`[data-test-overlay-card="${testRealmURL}CardWithCustomMenu/1"] [data-test-overlay-more-options]`);
+		await click(`[data-test-overlay-card="${testRealmURL}CardWithCustomMenu/1"] [data-test-overlay-more-options]`);
+		assert.dom("[data-test-boxel-menu-item-text=\"View card\"]").exists("View card menu item is displayed for linked card");
+	});
+	(0, import_qunit.test)("linked card overlay menu shows card-specific custom menu items from getMenuItems()", async function(assert) {
+		setCardInOperatorModeState([`${testRealmURL}ParentCard/1`]);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "DOsRusI8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/overlay-menu-items-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		await waitFor(`[data-test-card="${testRealmURL}CardWithCustomMenu/1"]`);
+		await triggerEvent(`[data-test-card="${testRealmURL}CardWithCustomMenu/1"]`, "mouseenter");
+		await waitFor(`[data-test-overlay-card="${testRealmURL}CardWithCustomMenu/1"] [data-test-overlay-more-options]`);
+		await click(`[data-test-overlay-card="${testRealmURL}CardWithCustomMenu/1"] [data-test-overlay-more-options]`);
+		assert.dom("[data-test-boxel-menu-item-text=\"Custom Action\"]").exists("card-specific custom menu item is displayed for linked card in overlay");
+		assert.dom("[data-test-boxel-menu-item-text=\"View card\"]").exists("View card menu item is also present");
+		assert.dom("[data-test-boxel-menu-item-text=\"Copy Card URL\"]").exists("Copy Card URL menu item is also present");
+	});
+	(0, import_qunit.test)("linked FileDef overlay menu uses file-specific labels", async function(assert) {
+		setCardInOperatorModeState([`${testRealmURL}ParentWithFile/1`]);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "DOsRusI8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/overlay-menu-items-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		let fileURL = `${testRealmURL}ParentWithFile/notes.md`;
+		let fileCardSelector = `[data-test-overlay-card="${fileURL}"]`;
+		await waitFor(`[data-test-card="${fileURL}"]`);
+		await triggerEvent(`[data-test-card="${fileURL}"]`, "mouseenter");
+		await waitFor(`${fileCardSelector} [data-test-overlay-more-options]`);
+		assert.dom(`${fileCardSelector} [data-test-overlay-label]`).containsText("Markdown", "type-label tab uses the FileDef's displayName, not the generic 'Card' fallback");
+		await click(`${fileCardSelector} [data-test-overlay-more-options]`);
+		assert.dom("[data-test-boxel-menu-item-text=\"View file\"]").exists("menu shows View file, not View card");
+		assert.dom("[data-test-boxel-menu-item-text=\"View card\"]").doesNotExist("the card-flavored label is suppressed for file targets");
+		assert.dom("[data-test-boxel-menu-item-text=\"Copy File URL\"]").exists("menu shows Copy File URL, not Copy Card URL");
+		assert.dom("[data-test-boxel-menu-item-text=\"Copy Card URL\"]").doesNotExist("the card-flavored URL label is suppressed for file targets");
+	});
+	(0, import_qunit.test)("hover type-label tab anchors left while it fits and clamps to the corner radius when it overflows, and stays inside the containing card", async function(assert) {
+		setCardInOperatorModeState([`${testRealmURL}ParentCard/1`]);
+		await renderComponent(class TestDriver extends Component {
+			static {
+				setComponentTemplate(templateFactory({
+					"id": "DOsRusI8",
+					"block": "[[[8,[32,0],null,[[\"@onClose\"],[[32,1]]],null]],[],[]]",
+					"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/overlay-menu-items-test.gts",
+					"scope": () => [OperatorModeContainer, noop],
+					"isStrictMode": true
+				}), this);
+			}
+		});
+		let cardSelector = `[data-test-card="${testRealmURL}CardWithCustomMenu/1"]`;
+		let parentSelector = `[data-test-card="${testRealmURL}ParentCard/1"]`;
+		let overlaySelector = `[data-test-overlay-card="${testRealmURL}CardWithCustomMenu/1"]`;
+		await waitFor(cardSelector);
+		await triggerEvent(cardSelector, "mouseenter");
+		let label = await waitFor(`${overlaySelector} [data-test-overlay-label]`);
+		let card = find(cardSelector);
+		let boundary = find(parentSelector);
+		await waitUntil(() => label.style.left.endsWith("px"), { timeout: 1e3 });
+		let labelRect = label.getBoundingClientRect();
+		let cardRect = card.getBoundingClientRect();
+		let boundaryRect = boundary.getBoundingClientRect();
+		let radius = parseFloat(window.getComputedStyle(card).borderTopRightRadius);
+		if (label.hasAttribute("data-overflow")) {
+			assert.ok(Math.abs(cardRect.right - labelRect.right - (radius - 4)) <= 2, "overflowing label's right edge sits at the card's corner-radius point");
+			assert.ok(labelRect.left < cardRect.left, "overflowing label extends past the card left edge");
+		} else {
+			assert.ok(Math.abs(labelRect.left - (cardRect.left - 4)) <= 2, "fitting label is anchored to the card's left edge");
+			assert.ok(labelRect.right <= cardRect.right - radius + 2, "fitting label's right edge stays before the corner-radius point");
+		}
+		assert.ok(labelRect.left >= boundaryRect.left - 4, "label left edge stays inside the containing card");
+		assert.ok(labelRect.right <= boundaryRect.right + 4, "label right edge stays inside the containing card");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/overlays-CdN_JokA.js

@@ -0,0 +1,270 @@
+import "./chunk-Rp0pCe6z.js";
+import { n as decorateMethodV2, r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import "./runtime-common-ClpqhbwG.js";
+import { y as rri } from "./paths-BYHDgqsT.js";
+import { S as isEqual, m as omit } from "./lodash-DnaZ_rzx.js";
+import { V as localId } from "./constants-CqKWhRfY.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { d as action, r as service } from "./service-LFpJ8EEP.js";
+import { H as templateFactory, m as htmlSafe } from "./index-DaCZcoCY-CgzbilMy.js";
+import { n as registerDestructor } from "./destroyable-mdLYRn_o.js";
+import { n as buildTask } from "./async-arrow-runtime-STsj7E8Y.js";
+import { t as array } from "./helper-m6jA5HmU.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import { n as tracked } from "./tracking-800VJb8b.js";
+import "./template-factory-ds9s0u8l.js";
+import "./template-C81fYDrq.js";
+import { n as VelcroModifier } from "./dist-CdNZu43l.js";
+//#region app/components/operator-mode/overlays.gts
+var UNCLIPPED_EDGE = "-100vmax";
+function stickyHeaderClipPath(refTop, headerBottom) {
+	let clipTop = Math.max(0, headerBottom - refTop);
+	return clipTop > 0 ? `inset(${clipTop}px ${UNCLIPPED_EDGE} ${UNCLIPPED_EDGE} ${UNCLIPPED_EDGE})` : "";
+}
+function stickyClipHeaderFor(reference) {
+	return reference.closest("[data-overlay-clip-container]")?.querySelector("[data-overlay-clip-header]") ?? null;
+}
+function applyStickyHeaderClip(reference, floating) {
+	let clipPath = "";
+	if (reference instanceof HTMLElement) {
+		let header = stickyClipHeaderFor(reference);
+		if (header) clipPath = stickyHeaderClipPath(reference.getBoundingClientRect().top, header.getBoundingClientRect().bottom);
+	}
+	floating.style.clipPath = clipPath;
+}
+var Overlays = class extends Component {
+	static {
+		decorateFieldV2(this.prototype, "overlayClassName", [tracked], function() {
+			return this.args.overlayClassName ?? "base-overlay";
+		});
+	}
+	#overlayClassName = (initializeDeferredDecorator(this, "overlayClassName"), void 0);
+	boundRenderedCardElements = /* @__PURE__ */ new Map();
+	constructor(owner, args) {
+		super(owner, args);
+		registerDestructor(this, () => this.teardownBoundRenderedCards());
+	}
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "zBzDH4gb",
+			"block": "[[[42,[28,[31,1],[[28,[31,1],[[30,0,[\"renderedCardsForOverlayActionsWithEvents\"]]],null]],null],null,[[[44,[[30,1,[\"cardDefOrId\"]],[28,[30,0,[\"getCardId\"]],[[30,1,[\"cardDefOrId\"]]],null],[28,[30,0,[\"isSelected\"]],[[30,1,[\"cardDefOrId\"]]],null]],[[[41,[28,[30,0,[\"shouldRenderOverlay\"]],[[30,1],[30,4]],null],[[[1,\"      \"],[11,0],[16,0,[30,0,[\"overlayClassName\"]]],[16,5,[30,1,[\"overlayZIndexStyle\"]]],[24,\"data-test-card-overlay\",\"\"],[17,5],[24,\"data-scopedcss-79c9a9c5cc-f5f2508cd7\",\"\"],[4,[32,0],[[30,1,[\"element\"]]],[[\"middleware\"],[[28,[32,1],[[30,0,[\"offset\"]]],null]]]],[12],[1,\"\\n        \"],[18,6,[[30,1],[30,2],[30,3],[30,4],[28,[30,0,[\"isHovered\"]],[[30,1]],null]]],[1,\"\\n      \"],[13],[1,\"\\n\"]],[]],null]],[2,3,4]]]],[1]],null]],[\"renderedCard\",\"cardDefOrId\",\"cardId\",\"isSelected\",\"&attrs\",\"&default\"],[\"each\",\"-track-array\",\"let\",\"if\",\"yield\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/app/components/operator-mode/overlays.gts",
+			"scope": () => [VelcroModifier, array],
+			"isStrictMode": true
+		}), this);
+	}
+	static {
+		decorateFieldV2(this.prototype, "cardService", [service]);
+	}
+	#cardService = (initializeDeferredDecorator(this, "cardService"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "realm", [service]);
+	}
+	#realm = (initializeDeferredDecorator(this, "realm"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "currentlyHoveredCard", [tracked], function() {
+			return null;
+		});
+	}
+	#currentlyHoveredCard = (initializeDeferredDecorator(this, "currentlyHoveredCard"), void 0);
+	hoverClearTimer = null;
+	get hoverClearDelayMs() {
+		return 0;
+	}
+	offset = {
+		name: "offset",
+		fn: (state) => {
+			let { elements } = state;
+			let { floating, reference } = elements;
+			let refRect = reference.getBoundingClientRect();
+			floating.style.width = refRect.width + "px";
+			floating.style.height = refRect.height + "px";
+			floating.style.position = "absolute";
+			if (reference instanceof Element) floating.style.borderRadius = window.getComputedStyle(reference).borderRadius;
+			applyStickyHeaderClip(reference, floating);
+			let offsetParent = floating.offsetParent;
+			let parentRect = offsetParent ? offsetParent.getBoundingClientRect() : new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+			let scaleX = offsetParent && offsetParent.offsetWidth > 0 ? parentRect.width / offsetParent.offsetWidth : 1;
+			let scaleY = offsetParent && offsetParent.offsetHeight > 0 ? parentRect.height / offsetParent.offsetHeight : 1;
+			if (!Number.isFinite(scaleX) || scaleX === 0) scaleX = 1;
+			if (!Number.isFinite(scaleY) || scaleY === 0) scaleY = 1;
+			return {
+				x: (refRect.left - parentRect.left) / scaleX,
+				y: (refRect.top - parentRect.top) / scaleY
+			};
+		}
+	};
+	get renderedCardsForOverlayActionsWithEvents() {
+		let renderedCards = this.args.renderedCardsForOverlayActions.filter((renderedCard) => renderedCard.element.isConnected);
+		let currentElements = new Set(renderedCards.map((card) => card.element));
+		for (let [element, handlers] of this.boundRenderedCardElements) if (!currentElements.has(element)) this.unbindRenderedCardElement(element, handlers);
+		for (const renderedCard of renderedCards) {
+			if (this.boundRenderedCardElements.has(renderedCard.element)) continue;
+			let mouseenter = (_ev) => {
+				this.cancelHoverClear();
+				if (this.currentlyHoveredCard === renderedCard) return;
+				this.setCurrentlyHoveredCard(renderedCard);
+			};
+			let mouseleave = (ev) => {
+				if (ev.relatedTarget?.closest?.(`.${this.overlayClassName}`)) return;
+				this.scheduleHoverClear();
+			};
+			let click = (e) => {
+				e.stopPropagation();
+				if (this.shouldSwallowCardClick()) return;
+				this.openOrSelectCard(renderedCard.cardDefOrId, this.getFormatForCard(renderedCard), renderedCard.fieldType, renderedCard.fieldName);
+			};
+			renderedCard.element.addEventListener("mouseenter", mouseenter);
+			renderedCard.element.addEventListener("mouseleave", mouseleave);
+			renderedCard.element.addEventListener("click", click);
+			this.boundRenderedCardElements.set(renderedCard.element, {
+				mouseenter,
+				mouseleave,
+				click
+			});
+			renderedCard.element.style.cursor = "pointer";
+			renderedCard.overlayZIndexStyle = this.zIndexStyle(renderedCard.element, renderedCard.overlayZIndexStyle);
+		}
+		return renderedCards;
+	}
+	shouldRenderOverlay(renderedCard, isSelected) {
+		return isSelected || this.isHovered(renderedCard);
+	}
+	static {
+		decorateMethodV2(this.prototype, "shouldRenderOverlay", [action]);
+	}
+	getCardId(cardDefOrId) {
+		if (typeof cardDefOrId === "string") return cardDefOrId;
+		return cardDefOrId.id ?? cardDefOrId[localId];
+	}
+	static {
+		decorateMethodV2(this.prototype, "getCardId", [action]);
+	}
+	setCurrentlyHoveredCard(renderedCard) {
+		this.currentlyHoveredCard = renderedCard;
+	}
+	static {
+		decorateMethodV2(this.prototype, "setCurrentlyHoveredCard", [action]);
+	}
+	scheduleHoverClear() {
+		if (this.shouldDelayHoverClear()) return;
+		if (this.hoverClearTimer) return;
+		this.hoverClearTimer = setTimeout(() => {
+			this.hoverClearTimer = null;
+			if (this.shouldDelayHoverClear()) {
+				this.scheduleHoverClear();
+				return;
+			}
+			this.setCurrentlyHoveredCard(null);
+		}, this.hoverClearDelayMs);
+	}
+	static {
+		decorateMethodV2(this.prototype, "scheduleHoverClear", [action]);
+	}
+	cancelHoverClear() {
+		if (this.hoverClearTimer) {
+			clearTimeout(this.hoverClearTimer);
+			this.hoverClearTimer = null;
+		}
+	}
+	/**
+	* Hook for subclasses to pin the current hover state. While this returns
+	* true, scheduleHoverClear is a no-op and any in-flight timer re-schedules
+	* itself. Use for "the cursor logically left but we don't want to dismiss
+	* the chrome yet" — e.g. a dropdown opened from the chrome is now floating
+	* in a portal outside the overlay.
+	*/
+	static {
+		decorateMethodV2(this.prototype, "cancelHoverClear", [action]);
+	}
+	shouldDelayHoverClear() {
+		return false;
+	}
+	/**
+	* Hook for subclasses to suppress the default card-open behavior on click.
+	* Use when the overlay has floating chrome whose outside-click dismissal
+	* shouldn't also trigger card navigation (e.g. clicking outside an open
+	* dropdown menu).
+	*/
+	shouldSwallowCardClick() {
+		return false;
+	}
+	openOrSelectCard(cardDefOrId, format = "isolated", fieldType, fieldName) {
+		if (this.args.toggleSelect && this.args.selectedCards?.size) this.args.toggleSelect(cardDefOrId);
+		else if (this.args.onSelectCard) this.args.onSelectCard(cardDefOrId);
+		else this.viewCard.perform(cardDefOrId, format, fieldType, fieldName);
+	}
+	static {
+		decorateMethodV2(this.prototype, "openOrSelectCard", [action]);
+	}
+	isSelected(cardDefOrId) {
+		if (!this.args.selectedCards) return false;
+		if (this.args.selectedCards.has(cardDefOrId)) return true;
+		if (typeof cardDefOrId !== "string" && cardDefOrId.id) return this.args.selectedCards.has(cardDefOrId.id);
+		return false;
+	}
+	static {
+		decorateMethodV2(this.prototype, "isSelected", [action]);
+	}
+	isHovered(renderedCard) {
+		return isEqual(omit(this.currentlyHoveredCard, ["overlayZIndexStyle"]), omit(renderedCard, ["overlayZIndexStyle"]));
+	}
+	static {
+		decorateMethodV2(this.prototype, "isHovered", [action]);
+	}
+	isField(renderedCard) {
+		return renderedCard.fieldType === "contains" || renderedCard.fieldType === "linksTo" || renderedCard.fieldType === "linksToMany";
+	}
+	viewCard = buildTask(() => ({
+		context: this,
+		generator: function* (cardDefOrId, format = "isolated", fieldType, fieldName) {
+			let cardId = typeof cardDefOrId === "string" ? cardDefOrId : cardDefOrId.id;
+			format = this.realm.canWrite(cardId) ? format : "isolated";
+			if (this.args.viewCard) {
+				let target = typeof cardDefOrId === "string" ? rri(cardDefOrId) : cardDefOrId;
+				yield this.args.viewCard(target, format, this.buildViewCardOpts(cardDefOrId, fieldType, fieldName));
+			}
+		}
+	}), null, "viewCard", "drop");
+	buildViewCardOpts(_cardDefOrId, fieldType, fieldName) {
+		return {
+			fieldType,
+			fieldName
+		};
+	}
+	zIndexStyle(element, overlayZIndexStyle) {
+		if (overlayZIndexStyle) return overlayZIndexStyle;
+		let parentElement = element.parentElement;
+		if (!parentElement) return htmlSafe("z-index: auto");
+		let zIndexParentElement = window.getComputedStyle(parentElement).getPropertyValue("z-index");
+		return htmlSafe(`z-index: ${zIndexParentElement === "auto" ? zIndexParentElement : String(Number(zIndexParentElement) + 1)}`);
+	}
+	/**
+	* Gets the format to use when opening or selecting a card
+	* Override this in subclasses to customize format behavior
+	*/
+	getFormatForCard(renderedCard) {
+		if (renderedCard.format === "data") return "isolated";
+		return renderedCard.format || "isolated";
+	}
+	static {
+		decorateMethodV2(this.prototype, "getFormatForCard", [action]);
+	}
+	unbindRenderedCardElement(element, handlers) {
+		element.removeEventListener("mouseenter", handlers.mouseenter);
+		element.removeEventListener("mouseleave", handlers.mouseleave);
+		element.removeEventListener("click", handlers.click);
+		this.boundRenderedCardElements.delete(element);
+	}
+	teardownBoundRenderedCards() {
+		for (let [element, handlers] of this.boundRenderedCardElements) this.unbindRenderedCardElement(element, handlers);
+		if (this.hoverClearTimer) {
+			clearTimeout(this.hoverClearTimer);
+			this.hoverClearTimer = null;
+		}
+		this.currentlyHoveredCard = null;
+	}
+};
+//#endregion
+export { stickyHeaderClipPath as i, applyStickyHeaderClip as n, stickyClipHeaderFor as r, Overlays as t };

package/bundled-test-harness/assets/overlays-clip-test-DpbR1ZTz.js

@@ -0,0 +1,91 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { i as stickyHeaderClipPath, n as applyStickyHeaderClip, r as stickyClipHeaderFor } from "./overlays-CdN_JokA.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+//#region tests/unit/overlays-clip-test.ts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+(0, import_qunit.module)("Unit | overlays | stickyHeaderClipPath", function() {
+	(0, import_qunit.test)("no clip while the card sits below the sticky header", function(assert) {
+		assert.strictEqual(stickyHeaderClipPath(100, 50), "");
+	});
+	(0, import_qunit.test)("no clip when the card top is flush with the header bottom", function(assert) {
+		assert.strictEqual(stickyHeaderClipPath(50, 50), "");
+	});
+	(0, import_qunit.test)("clips the strip that has slid behind the header", function(assert) {
+		assert.strictEqual(stickyHeaderClipPath(20, 50), "inset(30px -100vmax -100vmax -100vmax)");
+	});
+	(0, import_qunit.test)("clamps to no clip when the card top is far below the header", function(assert) {
+		assert.strictEqual(stickyHeaderClipPath(500, 50), "");
+	});
+});
+(0, import_qunit.module)("Unit | overlays | stickyClipHeaderFor", function() {
+	function makeContainer() {
+		let container = document.createElement("div");
+		container.setAttribute("data-overlay-clip-container", "");
+		let header = document.createElement("div");
+		header.setAttribute("data-overlay-clip-header", "");
+		let card = document.createElement("div");
+		container.append(header, card);
+		return {
+			container,
+			header,
+			card
+		};
+	}
+	(0, import_qunit.test)("finds the sticky header for a card inside a marked container", function(assert) {
+		let { header, card } = makeContainer();
+		assert.strictEqual(stickyClipHeaderFor(card), header);
+	});
+	(0, import_qunit.test)("returns null for a card outside any marked container", function(assert) {
+		let card = document.createElement("div");
+		assert.strictEqual(stickyClipHeaderFor(card), null);
+	});
+	(0, import_qunit.test)("scopes to the nearest container when editors are nested", function(assert) {
+		let outer = makeContainer();
+		let inner = makeContainer();
+		outer.container.append(inner.container);
+		assert.strictEqual(stickyClipHeaderFor(inner.card), inner.header);
+		assert.strictEqual(stickyClipHeaderFor(outer.card), outer.header);
+	});
+});
+(0, import_qunit.module)("Unit | overlays | applyStickyHeaderClip", function(hooks) {
+	let mounted = [];
+	hooks.afterEach(function() {
+		mounted.forEach((el) => el.remove());
+		mounted = [];
+	});
+	function mountCard(cardTop) {
+		let container = document.createElement("div");
+		container.setAttribute("data-overlay-clip-container", "");
+		let header = document.createElement("div");
+		header.setAttribute("data-overlay-clip-header", "");
+		header.style.cssText = "position: fixed; top: 0; left: 0; width: 200px; height: 50px;";
+		let card = document.createElement("div");
+		card.style.cssText = `position: fixed; left: 0; top: ${cardTop}px; width: 200px; height: 200px;`;
+		container.append(header, card);
+		document.body.append(container);
+		mounted.push(container);
+		return card;
+	}
+	(0, import_qunit.test)("clips the overlay while the card sits behind the sticky header", function(assert) {
+		let card = mountCard(20);
+		let floating = document.createElement("div");
+		applyStickyHeaderClip(card, floating);
+		assert.notStrictEqual(floating.style.clipPath, "", "a clip is applied");
+		assert.ok(floating.style.clipPath.includes("30px"), "the clip reads the live rects — the top 30px behind the header is cut");
+	});
+	(0, import_qunit.test)("clears the clip once the card scrolls clear of the header", function(assert) {
+		let card = mountCard(100);
+		let floating = document.createElement("div");
+		floating.style.clipPath = "inset(30px -100vmax -100vmax -100vmax)";
+		applyStickyHeaderClip(card, floating);
+		assert.strictEqual(floating.style.clipPath, "", "the stale clip is cleared when nothing occludes the card");
+	});
+	(0, import_qunit.test)("clears the clip for a card outside any marked container", function(assert) {
+		let card = document.createElement("div");
+		let floating = document.createElement("div");
+		floating.style.clipPath = "inset(30px -100vmax -100vmax -100vmax)";
+		applyStickyHeaderClip(card, floating);
+		assert.strictEqual(floating.style.clipPath, "", "no container, no clip");
+	});
+});
+//#endregion