svelte-kit-vice/scripts/__plane-open.mjs

/**
 * §12.9 — measure the OPENED surface of every portaled adopter, before vs after.
 *
 * The shared probe measures 1 node on these components: it never opens them, so a
 * "0 diffs" there proves nothing about the plane, which paints exactly the surface
 * the probe cannot see (the 6.bis law: count the nodes before believing anything).
 *
 * The "before" is reproduced AT RUNTIME instead of reverting the file: inject the
 * plane's appearance rules at their OLD specificity (0,1,0), appended last so they
 * win by order — which is what they did in dev, measured. Whatever moves between
 * the two reads is exactly what the `:where()` flip changed on that surface.
 */
import { chromium } from 'playwright';

const OLD_PLANE = `
[data-depth='raised'] { background: var(--depth-raised-surface); font-family: var(--style-label-font-family); line-height: var(--leading-ui); border: var(--border-width) solid var(--depth-raised-border); box-shadow: var(--depth-raised-shadow), var(--depth-raised-halo); }
[data-depth='overlay'] { background: var(--depth-overlay-surface); font-family: var(--style-label-font-family); line-height: var(--leading-ui); border: var(--border-width) solid var(--depth-overlay-border); box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo); }
[data-depth='modal'] { background: var(--depth-modal-surface); font-family: var(--style-label-font-family); line-height: var(--leading-ui); border: var(--border-width) solid var(--depth-modal-border); box-shadow: var(--depth-modal-shadow), var(--depth-modal-halo); }
`;

const PROPS = [
	'backgroundColor',
	'backgroundImage',
	'borderTopColor',
	'borderTopWidth',
	'borderInlineStartColor',
	'borderInlineStartWidth',
	'boxShadow',
	'fontFamily',
	'lineHeight',
	'color',
	'borderRadius'
];

/** component → [how to open, surface selector]. `hover` for the ones that open on pointer. */
const CASES = [
	['dialog', 'click', '[data-dialog-content]'],
	['drawer', 'click', '[data-drawer-content]'],
	['dropdown-menu', 'click', '[data-dropdown-menu-content]'],
	['popover', 'click', '[data-popover-content]'],
	['select', 'click', '[data-select-content]'],
	['combobox', 'click', '[data-combobox-content]'],
	['menubar', 'click', '[data-menubar-content]'],
	['tooltip', 'hover', '[data-tooltip-content]'],
	['link-preview', 'hover', '[data-link-preview-content]'],
	['navigation-menu', 'hover', '[data-navigation-menu-content]'],
	['context-menu', 'context', '[data-context-menu-content]']
];

const browser = await chromium.launch();
const report = [];

for (const [comp, how, surface] of CASES) {
	const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
	const url = `http://localhost:5180/uix/components/${comp}`;
	try {
		try {
			await page.goto(url, { waitUntil: 'networkidle', timeout: 25000 });
		} catch {
			await page.goto(url, { waitUntil: 'load', timeout: 25000 });
		}
		await page.waitForTimeout(1500);
		await page.addStyleTag({
			content: '*, *::before, *::after { transition: none !important; animation: none !important; }'
		});

		const trigger = page.locator(`[data-${comp}-trigger]`).first();
		if (!(await trigger.count())) {
			report.push({ comp, err: 'no trigger' });
			await page.close();
			continue;
		}
		if (how === 'click') await trigger.click({ timeout: 5000 }).catch(() => {});
		else if (how === 'hover') await trigger.hover({ timeout: 5000 }).catch(() => {});
		else await trigger.click({ button: 'right', timeout: 5000 }).catch(() => {});
		await page.waitForTimeout(900);

		const res = await page.evaluate(
			({ surface, PROPS, OLD_PLANE }) => {
				const nodes = [...document.querySelectorAll(surface)];
				if (!nodes.length) return { err: 'surface not mounted' };
				const snap = () =>
					nodes.map((n) => {
						const cs = getComputedStyle(n);
						const o = {};
						for (const p of PROPS) o[p] = cs[p];
						return o;
					});
				const after = snap(); // current code = :where()
				const st = document.createElement('style');
				st.textContent = OLD_PLANE; // reproduce the old (0,1,0), appended last
				document.head.append(st);
				const before = snap();
				st.remove();
				const diffs = [];
				after.forEach((a, i) => {
					for (const p of PROPS)
						if (a[p] !== before[i][p]) diffs.push({ node: i, prop: p, antes: before[i][p], despues: a[p] });
				});
				return { nodes: nodes.length, depth: nodes[0].getAttribute('data-depth'), diffs };
			},
			{ surface, PROPS, OLD_PLANE }
		);
		report.push({ comp, ...res });
	} catch (e) {
		report.push({ comp, err: String(e).slice(0, 80) });
	}
	await page.close();
}

await browser.close();
for (const r of report) {
	if (r.err) {
		console.log(`${r.comp.padEnd(18)} ⚠ ${r.err}`);
		continue;
	}
	const head = `${r.comp.padEnd(18)} nodos=${r.nodes} depth=${r.depth} diffs=${r.diffs.length}`;
	console.log(head);
	for (const d of r.diffs.slice(0, 8))
		console.log(`    ${d.prop}: «${String(d.antes).slice(0, 46)}» → «${String(d.despues).slice(0, 46)}»`);
}