@plitzi/sdk-dev-tools 0.37.9 → 0.38.1

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesStyleList.mjs

@@ -3,16 +3,13 @@ import { useMemo as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesStyleList.tsx
 var i = ({ variables: i }) => {
-	let a = t(() => Object.keys(i ?? {}).reduce((e, t) => {
-		let n = i?.[t];
-		return n && Object.keys(n).forEach((r) => {
-			e.push({
-				name: r,
-				type: t === "color" ? "color" : "text",
-				value: n[r]
-			});
-		}), e;
-	}, []), [i]);
+	let a = t(() => Object.entries(i ?? {}).reduce((e, [t, n]) => (Object.keys(n).forEach((r) => {
+		e.push({
+			name: r,
+			type: t === "color" ? "color" : "text",
+			value: n[r]
+		});
+	}), e), []), [i]);
 	return a.length === 0 ? /* @__PURE__ */ n("div", {
 		className: "py-4 text-center text-xs text-zinc-400 italic dark:text-zinc-600",
 		children: "No style variables defined"

package/dist/components/DevToolsPanel/tabs/VariablesViewer/VariablesViewer.mjs

@@ -1,31 +1,31 @@
 import e from "./VariablesList.mjs";
 import t from "./VariablesStyleList.mjs";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useCommonStore as i } from "@plitzi/sdk-shared/store";
+import { useCommonStore as n } from "@plitzi/sdk-shared/store";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/VariablesViewer/VariablesViewer.tsx
 var a = () => {
-	let [[a, o, s]] = i([
+	let [[a, o, s]] = n([
 		"schema.variables",
 		"style.variables",
 		"runtime.sources.variables"
 	]);
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ i("div", {
 		className: "flex w-full flex-col gap-4 overflow-y-auto p-3",
-		children: [/* @__PURE__ */ r("section", {
+		children: [/* @__PURE__ */ i("section", {
 			className: "flex flex-col gap-1.5",
-			children: [/* @__PURE__ */ r("div", {
+			children: [/* @__PURE__ */ i("div", {
 				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-code" }), "Schema Variables"]
-			}), /* @__PURE__ */ n(e, {
+				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-code" }), "Schema Variables"]
+			}), /* @__PURE__ */ r(e, {
 				variables: a,
 				variablesParsed: s
 			})]
-		}), /* @__PURE__ */ r("section", {
+		}), /* @__PURE__ */ i("section", {
 			className: "flex flex-col gap-1.5",
-			children: [/* @__PURE__ */ r("div", {
+			children: [/* @__PURE__ */ i("div", {
 				className: "flex items-center gap-2 text-[10px] font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500",
-				children: [/* @__PURE__ */ n("i", { className: "fa-solid fa-palette" }), "Style Variables"]
-			}), /* @__PURE__ */ n(t, { variables: o })]
+				children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-palette" }), "Style Variables"]
+			}), /* @__PURE__ */ r(t, { variables: o })]
 		})]
 	});
 };

package/dist/highlight/index.d.ts

@@ -0,0 +1,2 @@
+import { default as useHighlightElement } from './useHighlightElement';
+export default useHighlightElement;

package/dist/highlight/index.mjs

@@ -0,0 +1,5 @@
+import e from "./useHighlightElement.mjs";
+//#region src/highlight/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/highlight/useHighlightElement.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Outlines an element on the page — every copy of it, a list row's elements being one per row — while `id` is set:
+ * the one way every tab points at what it is talking about.
+ */
+declare const useHighlightElement: (id: string | undefined) => void;
+export default useHighlightElement;

package/dist/{components/DevToolsPanel/tabs/TracingViewer → highlight}/useHighlightElement.mjs

@@ -1,5 +1,5 @@
 import { useEffect as e } from "react";
-//#region src/components/DevToolsPanel/tabs/TracingViewer/useHighlightElement.ts
+//#region src/highlight/useHighlightElement.ts
 var t = (t) => {
 	e(() => {
 		if (typeof document > "u" || !t) return;

package/dist/qa/QaContext.d.ts

@@ -0,0 +1,29 @@
+import { QaFindings } from './findings';
+import { QaCheck, QaSettings } from './qaSettings';
+import { ReactNode, RefObject } from 'react';
+export interface QaContextValue {
+    settings: QaSettings;
+    setSetting: <K extends Exclude<keyof QaSettings, 'checks'>>(key: K, value: QaSettings[K]) => void;
+    setCheck: (check: QaCheck, on: boolean) => void;
+    /** What the checks that are on found, the last time they looked. */
+    findings: QaFindings;
+    setFindings: (findings: QaFindings) => void;
+    /** Bumped to make the checks look again. */
+    round: number;
+    rescan: () => void;
+    /** The page's own box: what the tools draw over and what the checks look in — never the panel. */
+    pageRef: RefObject<HTMLElement | null>;
+    /** The element the inspector was clicked on, kept in the tab until another is. */
+    pinned: Element | undefined;
+    setPinned: (element: Element | undefined) => void;
+}
+declare const QaContext: import('react').Context<QaContextValue>;
+export type QaProviderProps = {
+    children?: ReactNode;
+    pageRef: RefObject<HTMLElement | null>;
+    /** The panel is folded away: what works on the page's own clicks and marks its elements stops with it. */
+    collapsed: boolean;
+};
+/** The QA tab's settings, kept in this browser, and what its checks found — shared by the tab and the layer. */
+export declare const QaProvider: ({ children, pageRef, collapsed }: QaProviderProps) => import('react').JSX.Element;
+export default QaContext;

package/dist/qa/QaContext.mjs

@@ -0,0 +1,73 @@
+import { NO_FINDINGS as e } from "./findings.mjs";
+import { QA_DEFAULTS as t } from "./qaSettings.mjs";
+import n from "@plitzi/plitzi-ui/hooks/useStorage";
+import { createContext as r, useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/qa/QaContext.tsx
+var l = r({
+	settings: t,
+	setSetting: () => void 0,
+	setCheck: () => void 0,
+	findings: e,
+	setFindings: () => void 0,
+	round: 0,
+	rescan: () => void 0,
+	pageRef: { current: null },
+	pinned: void 0,
+	setPinned: () => void 0
+});
+l.displayName = "QaContext";
+var u = ({ children: r, pageRef: u, collapsed: d }) => {
+	let [f, p] = n("plitzi-sdk-dev-tools-qa", t), [m, h] = s(e), [g, _] = s(0), [v, y] = s(), b = o(() => ({
+		...t,
+		...f,
+		checks: {
+			...t.checks,
+			...f.checks
+		}
+	}), [f]), x = i((e, t) => p((n) => ({
+		...n,
+		[e]: t
+	})), [p]), S = i((e, n) => p((r) => ({
+		...r,
+		checks: {
+			...t.checks,
+			...r.checks,
+			[e]: n
+		}
+	})), [p]), C = i(() => _((e) => e + 1), []);
+	a(() => {
+		d && (p((e) => ({
+			...e,
+			inspect: !1,
+			checks: t.checks
+		})), y(void 0));
+	}, [d, p]);
+	let w = o(() => ({
+		settings: b,
+		setSetting: x,
+		setCheck: S,
+		findings: m,
+		setFindings: h,
+		round: g,
+		rescan: C,
+		pageRef: u,
+		pinned: v,
+		setPinned: y
+	}), [
+		b,
+		x,
+		S,
+		m,
+		g,
+		C,
+		u,
+		v
+	]);
+	return /* @__PURE__ */ c(l, {
+		value: w,
+		children: r
+	});
+};
+//#endregion
+export { u as QaProvider, l as default };

package/dist/qa/QaLayer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * What the QA tab has on, applied to the page — mounted with the dev tools whether the panel is open or not, so a
+ * tester can fold the panel away and keep the grid.
+ *
+ * Its rules go in the document's head and its marks on the page's elements, which is where the page is; the grid and
+ * the size badge are drawn by React, beside the panel.
+ */
+declare const QaLayer: () => import('react').JSX.Element;
+export default QaLayer;

package/dist/qa/QaLayer.mjs

@@ -0,0 +1,69 @@
+import { NO_FINDINGS as e } from "./findings.mjs";
+import { QA_CHECKS as t, QA_FINDING_ATTRIBUTE as n, QA_PAGE_ATTRIBUTE as r, REDUCED_MOTION_CLASS as i, isQaActive as a } from "./qaSettings.mjs";
+import o from "./QaContext.mjs";
+import { CHECKS as s } from "./checks/index.mjs";
+import c from "./overlays/QaGrid.mjs";
+import l from "./overlays/QaInspector.mjs";
+import u from "./overlays/QaTabOrder.mjs";
+import d from "./overlays/QaViewport.mjs";
+import { VISION_MATRIX as f, qaCss as p, visionFilterId as m } from "./qaCss.mjs";
+import h from "./usePageBox.mjs";
+import { use as g, useEffect as _, useMemo as v } from "react";
+import { useCommonStore as y } from "@plitzi/sdk-shared/store";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/qa/QaLayer.tsx
+var C = "http://www.w3.org/2000/svg", w = 250, T = 1e3, E = () => {
+	let { settings: E, pageRef: D, round: O, setFindings: k } = g(o), [A] = y("navigation.currentPageId"), j = h(D), M = a(E), N = v(() => p(E), [E]), P = v(() => t.filter((e) => E.checks[e]).join(" "), [E.checks]);
+	return _(() => {
+		let e = D.current;
+		if (e && M) return e.setAttribute(r, ""), () => e.removeAttribute(r);
+	}, [M, D]), _(() => {
+		if (!N) return;
+		let e = document.createElement("style");
+		return e.setAttribute("data-plitzi-qa", ""), e.textContent = N, document.head.append(e), () => e.remove();
+	}, [N]), _(() => {
+		if (E.reducedMotion) return document.documentElement.classList.add(i), () => document.documentElement.classList.remove(i);
+	}, [E.reducedMotion]), _(() => {
+		let e = E.vision;
+		if (e !== "protanopia" && e !== "deuteranopia" && e !== "tritanopia") return;
+		let t = document.createElementNS(C, "svg");
+		t.setAttribute("aria-hidden", "true"), t.setAttribute("style", "position: absolute; width: 0; height: 0");
+		let n = document.createElementNS(C, "filter");
+		n.setAttribute("id", m(e));
+		let r = document.createElementNS(C, "feColorMatrix");
+		return r.setAttribute("type", "matrix"), r.setAttribute("values", f[e]), n.append(r), t.append(n), document.body.append(t), () => t.remove();
+	}, [E.vision]), _(() => {
+		let r = D.current, i = t.filter((e) => P.split(" ").includes(e));
+		if (!r || i.length === 0) {
+			k(e);
+			return;
+		}
+		let a = [], o = () => {
+			a.forEach((e) => e.removeAttribute(n));
+			let t = { ...e };
+			for (let e of i) t[e] = s[e].run(r);
+			let o = /* @__PURE__ */ new Map();
+			i.forEach((e) => t[e].forEach(({ element: t }) => o.set(t, [...o.get(t) ?? [], e]))), o.forEach((e, t) => t.setAttribute(n, e.join(" "))), a = [...o.keys()], k(t);
+		}, c, l, u = () => {
+			typeof requestIdleCallback == "function" ? l = requestIdleCallback(o, { timeout: T }) : o();
+		}, d = () => {
+			clearTimeout(c), l !== void 0 && typeof cancelIdleCallback == "function" && cancelIdleCallback(l), c = setTimeout(u, w);
+		};
+		return d(), window.addEventListener("resize", d), () => {
+			clearTimeout(c), l !== void 0 && typeof cancelIdleCallback == "function" && cancelIdleCallback(l), window.removeEventListener("resize", d), a.forEach((e) => e.removeAttribute(n));
+		};
+	}, [
+		P,
+		D,
+		O,
+		A,
+		k
+	]), /* @__PURE__ */ S(b, { children: [
+		E.grid && /* @__PURE__ */ x(c, { box: j }),
+		E.tabOrder && /* @__PURE__ */ x(u, {}),
+		E.inspect && /* @__PURE__ */ x(l, {}),
+		E.viewport && /* @__PURE__ */ x(d, { box: j })
+	] });
+};
+//#endregion
+export { E as default };

package/dist/qa/checks/contrast.d.ts

@@ -0,0 +1,6 @@
+import { QaFinding } from './dom';
+/**
+ * Lines of text below WCAG AA against what is actually behind them: 4.5:1, or 3:1 for large text. Text over a picture
+ * or a gradient is left out — its backdrop is pixels this cannot read — and so is text nobody can see.
+ */
+export declare const findLowContrast: (page: Element) => QaFinding[];

package/dist/qa/checks/contrast.mjs

@@ -0,0 +1,23 @@
+import { isDrawn as e, ownTextOf as t } from "./dom.mjs";
+import { colourReader as n, contrastRatio as r, isLargeText as i, over as a } from "../inspect/colour.mjs";
+//#region src/qa/checks/contrast.ts
+var o = (o) => {
+	let s = o.ownerDocument.defaultView;
+	if (!s) return [];
+	let c = n();
+	return [...o.querySelectorAll("*")].flatMap((n) => {
+		if (!t(n) || !e(n)) return [];
+		let o = s.getComputedStyle(n);
+		if (o.visibility === "hidden" || Number(o.opacity) === 0) return [];
+		let l = c.colour(o.color), u = c.backdrop(n);
+		if (!l || !u) return [];
+		let d = r(a(l, u), u), f = i(parseFloat(o.fontSize), Number(o.fontWeight) || 400) ? 3 : 4.5;
+		return d >= f ? [] : [{
+			check: "contrast",
+			element: n,
+			note: `${d.toFixed(2)}:1, needs ${String(f)}:1`
+		}];
+	});
+};
+//#endregion
+export { o as findLowContrast };

package/dist/qa/checks/dom.d.ts

@@ -0,0 +1,15 @@
+import { QaCheck } from '../qaSettings';
+export interface QaFinding {
+    check: QaCheck;
+    element: Element;
+    /** What is wrong with it, in a few words. */
+    note: string;
+}
+/** What can be clicked, typed into or followed. */
+export declare const INTERACTIVE = "a[href], button, [role=\"button\"], [role=\"link\"], [role=\"tab\"], input:not([type=\"hidden\"]), select, textarea";
+/** Whether the element takes any room on the screen at all. */
+export declare const isDrawn: (element: Element) => boolean;
+/** Text as it reads: every run of white space one space. */
+export declare const textOf: (node: Node) => string;
+/** The words the element itself holds, not its children's — the line of text that is this element's own. */
+export declare const ownTextOf: (element: Element) => string;

package/dist/qa/checks/dom.mjs

@@ -0,0 +1,4 @@
+//#region src/qa/checks/dom.ts
+var e = "a[href], button, [role=\"button\"], [role=\"link\"], [role=\"tab\"], input:not([type=\"hidden\"]), select, textarea", t = (e) => e.getClientRects().length > 0, n = (e) => (e.textContent ?? "").replace(/\s+/g, " ").trim(), r = (e) => [...e.childNodes].filter((e) => e.nodeType === Node.TEXT_NODE).map(n).join(" ").trim();
+//#endregion
+export { e as INTERACTIVE, t as isDrawn, r as ownTextOf, n as textOf };

package/dist/qa/checks/headings.d.ts

@@ -0,0 +1,6 @@
+import { QaFinding } from './dom';
+/**
+ * The page's headings as a reader of an outline meets them: one first-level heading, and no level skipped on the way
+ * down — a screen reader and a browser agent find their way by it.
+ */
+export declare const findHeadingGaps: (page: Element) => QaFinding[];

package/dist/qa/checks/headings.mjs

@@ -0,0 +1,28 @@
+import { isDrawn as e } from "./dom.mjs";
+//#region src/qa/checks/headings.ts
+var t = (e) => {
+	let t = /^h([1-6])$/i.exec(e.tagName)?.[1];
+	return t ? Number(t) : Number(e.getAttribute("aria-level")) || 2;
+}, n = (n) => {
+	let r = [...n.querySelectorAll("h1, h2, h3, h4, h5, h6, [role=\"heading\"]")].filter(e);
+	if (r.length === 0) return [];
+	let i = [], a = r.filter((e) => t(e) === 1);
+	return a.length === 0 && i.push({
+		check: "headings",
+		element: r[0],
+		note: "the page has no h1"
+	}), a.slice(1).forEach((e) => i.push({
+		check: "headings",
+		element: e,
+		note: "another h1"
+	})), r.forEach((e, n) => {
+		let a = t(e), o = n === 0 ? 1 : t(r[n - 1]);
+		a > o + 1 && i.push({
+			check: "headings",
+			element: e,
+			note: `h${String(a)} right after h${String(o)}`
+		});
+	}), i;
+};
+//#endregion
+export { n as findHeadingGaps };

package/dist/qa/checks/images.d.ts

@@ -0,0 +1,6 @@
+import { QaFinding } from './dom';
+/**
+ * Pictures whose file does not fit the box they are drawn in, at this screen's density: stretched past their pixels,
+ * or several times larger than they are shown.
+ */
+export declare const findImageScale: (page: Element) => QaFinding[];

package/dist/qa/checks/images.mjs

@@ -0,0 +1,20 @@
+import { isDrawn as e } from "./dom.mjs";
+//#region src/qa/checks/images.ts
+var t = 1.25, n = 2.5, r = 800, i = (i) => {
+	let a = i.ownerDocument.defaultView?.devicePixelRatio ?? 1;
+	return [...i.querySelectorAll("img")].flatMap((i) => {
+		if (!i.complete || i.naturalWidth === 0 || !e(i)) return [];
+		let o = i.getBoundingClientRect().width * a;
+		return o === 0 ? [] : i.naturalWidth * t < o ? [{
+			check: "images",
+			element: i,
+			note: `${String(i.naturalWidth)} px file drawn at ${String(Math.round(o))} px — soft`
+		}] : i.naturalWidth > o * n && i.naturalWidth >= r ? [{
+			check: "images",
+			element: i,
+			note: `${String(i.naturalWidth)} px file for ${String(Math.round(o))} px`
+		}] : [];
+	});
+};
+//#endregion
+export { i as findImageScale };

package/dist/qa/checks/index.d.ts

@@ -0,0 +1,15 @@
+import { QaFinding } from './dom';
+import { QaCheck } from '../qaSettings';
+export type { QaFinding } from './dom';
+/**
+ * The QA tab's checks: what a tester looks for by hand on every build, looked for at once on the page as it is drawn.
+ * Each is a heuristic over the live DOM, not an audit: it points at what to look at.
+ */
+export interface CheckSpec {
+    label: string;
+    description: string;
+    /** Its outline on the page, so two findings on one element can still be told apart. */
+    colour: string;
+    run: (page: Element) => QaFinding[];
+}
+export declare const CHECKS: Record<QaCheck, CheckSpec>;

package/dist/qa/checks/index.mjs

@@ -0,0 +1,47 @@
+import { findLowContrast as e } from "./contrast.mjs";
+import { findHeadingGaps as t } from "./headings.mjs";
+import { findImageScale as n } from "./images.mjs";
+import { findUnnamed as r } from "./names.mjs";
+import { findOverflow as i } from "./overflow.mjs";
+import { findSmallTargets as a } from "./targets.mjs";
+//#region src/qa/checks/index.ts
+var o = {
+	overflow: {
+		label: "Sticks out sideways",
+		description: "Whatever reaches past the page’s sides — what makes a phone scroll sideways",
+		colour: "#f97316",
+		run: i
+	},
+	names: {
+		label: "No accessible name",
+		description: "Buttons, links and fields with no words for a screen reader or an agent; pictures with no alt",
+		colour: "#e11d48",
+		run: r
+	},
+	targets: {
+		label: "Small touch targets",
+		description: "Under 24 × 24 px with another control within reach (WCAG 2.2)",
+		colour: "#d97706",
+		run: a
+	},
+	contrast: {
+		label: "Low contrast",
+		description: "Text under 4.5:1 against what is behind it, 3:1 when large (WCAG AA)",
+		colour: "#db2777",
+		run: e
+	},
+	images: {
+		label: "Image sizes",
+		description: "Pictures stretched past their pixels, or files several times bigger than they are shown",
+		colour: "#0891b2",
+		run: n
+	},
+	headings: {
+		label: "Heading outline",
+		description: "No h1, a second one, or a level skipped on the way down",
+		colour: "#7c3aed",
+		run: t
+	}
+};
+//#endregion
+export { o as CHECKS };

package/dist/qa/checks/names.d.ts

@@ -0,0 +1,9 @@
+import { QaFinding } from './dom';
+/**
+ * The words assistive technology finds for an element, by the usual order: what `aria-labelledby` points at, its
+ * `aria-label`, a field's `<label>`, the text and the `alt` of the pictures inside it, its `title` — and, last, a
+ * field's `placeholder`.
+ */
+export declare const accessibleName: (element: Element) => string;
+/** A control or a picture a screen reader or a browser agent has no words for. */
+export declare const findUnnamed: (page: Element) => QaFinding[];

package/dist/qa/checks/names.mjs

@@ -0,0 +1,27 @@
+import { INTERACTIVE as e, isDrawn as t, textOf as n } from "./dom.mjs";
+//#region src/qa/checks/names.ts
+var r = (e) => {
+	let t = e.getAttribute("aria-labelledby");
+	if (t) {
+		let r = t.split(/\s+/).map((t) => e.ownerDocument.getElementById(t)).map((e) => e ? n(e) : "").join(" ").trim();
+		if (r) return r;
+	}
+	let r = e.getAttribute("aria-label")?.trim();
+	if (r) return r;
+	if ("labels" in e && e.labels instanceof NodeList) {
+		let t = [...e.labels].map(n).join(" ").trim();
+		if (t) return t;
+	}
+	let i = [...e.querySelectorAll("img[alt]")].map((e) => e.getAttribute("alt") ?? "").join(" ");
+	return `${n(e)} ${i}`.trim() || (e.getAttribute("title")?.trim() ?? e.getAttribute("placeholder")?.trim() ?? "");
+}, i = (n) => [...[...n.querySelectorAll(e)].filter((e) => t(e) && !r(e)).map((e) => ({
+	check: "names",
+	element: e,
+	note: `a ${e.tagName.toLowerCase()} with no name`
+})), ...[...n.querySelectorAll("img:not([alt])")].filter(t).map((e) => ({
+	check: "names",
+	element: e,
+	note: "a picture with no alt"
+}))];
+//#endregion
+export { r as accessibleName, i as findUnnamed };

package/dist/qa/checks/overflow.d.ts

@@ -0,0 +1,3 @@
+import { QaFinding } from './dom';
+/** Everything sticking out past the page's sides — the outermost of each, not all it holds. */
+export declare const findOverflow: (page: Element) => QaFinding[];

package/dist/qa/checks/overflow.mjs

@@ -0,0 +1,24 @@
+import { isDrawn as e } from "./dom.mjs";
+//#region src/qa/checks/overflow.ts
+var t = (e, t) => {
+	let n = e.ownerDocument.defaultView;
+	for (let r = e.parentElement; r && r !== t; r = r.parentElement) {
+		let e = n?.getComputedStyle(r).overflowX;
+		if (e && e !== "visible") return !0;
+	}
+	return !1;
+}, n = (n) => {
+	let r = n.getBoundingClientRect(), i = [];
+	for (let a of n.querySelectorAll("*")) {
+		if (i.some((e) => e.element.contains(a)) || !e(a)) continue;
+		let { left: o, right: s, width: c } = a.getBoundingClientRect(), l = Math.max(r.left - o, s - r.right);
+		c > 0 && l > 1 && !t(a, n) && i.push({
+			check: "overflow",
+			element: a,
+			note: `${String(Math.round(l))} px past the page`
+		});
+	}
+	return i;
+};
+//#endregion
+export { n as findOverflow };

package/dist/qa/checks/targets.d.ts

@@ -0,0 +1,8 @@
+import { QaFinding } from './dom';
+/** The smallest a target may be in both directions (WCAG 2.2 Target Size, Minimum). */
+export declare const MIN_TARGET = 24;
+/**
+ * Controls smaller than 24 × 24 px that also fail the rule's spacing exception: a small target passes when a 24 px
+ * circle centred on it touches no other target, which is what keeps a column of footer links apart.
+ */
+export declare const findSmallTargets: (page: Element) => QaFinding[];

package/dist/qa/checks/targets.mjs

@@ -0,0 +1,17 @@
+import { INTERACTIVE as e, isDrawn as t } from "./dom.mjs";
+//#region src/qa/checks/targets.ts
+var n = 24, r = (e, t, n) => Math.hypot(Math.max(n.left - e, 0, e - n.right), Math.max(n.top - t, 0, t - n.bottom)), i = (n) => {
+	let i = n.ownerDocument.defaultView, a = [...n.querySelectorAll(e)].filter((e) => t(e) && i?.getComputedStyle(e).display !== "inline"), o = a.map((e) => e.getBoundingClientRect());
+	return a.flatMap((e, t) => {
+		let n = o[t];
+		if (n.width >= 24 && n.height >= 24) return [];
+		let i = n.left + n.width / 2, s = n.top + n.height / 2;
+		return o.some((n, o) => o !== t && !e.contains(a[o]) && r(i, s, n) < 12) ? [{
+			check: "targets",
+			element: e,
+			note: `${String(Math.round(n.width))} × ${String(Math.round(n.height))} px, crowded`
+		}] : [];
+	});
+};
+//#endregion
+export { n as MIN_TARGET, i as findSmallTargets };

package/dist/qa/findings.d.ts

@@ -0,0 +1,5 @@
+import { QaFinding } from './checks';
+import { QaCheck } from './qaSettings';
+/** What each check found, the last time it looked. */
+export type QaFindings = Record<QaCheck, QaFinding[]>;
+export declare const NO_FINDINGS: QaFindings;

package/dist/qa/findings.mjs

@@ -0,0 +1,11 @@
+//#region src/qa/findings.ts
+var e = {
+	overflow: [],
+	names: [],
+	targets: [],
+	contrast: [],
+	images: [],
+	headings: []
+};
+//#endregion
+export { e as NO_FINDINGS };

package/dist/qa/inspect/colour.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Colours as the page draws them: any CSS colour resolved to RGBA, laid over what is behind it, and the contrast
+ * between two of them (WCAG 2).
+ */
+export type Rgba = [number, number, number, number];
+/**
+ * Any colour the browser accepts — `oklch()`, `color-mix()`, a keyword — as RGBA, by painting one pixel with it: a
+ * computed colour is not always `rgb()` any more.
+ */
+export declare const toRgba: (css: string) => Rgba | undefined;
+/** One colour laid over another. */
+export declare const over: (top: Rgba, bottom: Rgba) => Rgba;
+/** WCAG 2's contrast ratio, from 1 to 21. */
+export declare const contrastRatio: (first: Rgba, second: Rgba) => number;
+export declare const toHex: ([red, green, blue, alpha]: Rgba) => string;
+export interface ColourReader {
+    /** A CSS colour as RGBA — each value painted once. */
+    colour: (css: string) => Rgba | undefined;
+    /**
+     * The colour behind an element: its own background over what is behind its parent, down to the first opaque one or
+     * the canvas. Undefined where an image or a gradient is in the way — that backdrop is pixels this cannot read.
+     */
+    backdrop: (element: Element) => Rgba | undefined;
+}
+/**
+ * Colours read for one look at a page. Each colour is painted once and each element's backdrop is worked out once, on
+ * its parent's: a check over every line of text would otherwise read the same ancestors thousands of times.
+ */
+export declare const colourReader: () => ColourReader;
+/** One element's backdrop, read on its own. */
+export declare const backdropOf: (element: Element) => Rgba | undefined;
+/** Text the size WCAG calls large: 24 px, or 18.66 px in bold — it may get by on 3:1 instead of 4.5:1. */
+export declare const isLargeText: (fontSize: number, fontWeight: number) => boolean;