@c9up/nebula 0.1.2 → 0.1.4

package/src/cli/diff.ts

@@ -0,0 +1,114 @@
+/**
+ * `nebula diff` — which copied components no longer match the package.
+ *
+ * The counterpart to `add`. Copying is one-way by design, so a fix released
+ * upstream never reaches a project on its own and nothing anywhere says so:
+ * not the lockfile, not `pnpm update`, not the file itself. This is the report
+ * that makes that visible.
+ *
+ * It answers with the *reason* a file differs, not just that it does. Every
+ * copied component is expected to diverge from upstream eventually — that is
+ * what owning the source means — so "differs" alone would flag the whole tree
+ * and mean nothing. The hash recorded at copy time is what separates a change
+ * you made from one you have not seen yet.
+ */
+
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { defaultPaths, type Language, type NebulaPaths } from "../config.js";
+import { detectLanguage } from "./add.js";
+import { hashOf, readManifest } from "./manifest.js";
+import { loadRegistry, packageRoot } from "./registry.js";
+
+export type DiffState =
+	/** Copy, record and package all agree. */
+	| "same"
+	/** The package moved and the copy is untouched — a re-copy loses nothing. */
+	| "outdated"
+	/** The copy was edited; the package has not moved. */
+	| "edited"
+	/** Both moved. The only state that needs a decision. */
+	| "conflict"
+	/** Copied before anything was recorded, and it no longer matches. */
+	| "unknown";
+
+export interface DiffEntry {
+	/** Path as the registry names it, relative to the components root. */
+	file: string;
+	state: DiffState;
+}
+
+export interface DiffOptions {
+	cwd: string;
+	paths?: Partial<NebulaPaths>;
+	language?: Language;
+}
+
+export interface DiffResult {
+	entries: DiffEntry[];
+	language: Language;
+}
+
+/**
+ * Compare every copied component against the installed package.
+ *
+ * Only files that are actually in the project are considered — the registry
+ * lists everything nebula ships, and a component nobody copied is not news.
+ */
+export function diff(options: DiffOptions): DiffResult {
+	const paths = { ...defaultPaths, ...options.paths };
+	const target = join(options.cwd, paths.components);
+	const language = options.language ?? detectLanguage(target) ?? "js";
+
+	const root = packageRoot(join(options.cwd, "package.json"));
+	const sourceRoot = join(root, language === "ts" ? "src" : "dist");
+	const registry = loadRegistry(join(root, "registry.json"));
+	const manifest = readManifest(target);
+
+	const entries: DiffEntry[] = [];
+	const seen = new Set<string>();
+
+	for (const item of registry.items) {
+		for (const file of item.files) {
+			// The registry names `.ts` paths; the compiled tree mirrors it exactly.
+			const relative = language === "ts" ? file : file.replace(/\.ts$/, ".js");
+			if (seen.has(relative)) continue;
+			seen.add(relative);
+
+			const copied = join(target, relative);
+			if (!existsSync(copied)) continue;
+
+			const state = compare({
+				copy: hashOf(copied),
+				source: hashOf(join(sourceRoot, relative)),
+				recorded: manifest.files[relative],
+			});
+			if (state !== "same") entries.push({ file: relative, state });
+		}
+	}
+
+	entries.sort((a, b) => a.file.localeCompare(b.file));
+	return { entries, language };
+}
+
+function compare(hashes: {
+	copy: string | undefined;
+	source: string | undefined;
+	recorded: string | undefined;
+}): DiffState {
+	const { copy, source, recorded } = hashes;
+	// Nothing to compare against: the package no longer ships this file, so
+	// whatever is in the project is now the only copy of it.
+	if (source === undefined) return "same";
+	if (copy === source) return "same";
+
+	// Copied before the manifest existed. The two differ, and there is no way
+	// to tell which side moved.
+	if (recorded === undefined) return "unknown";
+
+	const copyTouched = copy !== recorded;
+	const sourceMoved = source !== recorded;
+	if (copyTouched && sourceMoved) return "conflict";
+	if (sourceMoved) return "outdated";
+	return "edited";
+}

package/src/cli/manifest.ts

@@ -0,0 +1,80 @@
+/**
+ * What a copied component looked like when it was copied.
+ *
+ * The registry model hands you the source and steps back: from then on the file
+ * is yours, and nothing upgrades it. That is the point, and it is also the one
+ * thing it cannot tell you — when a component is fixed upstream, the copy in
+ * your project stays as it was, and no install, lockfile or `pnpm update`
+ * mentions it. shadcn has the same gap.
+ *
+ * Recording the hash of what was copied is what closes it. With it, three
+ * different situations stop looking alike:
+ *
+ *   - the file still matches what was copied → upstream moving is a safe re-copy
+ *   - the file was edited and upstream has not moved → nothing to do
+ *   - both moved → a decision, and the only case that needs a person
+ *
+ * Without it, every edited component reads as "differs from upstream", which is
+ * true of all of them by design and therefore says nothing.
+ */
+
+import { createHash } from "node:crypto";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+/** Lives beside the components it describes, so moving the tree keeps it. */
+export const MANIFEST_FILE = ".nebula.json";
+
+export interface Manifest {
+	/** Component path (as the registry names it) → hash of the copied bytes. */
+	files: Record<string, string>;
+}
+
+/** Content hash of a file's bytes, or `undefined` when it is not there. */
+export function hashOf(path: string): string | undefined {
+	if (!existsSync(path)) return undefined;
+	return createHash("sha256").update(readFileSync(path)).digest("hex");
+}
+
+/**
+ * Read the manifest for a component tree.
+ *
+ * A missing or unreadable one is an empty manifest, never an error: a project
+ * that copied components before this existed still has to work, and it simply
+ * has nothing recorded yet.
+ */
+export function readManifest(componentsRoot: string): Manifest {
+	const path = join(componentsRoot, MANIFEST_FILE);
+	if (!existsSync(path)) return { files: {} };
+	try {
+		const parsed: unknown = JSON.parse(readFileSync(path, "utf8"));
+		if (typeof parsed !== "object" || parsed === null) return { files: {} };
+		const files = Reflect.get(parsed, "files");
+		if (typeof files !== "object" || files === null) return { files: {} };
+		const entries: Record<string, string> = {};
+		for (const [key, value] of Object.entries(files)) {
+			if (typeof value === "string") entries[key] = value;
+		}
+		return { files: entries };
+	} catch {
+		return { files: {} };
+	}
+}
+
+/** Merge new entries in and write the manifest back, sorted for a clean diff. */
+export function writeManifest(
+	componentsRoot: string,
+	added: Record<string, string>,
+): void {
+	const existing = readManifest(componentsRoot);
+	const merged = { ...existing.files, ...added };
+	const sorted: Record<string, string> = {};
+	for (const key of Object.keys(merged).sort()) {
+		const value = merged[key];
+		if (value !== undefined) sorted[key] = value;
+	}
+	writeFileSync(
+		join(componentsRoot, MANIFEST_FILE),
+		`${JSON.stringify({ files: sorted }, null, 2)}\n`,
+	);
+}

package/src/configure.ts

@@ -16,7 +16,10 @@
  * its adapters run at build time. An empty provider would be ceremony.
  */
 
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
 import { adapterFor, isAdapterName } from "./adapters/index.js";
+import type { GeneratedFile } from "./adapters/types.js";
 import { type AdapterName, resolveConfig } from "./config.js";
 
 /**
@@ -96,9 +99,23 @@ export async function configure(
 	// line of Rust and without waiting on a release of the binary.
 	await codemods.registerCommand("@c9up/nebula/commands/add");
 	await codemods.registerCommand("@c9up/nebula/commands/list");
+	await codemods.registerCommand("@c9up/nebula/commands/diff");
 
-	for (const file of adapter.files(config)) {
-		await codemods.writeFile(file.path, file.contents);
+	const generated = adapter.files(config);
+	for (const file of generated) {
+		// `skipIfExists` is the adapter saying the app owns this file. Pass it
+		// through rather than relying on the codemod's default, so the contract
+		// is the thing that decides.
+		await codemods.writeFile(file.path, file.contents, {
+			force: !file.skipIfExists,
+		});
+	}
+
+	const gaps: Array<{ path: string; missing: string[] }> = [];
+	for (const file of generated) {
+		if (!file.skipIfExists) continue;
+		const missing = await missingFrom(file);
+		if (missing.length > 0) gaps.push({ path: file.path, missing });
 	}
 
 	// On stderr, and never installed on the user's behalf. nebula declares no
@@ -128,7 +145,60 @@ export async function configure(
 	lines.push(
 		"  Then add components with `ream nebula:add button card` — they are copied",
 		"  into your project and are yours to edit.",
-		"",
 	);
+
+	for (const gap of gaps) {
+		lines.push(
+			"",
+			`  ${gap.path} already existed, so it was left alone — it is yours.`,
+			"  The components resolve against tokens it does not define:",
+			...gap.missing.map((token) => `      ${token}`),
+			"",
+			'  Import nebula\'s theme (`@import "@c9up/nebula/theme.css"` plus the',
+			"  `@theme inline` block), or declare them yourself. Without them the",
+			"  utilities still compile and every colour resolves to nothing.",
+		);
+	}
+
+	lines.push("");
 	process.stderr.write(lines.join("\n"));
 }
+
+/**
+ * Which of the tokens the components resolve against are absent from the
+ * stylesheet that was left in place.
+ *
+ * `skipIfExists` means an app's own stylesheet is never overwritten, which is
+ * right — it is theirs once it exists. The cost is that a project that already
+ * had one gets the components copied in and nothing for them to resolve
+ * against. Nothing throws, every class name is present in the markup, and the
+ * page comes out grey.
+ *
+ * Tokens rather than directives, because there is more than one correct way to
+ * supply them: importing nebula's theme, or declaring `--color-*` directly in
+ * an `@theme` block. Only the second half of that is checkable by reading, so
+ * the import short-circuits the question.
+ */
+async function missingFrom(file: GeneratedFile): Promise<string[]> {
+	let existing: string;
+	try {
+		existing = await readFile(resolve(process.cwd(), file.path), "utf8");
+	} catch {
+		// No file to read means nothing was skipped: it was written as generated.
+		return [];
+	}
+	if (existing.includes("@c9up/nebula/theme.css")) return [];
+	return colorTokensOf(file.contents).filter(
+		(token) => !new RegExp(`${token}\\s*:`).test(existing),
+	);
+}
+
+/** The `--color-*` names a generated stylesheet makes available. */
+function colorTokensOf(css: string): string[] {
+	const found = new Set<string>();
+	for (const match of css.matchAll(/(--color-[a-z-]+)\s*:/g)) {
+		const name = match[1];
+		if (name !== undefined) found.add(name);
+	}
+	return [...found];
+}

package/src/console/DiffCommand.ts

@@ -0,0 +1,103 @@
+/**
+ * `ream nebula:diff` — which copied components no longer match the package.
+ *
+ * `nebula:add` hands you the source and steps back, so a fix released upstream
+ * never reaches a project on its own. Nothing else reports that: the files are
+ * local, no lockfile mentions them and `pnpm update` does not touch them. This
+ * is the one place it becomes visible.
+ */
+
+import { type DiffState, diff } from "../cli/diff.js";
+import { flag, type NebulaCommandClass } from "./contract.js";
+
+/** What each state means, and what to do about it. */
+const EXPLAIN: Record<DiffState, string> = {
+	same: "",
+	outdated: "the package moved, your copy is untouched — re-copy loses nothing",
+	edited: "you changed it; the package has not moved",
+	conflict: "you changed it AND the package moved — read both before copying",
+	unknown: "copied before nebula recorded hashes; cannot tell which side moved",
+};
+
+export default class NebulaDiffCommand {
+	static commandName = "nebula:diff";
+	static description =
+		"Report copied components that no longer match the installed package";
+
+	// Files only; nothing here needs the container or a booted app.
+	static options = { startApp: false };
+
+	static args = [];
+
+	static flags = [
+		flag("ts", "boolean", {
+			description: "Compare against the TypeScript sources",
+		}),
+		flag("js", "boolean", {
+			description: "Compare against the compiled JavaScript",
+		}),
+	];
+
+	static help = [
+		"  ream nebula:diff",
+		"",
+		"Components are copied, so nothing upgrades them. This says which ones the",
+		"package has since changed, and separates that from the edits you made —",
+		"every component is expected to diverge eventually, so 'differs' alone",
+		"would flag the whole tree and say nothing.",
+		"",
+		"Update one with `ream nebula:add <name> --force`, after reading the change",
+		"if you had edited it.",
+	];
+
+	ts = false;
+	js = false;
+
+	async run(): Promise<void> {
+		const result = diff({
+			cwd: process.cwd(),
+			language: this.ts ? "ts" : this.js ? "js" : undefined,
+		});
+
+		if (result.entries.length === 0) {
+			process.stdout.write(
+				"\n  Every copied component matches the installed package.\n\n",
+			);
+			return;
+		}
+
+		const width = Math.max(...result.entries.map((e) => e.file.length));
+		const out: string[] = [""];
+		for (const entry of result.entries) {
+			out.push(
+				`  ${entry.state.padEnd(9)} ${entry.file.padEnd(width)}  ${EXPLAIN[entry.state]}`,
+			);
+		}
+
+		const outdated = result.entries.filter(
+			(entry) => entry.state === "outdated",
+		);
+		if (outdated.length > 0) {
+			out.push(
+				"",
+				`  ${outdated.length} can be updated with no loss:`,
+				`    ream nebula:add --force ${outdated.map(componentOf).join(" ")}`,
+			);
+		}
+		out.push("");
+		process.stdout.write(out.join("\n"));
+	}
+}
+
+/** `molecules/InputGroup.js` → `input-group`, as the registry names it. */
+function componentOf(entry: { file: string }): string {
+	const base = entry.file.split("/").pop() ?? entry.file;
+	return base
+		.replace(/\.(ts|js)$/, "")
+		.replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+		.toLowerCase();
+}
+
+// Fails the build if the class drifts from what the kernel dispatches against.
+const _contract: NebulaCommandClass = NebulaDiffCommand;
+void _contract;

package/src/molecules/InputGroup.ts

@@ -11,6 +11,7 @@
  */
 
 import { component, html } from "@c9up/aurora";
+import { Input, type InputProps } from "../atoms/Input.js";
 import { type Slot, slot } from "../lib/children.js";
 import { cn } from "../lib/cn.js";
 import { type Reactive, read } from "../lib/props.js";
@@ -30,9 +31,14 @@ export interface InputGroupProps {
 /**
  * Strip the inner input of its own chrome.
  *
- * Exported so a caller passing a plain `<input>` rather than nebula's `Input`
- * can apply it too — without this the input draws a second border inside the
- * group's, which is the one way this component visibly goes wrong.
+ * Put these ON the input. The group cannot do it from the outside: a descendant
+ * variant like `[&_input]:border-0` has to exist as a literal for Tailwind to
+ * generate a rule for it, and building one by joining this string at runtime
+ * produces class names no stylesheet ever defines — the input keeps its border
+ * and draws a second one inside the group's, with nothing raised to say so.
+ *
+ * {@link InputGroupInput} applies them for you. This export is for a caller
+ * passing a plain `<input>` instead.
  */
 export const inputGroupControlClasses =
 	"flex-1 border-0 bg-transparent px-0 shadow-none outline-none focus-visible:border-0 focus-visible:ring-0 disabled:opacity-100";
@@ -48,7 +54,6 @@ export const InputGroup = component<InputGroupProps>((props) => {
 				"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
 				"aria-invalid:border-destructive aria-invalid:ring-destructive/20",
 				"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				`[&_input]:${inputGroupControlClasses.split(" ").join(" [&_input]:")}`,
 				read(props.class),
 			)}"
 	>
@@ -56,6 +61,21 @@ export const InputGroup = component<InputGroupProps>((props) => {
 	</div>`;
 });
 
+/**
+ * The input that belongs inside an {@link InputGroup}.
+ *
+ * Same component as {@link Input}, with the group's stripping applied first so
+ * a caller's own `class` still wins. This is where the classes have to live:
+ * the group carries the border and the ring, and the input has to bring none
+ * of its own.
+ */
+export const InputGroupInput = component<InputProps>((props) =>
+	Input({
+		...props,
+		class: () => cn(inputGroupControlClasses, read(props.class)),
+	}),
+);
+
 export const InputGroupAddon = styledDiv(
 	"input-group-addon",
 	"text-muted-foreground flex shrink-0 items-center gap-2 [&_svg:not([class*='size-'])]:size-4",

package/src/molecules/index.ts

@@ -78,6 +78,7 @@ export {
 export {
 	InputGroup,
 	InputGroupAddon,
+	InputGroupInput,
 	type InputGroupProps,
 	inputGroupControlClasses,
 } from "./InputGroup.js";

package/src/organisms/Form.ts

@@ -89,7 +89,15 @@ export function Form<T>(props: FormProps<T>): ReturnType<typeof html> {
 		novalidate
 		class="${() => cn("flex flex-col gap-6", read(props.class))}"
 		@submit="${(event: Event) => {
-			void props.form.handleSubmit(event);
+			// A DOM listener returns nothing, so this promise is nobody's to
+			// await. `command.run` always resolves — failures route to
+			// `onFail` — but `validate()` runs first, and a validator that
+			// throws rejects here: the form would silently do nothing and leave
+			// a bare `Uncaught (in promise)` behind. Reported, so the thing
+			// that broke is the thing the console names.
+			void props.form.handleSubmit(event).catch((error: unknown) => {
+				console.error("[nebula] Form submit failed:", error);
+			});
 		}}"
 	>${slot(props.children)}</form>`;
 }

package/src/primitives/floating.ts

@@ -438,7 +438,7 @@ function isRightToLeft(element: HTMLElement): boolean {
 /**
  * Watch elements for size changes, where the platform supports it.
  *
- * happy-dom (nebula's unit-test environment) has no `ResizeObserver`, and the
+ * jsdom (nebula's unit-test environment) has no `ResizeObserver`, and the
  * scroll and resize listeners already cover the common cases, so its absence
  * degrades rather than throws.
  */

package/src/primitives/focusTrap.ts

@@ -23,6 +23,21 @@
 
 import { firstFocusable, focusableWithin, focusSilently } from "./focusable.js";
 
+/**
+ * Every active trap, in the order they were created — innermost last.
+ *
+ * Only the last one acts. `contains` was the guard before, on the assumption
+ * that a nested dialog is a DESCENDANT of the one it opened over. Every modal
+ * surface here is portalled to `document.body`, so two open dialogs are
+ * SIBLINGS: each trap saw the other's focus as outside itself and pulled it
+ * back, and the focus bounced between them until it settled in the wrong one.
+ *
+ * A stack is also what makes release order not matter: an outer surface that
+ * closes first splices itself out, and whichever trap is innermost then is the
+ * one holding focus.
+ */
+const active: object[] = [];
+
 export interface FocusTrapOptions {
 	/**
 	 * Where focus goes when the trap activates. Defaults to the first focusable
@@ -56,6 +71,19 @@ export function focusTrap(
 ): FocusTrap {
 	const previouslyFocused = activeElement();
 
+	/**
+	 * This trap's identity in the {@link active} stack, pushed BEFORE the
+	 * initial focus: moving focus fires `focusin`, and a trap that was not yet
+	 * on the stack had its own initial focus reclaimed by the one below it.
+	 */
+	const token = {};
+	active.push(token);
+
+	/** Whether this is the trap the user is actually inside. */
+	function isTopmost(): boolean {
+		return active[active.length - 1] === token;
+	}
+
 	if (!container.hasAttribute("tabindex")) {
 		container.setAttribute("tabindex", "-1");
 	}
@@ -68,6 +96,7 @@ export function focusTrap(
 
 	function onKeyDown(event: KeyboardEvent): void {
 		if (event.key !== "Tab") return;
+		if (!isTopmost()) return;
 
 		const focusables = focusableWithin(container);
 		if (focusables.length === 0) {
@@ -94,11 +123,11 @@ export function focusTrap(
 	/**
 	 * Pull focus back when it lands outside by any route other than Tab.
 	 *
-	 * Guarded on `contains`, and only ever moves focus *into* the trap, so it
-	 * cannot fight a nested trap: an inner dialog's container is a descendant
-	 * of the outer one, so the outer handler sees the focus as already inside.
+	 * Only the topmost trap does this. See {@link active}: guarding on
+	 * `contains` alone made two portalled siblings fight over the focus.
 	 */
 	function onFocusIn(event: FocusEvent): void {
+		if (!isTopmost()) return;
 		const target = event.target;
 		if (!(target instanceof Node)) return;
 		if (container.contains(target)) return;
@@ -113,6 +142,9 @@ export function focusTrap(
 		release(): void {
 			if (released) return;
 			released = true;
+			// Spliced, not popped: surfaces do not always close innermost-first.
+			const index = active.indexOf(token);
+			if (index !== -1) active.splice(index, 1);
 			document.removeEventListener("keydown", onKeyDown, true);
 			document.removeEventListener("focusin", onFocusIn, true);
 

package/src/primitives/focusable.ts

@@ -30,24 +30,90 @@ const FOCUSABLE_SELECTOR = [
 	"[tabindex]",
 ].join(",");
 
+/**
+ * Does a collapsed `<details>` hide this element?
+ *
+ * Nothing else in this file can answer it. A browser refuses to render the
+ * contents of a closed `<details>`, yet it still hands out a full box for
+ * them: Chromium reports `offsetParent: <body>`, a 62x21 rect and
+ * `display: inline-block` for a button inside one, while `checkVisibility()`
+ * answers false and `focus()` silently does nothing. Layout lies here and the
+ * computed styles lie with it, so only the markup can be asked.
+ *
+ * The `<summary>` is the exception: it is the part that stays rendered, and it
+ * is focusable in both states. The walk continues past an open `<details>`
+ * because a nested one can still sit inside a collapsed parent.
+ */
+function isInsideClosedDetails(el: HTMLElement): boolean {
+	for (
+		let details = el.closest("details");
+		details !== null;
+		details = details.parentElement?.closest("details") ?? null
+	) {
+		if (details.open) continue;
+		const summary = details.querySelector(":scope > summary");
+		if (summary === null || !summary.contains(el)) return true;
+	}
+	return false;
+}
+
+/**
+ * The next node up, leaving a shadow tree by its host.
+ *
+ * `parentElement` is null for the top node of a shadow tree — what sits above
+ * it is a DocumentFragment, not an Element — so an ancestor walk stops at the
+ * boundary and never sees a host that is `display: none`. The node inside then
+ * keeps its own `display: inline-block` and reads as rendered while the browser
+ * gives it a zero-sized box.
+ */
+function ancestorOf(node: HTMLElement): HTMLElement | null {
+	if (node.parentElement !== null) return node.parentElement;
+	const root = node.getRootNode();
+	return root instanceof ShadowRoot && root.host instanceof HTMLElement
+		? root.host
+		: null;
+}
+
 /**
  * Is the element rendered and interactive right now?
  *
- * `offsetParent === null` catches `display: none` on the element or any
- * ancestor in one property read, which is much cheaper than walking the tree.
- * It reports null for `position: fixed` elements too, so those fall through to
- * the explicit style checks — that branch is why dialogs and popovers, which
- * are routinely fixed, are not wrongly treated as hidden.
+ * `offsetParent` is a layout answer, and only a real layout engine has one to
+ * give. An element there is positive proof that this node is rendered, so it
+ * stays the cheap fast path. Its *absence* proves nothing: a browser reports
+ * null for `position: fixed` nodes and for `<body>`, and a headless DOM has no
+ * layout at all — jsdom answers null for every element alike, happy-dom does
+ * not implement the property. Reading that absence as "hidden" is what makes
+ * the check fall through to the styles instead of answering from it.
+ *
+ * The fallback walks the ancestors because `display` does not inherit: a node
+ * with `display: block` inside a `display: none` container is still not
+ * rendered. `visibility` does inherit, so the element's own value settles it,
+ * and the walk crosses shadow boundaries because the host can hide the tree.
  */
 export function isVisible(el: HTMLElement): boolean {
 	if (el.hasAttribute("inert")) return false;
 	if (el.closest("[inert]") !== null) return false;
 
-	if (el.offsetParent !== null) return true;
+	// These two settle before the fast path because they are the cases layout
+	// answers *wrongly* rather than not at all: `offsetParent` reports a
+	// confident ancestor for a node the browser will not render or focus.
+	if (!el.isConnected) return false;
+	if (isInsideClosedDetails(el)) return false;
+
+	if (el.offsetParent instanceof Element) return true;
 
-	const style = getComputedStyle(el);
-	if (style.position !== "fixed") return false;
-	return style.display !== "none" && style.visibility !== "hidden";
+	const own = getComputedStyle(el);
+	if (own.visibility === "hidden" || own.visibility === "collapse")
+		return false;
+
+	for (
+		let node: HTMLElement | null = el;
+		node !== null;
+		node = ancestorOf(node)
+	) {
+		if (getComputedStyle(node).display === "none") return false;
+	}
+	return true;
 }
 
 /**