@maple-kit/lint 0.1.0

package/dist/page/page.iife.js

@@ -0,0 +1,425 @@
+(function() {
+	//#region ../core/src/anchor/selector.ts
+	const ID = /^[A-Za-z][\w-]*$/;
+	function cssPathTo(element, root = document) {
+		if (!contains(root, element)) return void 0;
+		const identifier = uniqueId(element, root);
+		if (identifier) return identifier;
+		const steps = [];
+		for (let current = element; current; current = current.parentElement) {
+			steps.unshift(step(current));
+			const selector = steps.join(" > ");
+			if (root.querySelectorAll(selector).length === 1) return selector;
+		}
+	}
+	function uniqueId(element, root) {
+		const { id } = element;
+		if (!id || !ID.test(id)) return void 0;
+		const selector = `#${id}`;
+		return root.querySelectorAll(selector).length === 1 ? selector : void 0;
+	}
+	function step(element) {
+		const tag = element.tagName.toLowerCase();
+		const parent = element.parentElement;
+		if (!parent) return tag;
+		const siblings = [...parent.children].filter((child) => child.tagName === element.tagName);
+		if (siblings.length === 1) return tag;
+		return `${tag}:nth-of-type(${siblings.indexOf(element) + 1})`;
+	}
+	function contains(root, element) {
+		return root === element.ownerDocument || root.contains(element);
+	}
+	//#endregion
+	//#region ../core/src/anchor/text-position.ts
+	const SKIPPED = /* @__PURE__ */ new Set([
+		"SCRIPT",
+		"STYLE",
+		"NOSCRIPT",
+		"TEMPLATE",
+		"IFRAME"
+	]);
+	function indexText(root) {
+		const segments = [];
+		let text = "";
+		const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, { acceptNode: (node) => isVisible(node.parentElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT });
+		let current = walker.nextNode();
+		while (current) {
+			const node = current;
+			const { length } = node.data;
+			if (length > 0) {
+				segments.push({
+					node,
+					start: text.length,
+					end: text.length + length
+				});
+				text += node.data;
+			}
+			current = walker.nextNode();
+		}
+		return {
+			text,
+			segments
+		};
+	}
+	function isVisible(element) {
+		for (let current = element; current; current = current.parentElement) {
+			if (SKIPPED.has(current.tagName)) return false;
+			if (current.hasAttribute("data-maple-overlay")) return false;
+			if (current.hasAttribute("hidden") || current.getAttribute("aria-hidden") === "true") return false;
+		}
+		return true;
+	}
+	//#endregion
+	//#region ../core/src/anchor/describe.ts
+	const CONTEXT_LENGTH = 32;
+	const MAXIMUM_QUOTE = 300;
+	function describeElement(element, options = {}) {
+		const root = options.root ?? element.ownerDocument;
+		const index = indexText(root);
+		const span = spanOf(index, element);
+		return {
+			...attributesOf(element),
+			...span ? { quote: quoteAt(index, span.start, span.end, options) } : {},
+			...withSelector(element, root)
+		};
+	}
+	function attributesOf(element) {
+		const key = closestAttribute(element, "data-maple-key");
+		const source = closestAttribute(element, "data-maple-src");
+		const component = closestAttribute(element, "data-maple-name");
+		return {
+			...key === void 0 ? {} : { key },
+			...source === void 0 ? {} : { source },
+			...component === void 0 ? {} : { component }
+		};
+	}
+	function withSelector(element, root) {
+		const selector = cssPathTo(element, root);
+		return selector === void 0 ? {} : { selector };
+	}
+	function closestAttribute(element, name) {
+		return element.closest(`[${name}]`)?.getAttribute(name) ?? void 0;
+	}
+	function quoteAt(index, start, end, options) {
+		const context = options.contextLength ?? CONTEXT_LENGTH;
+		const limit = options.maximumQuote ?? MAXIMUM_QUOTE;
+		const stop = Math.min(end, start + limit);
+		const prefix = index.text.slice(Math.max(0, start - context), start);
+		const suffix = index.text.slice(stop, stop + context);
+		return {
+			exact: index.text.slice(start, stop),
+			...prefix ? { prefix } : {},
+			...suffix ? { suffix } : {},
+			offset: start
+		};
+	}
+	function spanOf(index, element) {
+		const inside = index.segments.filter((segment) => element.contains(segment.node));
+		const first = inside[0];
+		const last = inside[inside.length - 1];
+		return first && last ? {
+			start: first.start,
+			end: last.end
+		} : void 0;
+	}
+	const MOCK_STATES = [
+		"empty",
+		"error",
+		"forbidden",
+		"loading",
+		"one",
+		"many",
+		"long",
+		"sparse",
+		"mixed"
+	];
+	var InvalidRecipeError = class extends Error {
+		issues;
+		name = "InvalidRecipeError";
+		constructor(issues) {
+			super(["Invalid mock recipe:", ...issues].join("\n  "));
+			this.issues = issues;
+		}
+	};
+	const KEY = /^[a-z]+:\S/;
+	const STATES = new Set(MOCK_STATES);
+	function parseRecipe(input) {
+		if (!isRecord(input)) throw new InvalidRecipeError(["a recipe is an object"]);
+		const issues = [...versionIssues(input["version"])];
+		const calls = parseCalls(input["calls"], issues);
+		const flags = parseFlags(input["flags"], issues);
+		const as = parseIdentity(input["as"], issues);
+		const { request, route } = input;
+		if (request !== void 0 && typeof request !== "string") issues.push("request: must be a string when present");
+		if (route !== void 0 && !(typeof route === "string" && route.startsWith("/"))) issues.push("route: must be a path pattern starting with \"/\" when present");
+		if (issues.length > 0) throw new InvalidRecipeError(issues);
+		return {
+			version: 2,
+			calls,
+			...flags === void 0 ? {} : { flags },
+			...as === void 0 ? {} : { as },
+			...typeof route === "string" ? { route } : {},
+			...typeof request === "string" ? { request } : {}
+		};
+	}
+	function versionIssues(version) {
+		if (version === 1 || version === 2) return [];
+		if (typeof version === "number" && version > 2) return [`version: ${version} is newer than this build reads (2)`];
+		return [`version: must be 1 or 2`];
+	}
+	function parseFlags(value, issues) {
+		if (value === void 0) return void 0;
+		if (!isRecord(value)) {
+			issues.push("flags: must be an object of flag keys when present");
+			return;
+		}
+		const flags = {};
+		for (const [key, flag] of Object.entries(value)) if (key.trim() === "") issues.push("flags: a flag key must not be blank");
+		else if (isFlagValue(flag)) flags[key] = structuredClone(flag);
+		else issues.push(`flags.${key}: must be a JSON value`);
+		return flags;
+	}
+	function isFlagValue(value) {
+		if (value === null || typeof value === "boolean" || typeof value === "string") return true;
+		if (typeof value === "number") return Number.isFinite(value);
+		if (Array.isArray(value)) return value.every(isFlagValue);
+		return isRecord(value) && Object.values(value).every(isFlagValue);
+	}
+	function parseIdentity(value, issues) {
+		if (value === void 0) return void 0;
+		if (!isRecord(value)) {
+			issues.push("as: must be an object when present");
+			return;
+		}
+		const { role, permissions } = value;
+		if (role === void 0 && permissions === void 0) issues.push("as: must name a role, permissions, or both");
+		const validRole = typeof role === "string" && role.trim() !== "";
+		if (role !== void 0 && !validRole) issues.push("as.role: must be a non-blank string");
+		const granted = parsePermissions(permissions, issues);
+		return {
+			...validRole ? { role } : {},
+			...granted === void 0 ? {} : { permissions: granted }
+		};
+	}
+	function parsePermissions(value, issues) {
+		if (value === void 0) return void 0;
+		if (!isRecord(value)) {
+			issues.push("as.permissions: must map each permission to true or false");
+			return;
+		}
+		const permissions = {};
+		for (const [key, granted] of Object.entries(value)) if (key.trim() === "") issues.push("as.permissions: a permission must not be blank");
+		else if (typeof granted === "boolean") permissions[key] = granted;
+		else issues.push(`as.permissions.${key}: must be true or false`);
+		return permissions;
+	}
+	function parseCalls(value, issues) {
+		if (!Array.isArray(value)) {
+			issues.push("calls: must be an array");
+			return [];
+		}
+		const seen = /* @__PURE__ */ new Set();
+		const calls = [];
+		value.forEach((entry, index) => {
+			const call = parseCall(entry, `calls.${index}`, issues);
+			if (call === void 0) return;
+			if (seen.has(call.key)) issues.push(`calls.${index}.key: "${call.key}" appears twice`);
+			seen.add(call.key);
+			calls.push(call);
+		});
+		return calls;
+	}
+	function parseCall(entry, path, issues) {
+		if (!isRecord(entry)) {
+			issues.push(`${path}: must be an object`);
+			return;
+		}
+		const { key, state } = entry;
+		const validKey = typeof key === "string" && KEY.test(key);
+		const validState = typeof state === "string" && STATES.has(state);
+		if (!validKey) issues.push(`${path}.key: must look like "codec:name"`);
+		if (!validState) issues.push(`${path}.state: must be one of ${MOCK_STATES.join(", ")}`);
+		return validKey && validState ? {
+			key,
+			state
+		} : void 0;
+	}
+	function isRecord(value) {
+		return typeof value === "object" && value !== null && !Array.isArray(value);
+	}
+	//#endregion
+	//#region ../core/src/mock/active.ts
+	const MOCK_HANDLE_KEY = Symbol.for("@maple-kit/mock.installed");
+	function activeRecipe() {
+		const handle = globalThis[MOCK_HANDLE_KEY];
+		if (typeof handle !== "object" || handle === null) return void 0;
+		const current = handle.current;
+		if (typeof current !== "function") return void 0;
+		try {
+			const recipe = current.call(handle);
+			return recipe === void 0 ? void 0 : parseRecipe(recipe);
+		} catch {
+			return;
+		}
+	}
+	//#endregion
+	//#region ../core/src/overlay/context.ts
+	const REGION_SELECTOR = "[role=\"dialog\"], [role=\"complementary\"], [role=\"navigation\"], dialog[open], details[open], [aria-expanded=\"true\"], [data-state=\"open\"]";
+	const MINIMUM_REGION_WIDTH = 24;
+	function captureContext(options = {}) {
+		const breakpoint = firstMatching(options.breakpoints);
+		const layout = options.layout?.();
+		const mock = activeRecipe();
+		return {
+			url: location.href,
+			viewport: viewport(),
+			scheme: matches("(prefers-color-scheme: dark)") ? "dark" : "light",
+			...breakpoint === void 0 ? {} : { breakpoint },
+			locale: navigator.language,
+			timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			reducedMotion: matches("(prefers-reduced-motion: reduce)"),
+			regions: regions(),
+			...layout === void 0 ? {} : { layout },
+			...mock === void 0 ? {} : { mock },
+			capturedAt: (/* @__PURE__ */ new Date()).toISOString()
+		};
+	}
+	function viewport() {
+		const visual = window.visualViewport;
+		return {
+			width: window.innerWidth,
+			height: window.innerHeight,
+			contentWidth: document.documentElement.clientWidth,
+			dpr: window.devicePixelRatio,
+			...visual ? { scale: visual.scale } : {}
+		};
+	}
+	function firstMatching(breakpoints) {
+		return breakpoints?.find(([, query]) => matches(query))?.[0];
+	}
+	function matches(query) {
+		return window.matchMedia(query).matches;
+	}
+	function regions() {
+		const found = [];
+		for (const element of document.querySelectorAll(REGION_SELECTOR)) {
+			const width = element.getBoundingClientRect().width;
+			if (width < MINIMUM_REGION_WIDTH) continue;
+			const label = accessibleName(element);
+			found.push({
+				role: element.getAttribute("role") ?? element.tagName.toLowerCase(),
+				...label === void 0 ? {} : { label },
+				width: Math.round(width)
+			});
+		}
+		return found;
+	}
+	function accessibleName(element) {
+		const label = element.getAttribute("aria-label")?.trim();
+		if (label) return label;
+		const id = element.getAttribute("aria-labelledby");
+		return (id ? document.getElementById(id)?.textContent?.trim() : void 0) || void 0;
+	}
+	//#endregion
+	//#region src/rendered/collect.ts
+	const INTERACTIVE_TAGS = [
+		"a",
+		"button",
+		"input",
+		"select",
+		"summary",
+		"textarea"
+	];
+	const INTERACTIVE_ROLES = [
+		"button",
+		"checkbox",
+		"link",
+		"menuitem",
+		"switch",
+		"tab"
+	];
+	const TEXT_CAP = 80;
+	function isInteractive(element) {
+		const tag = element.tagName.toLowerCase();
+		if (INTERACTIVE_TAGS.includes(tag)) return true;
+		const role = element.getAttribute("role");
+		if (role !== null && INTERACTIVE_ROLES.includes(role)) return true;
+		const tabIndex = element.getAttribute("tabindex");
+		return tabIndex !== null && Number.parseInt(tabIndex, 10) >= 0;
+	}
+	function isOpaque(color) {
+		if (color === "transparent") return false;
+		const alpha = /rgba?\([^)]*[,/]\s*([\d.]+)\s*\)/.exec(color);
+		return alpha === null || Number.parseFloat(alpha[1]) > 0;
+	}
+	function backdropOf(element) {
+		let node = element;
+		while (node !== null) {
+			const background = getComputedStyle(node).backgroundColor;
+			if (isOpaque(background)) return background;
+			node = node.parentElement;
+		}
+		return "rgb(255, 255, 255)";
+	}
+	function keyframeProperties(names) {
+		const wanted = names.split(",").map((name) => name.trim());
+		if (wanted.every((name) => name === "none" || name === "")) return [];
+		const found = /* @__PURE__ */ new Set();
+		for (const sheet of [...document.styleSheets]) {
+			let rules;
+			try {
+				rules = sheet.cssRules;
+			} catch {
+				continue;
+			}
+			collectKeyframes(rules, wanted, found);
+		}
+		return [...found];
+	}
+	function collectKeyframes(rules, wanted, found) {
+		for (const rule of [...rules]) {
+			if (!(rule instanceof CSSKeyframesRule) || !wanted.includes(rule.name)) continue;
+			for (const frame of [...rule.cssRules]) {
+				if (!(frame instanceof CSSKeyframeRule)) continue;
+				for (const property of [...frame.style]) found.add(property);
+			}
+		}
+	}
+	function paintsOwnText(element) {
+		return [...element.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim() !== "");
+	}
+	function recordOf(element) {
+		const style = getComputedStyle(element);
+		const box = element.getBoundingClientRect();
+		return {
+			anchor: describeElement(element),
+			tag: element.tagName.toLowerCase(),
+			text: (element.textContent ?? "").trim().slice(0, TEXT_CAP),
+			paintsText: paintsOwnText(element),
+			interactive: isInteractive(element),
+			color: style.color,
+			backgroundColor: style.backgroundColor,
+			backdrop: backdropOf(element),
+			fontSize: Number.parseFloat(style.fontSize),
+			fontWeight: Number.parseFloat(style.fontWeight),
+			width: box.width,
+			height: box.height,
+			transitionProperty: style.transitionProperty,
+			transitionDuration: style.transitionDuration,
+			animationName: style.animationName,
+			animationDuration: style.animationDuration,
+			animationProperties: keyframeProperties(style.animationName)
+		};
+	}
+	function readPage() {
+		const elements = [...document.querySelectorAll("[data-maple-src]")];
+		return {
+			context: captureContext(),
+			records: elements.map(recordOf)
+		};
+	}
+	//#endregion
+	//#region src/rendered/page.ts
+	window.__mapleLintRead = readPage;
+	//#endregion
+})();

package/dist/rendered/audit.d.ts

@@ -0,0 +1,79 @@
+import { Finding } from "../types.js";
+import { Logger } from "@maple-kit/core/logger";
+import { CommentContext } from "@maple-kit/core";
+import { Browser } from "playwright";
+//#region src/rendered/audit.d.ts
+/** One size the page is judged at. */
+export interface Viewport {
+  readonly width: number;
+  readonly height: number;
+}
+/** The viewports used when a host configures none: a phone, a tablet, a laptop. */
+export declare const DEFAULT_VIEWPORTS: readonly Viewport[];
+/** What a rendered run needs to know. */
+export interface RenderedLintOptions {
+  /** The preview's URL. */
+  readonly url: string;
+  /** CSS files the token set is read from, the same ones the static tier uses. */
+  readonly tokenFiles: readonly string[];
+  /**
+   * The sizes to judge at. Any list, any number: a wall display and no phone
+   * is as valid as the default. Omitted, `DEFAULT_VIEWPORTS` is used.
+   */
+  readonly viewports?: readonly Viewport[];
+  /**
+   * The preview platform's bypass, sent as request headers. Reviewer cookies
+   * are never used: a lint run is CI's and does not borrow a person's session.
+   */
+  readonly bypassHeaders?: Readonly<Record<string, string>>;
+  /** How long one page is given to load, in ms. Default 30000. */
+  readonly timeout?: number;
+  /**
+   * How long to wait after load before reading, in ms. Default 0. An app that
+   * paints after hydration needs a little; nothing else does.
+   */
+  readonly settleMs?: number;
+  /** An already-launched browser, which a test supplies and a run does not. */
+  readonly browser?: Browser;
+  /**
+   * Where a run says what it could not check. Defaults to warning through
+   * Maple's own logger; a host that captures its own passes one in.
+   */
+  readonly logger?: Logger;
+}
+/** A finished run: what was found, and the page it was found on. */
+export interface RenderedRun {
+  readonly findings: readonly Finding[];
+  /**
+   * The environment each finding was seen in, aligned with `findings`. A
+   * finding seen only at 375px carries 375px, not the run's widest viewport.
+   */
+  readonly contexts: readonly CommentContext[];
+  /** The widest viewport read, for a caller that wants one context. */
+  readonly context: CommentContext;
+}
+/** A finding and the environment it was first seen in. */
+export interface Seen {
+  readonly finding: Finding;
+  readonly context: CommentContext;
+}
+/** Findings from one viewport, kept apart so a dedupe can say where they were. */
+export interface Pass {
+  readonly viewport: Viewport;
+  readonly findings: readonly Finding[];
+  readonly context: CommentContext;
+  /** Colours this viewport painted that no rule could read. */
+  readonly unreadable: readonly string[];
+}
+/**
+ * One finding per place per rule. A finding at every viewport reads as it was
+ * written; one at only some names them, because "only on the phone" is most of
+ * what the reader needs to know.
+ */
+export declare function dedupe(passes: readonly Pass[]): readonly Seen[];
+/**
+ * Lints a live preview. Launches Chromium unless a browser is supplied, and
+ * closes only what it opened.
+ */
+export declare function lintRendered(options: RenderedLintOptions): Promise<RenderedRun>;
+//#endregion

package/dist/rendered/audit.js

@@ -0,0 +1,141 @@
+import { readTokenFiles } from "../tokens.js";
+import { reducedMotionFindings, renderedFindings, unreadableColors } from "./rules.js";
+import { existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { createLogger } from "@maple-kit/core/logger";
+import { toCommentContext } from "@maple-kit/core/overlay";
+//#region src/rendered/audit.ts
+const DEFAULT_VIEWPORTS = [
+	{
+		width: 375,
+		height: 812
+	},
+	{
+		width: 768,
+		height: 1024
+	},
+	{
+		width: 1440,
+		height: 900
+	}
+];
+function warnGaps(log, tokens, seen) {
+	for (const [name, value] of tokens.unreadable) log.warn("Token could not be read, so nothing is checked against it", {
+		token: name,
+		value
+	});
+	if (seen.length > 0) log.warn("Colours on the page could not be read, so they were not judged", { values: seen });
+	if (tokens.colors.size === 0) log.warn("No colour token was found, so the colour rule checked nothing", {});
+	if (tokens.fontSizes.size === 0) log.warn("No type token was found, so the type-scale rule checked nothing", { hint: "a type token is named --…-text-…, --…-font-… or --…-type-…" });
+}
+function label(viewport) {
+	return `${viewport.width}×${viewport.height}`;
+}
+function pageBundle() {
+	const path = fileURLToPath(new URL("../page/page.iife.js", import.meta.url));
+	if (existsSync(path)) return path;
+	throw new Error(`@maple-kit/lint: the page bundle is missing at ${path}. Run \`pnpm --filter @maple-kit/lint build\` before linting from source.`);
+}
+async function read(page) {
+	await page.addScriptTag({ path: pageBundle() });
+	return await page.evaluate(() => {
+		const run = window.__mapleLintRead;
+		if (!run) throw new Error("@maple-kit/lint: the page bundle did not install its reader.");
+		return run();
+	});
+}
+async function collect(context, visit) {
+	const { url, timeout, settleMs } = visit;
+	const page = await context.newPage();
+	try {
+		await page.goto(url, {
+			waitUntil: "load",
+			timeout
+		});
+		if (settleMs > 0) await page.waitForTimeout(settleMs);
+		return await read(page);
+	} finally {
+		await context.close();
+	}
+}
+async function auditViewport(browser, options, viewport, tokens) {
+	const shared = {
+		viewport,
+		bypassCSP: true,
+		...options.bypassHeaders === void 0 ? {} : { extraHTTPHeaders: options.bypassHeaders }
+	};
+	const visit = {
+		url: options.url,
+		timeout: options.timeout ?? 3e4,
+		settleMs: options.settleMs ?? 0
+	};
+	const seen = await collect(await browser.newContext(shared), visit);
+	const reduced = await collect(await browser.newContext({
+		...shared,
+		reducedMotion: "reduce"
+	}), visit);
+	return {
+		viewport,
+		context: toCommentContext(seen.context),
+		unreadable: unreadableColors(seen.records),
+		findings: [...renderedFindings(seen.records, tokens), ...reducedMotionFindings(reduced.records)]
+	};
+}
+function keyOf(found) {
+	const { key, source, component, selector } = found.anchor;
+	const place = [
+		key,
+		source,
+		component,
+		selector
+	].map((rung) => rung ?? "").join("\0");
+	return `${found.rule}\u0000${place}\u0000${found.message}`;
+}
+function dedupe(passes) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const pass of passes) for (const found of pass.findings) {
+		const group = groups.get(keyOf(found)) ?? {
+			found,
+			at: [],
+			context: pass.context
+		};
+		group.at.push(label(pass.viewport));
+		groups.set(keyOf(found), group);
+	}
+	return [...groups.values()].map(({ found, at, context }) => ({
+		finding: at.length === passes.length ? found : {
+			...found,
+			message: `${found.message} At ${at.join(", ")}.`
+		},
+		context
+	}));
+}
+async function launch() {
+	const { chromium } = await import("playwright");
+	return chromium.launch();
+}
+function widest(passes) {
+	const found = [...passes].sort((a, b) => b.viewport.width - a.viewport.width)[0];
+	if (!found) throw new Error("@maple-kit/lint: a run needs at least one viewport.");
+	return found.context;
+}
+async function lintRendered(options) {
+	const tokens = await readTokenFiles(options.tokenFiles);
+	const viewports = options.viewports ?? DEFAULT_VIEWPORTS;
+	const browser = options.browser ?? await launch();
+	try {
+		const passes = [];
+		for (const viewport of viewports) passes.push(await auditViewport(browser, options, viewport, tokens));
+		warnGaps(options.logger ?? createLogger({ level: "warn" }), tokens, [...new Set(passes.flatMap((pass) => pass.unreadable))]);
+		const seen = dedupe(passes);
+		return {
+			findings: seen.map((one) => one.finding),
+			contexts: seen.map((one) => one.context),
+			context: widest(passes)
+		};
+	} finally {
+		if (options.browser === void 0) await browser.close();
+	}
+}
+//#endregion
+export { DEFAULT_VIEWPORTS, dedupe, lintRendered };

package/dist/rendered/collect.d.ts

@@ -0,0 +1,45 @@
+import { PageContext } from "@maple-kit/core/overlay";
+import { Anchor } from "@maple-kit/core/anchor";
+//#region src/rendered/collect.d.ts
+/** One element's rendered state, as a rule needs to see it. */
+export interface StyleRecord {
+  /** Every rung the page could supply, from the cascade itself. */
+  readonly anchor: Anchor;
+  readonly tag: string;
+  /** Trimmed text, capped, for a message that can quote what it is about. */
+  readonly text: string;
+  /**
+   * Whether it paints text itself rather than only through a child, so an
+   * ancestor is not judged on a colour it never puts on screen.
+   */
+  readonly paintsText: boolean;
+  /** Whether a pointer is meant to hit it, which is what a touch target is. */
+  readonly interactive: boolean;
+  readonly color: string;
+  /** The element's own background, which is the value a token rule judges. */
+  readonly backgroundColor: string;
+  /** The first opaque background at or above it, which is what contrast sees. */
+  readonly backdrop: string;
+  readonly fontSize: number;
+  readonly fontWeight: number;
+  readonly width: number;
+  readonly height: number;
+  readonly transitionProperty: string;
+  readonly transitionDuration: string;
+  readonly animationName: string;
+  readonly animationDuration: string;
+  /** Properties the running animation's keyframes declare, when readable. */
+  readonly animationProperties: readonly string[];
+}
+/** One pass over the page: what was on it, and what it was being shown in. */
+export interface Reading {
+  readonly context: PageContext;
+  readonly records: readonly StyleRecord[];
+}
+/**
+ * Reads every tagged element, and the page they are on. Returns plain data:
+ * only what survives structured cloning comes back out of the browser, and a
+ * rule should not hold a live node it might read a second, different value from.
+ */
+export declare function readPage(): Reading;
+//#endregion