@plitzi/sdk-dev-tools 0.38.2 → 0.38.4

package/dist/components/DevToolsPanel/tabs/QaViewer/QaToolbar.mjs

@@ -1,58 +1,66 @@
 import e from "./QaDivider.mjs";
-import t from "./QaToolChip.mjs";
-import n from "./QaVisionSelect.mjs";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import t from "./QaReplayButton.mjs";
+import n from "./QaToolChip.mjs";
+import r from "./QaVisionSelect.mjs";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/QaViewer/QaToolbar.tsx
-var a = () => /* @__PURE__ */ i("div", {
+var o = () => /* @__PURE__ */ a("div", {
 	className: "flex shrink-0 flex-wrap items-center gap-1.5 border-b border-zinc-200 px-3 py-2 dark:border-zinc-700",
 	children: [
-		/* @__PURE__ */ r(t, {
+		/* @__PURE__ */ i(n, {
 			setting: "inspect",
 			label: "Inspect",
 			icon: "fa-solid fa-arrow-pointer",
 			title: "Point at an element for its box and style; click to keep it here; hold Alt over another to measure. Esc stops.",
 			primary: !0
 		}),
-		/* @__PURE__ */ r(e, {}),
-		/* @__PURE__ */ r(t, {
+		/* @__PURE__ */ i(e, {}),
+		/* @__PURE__ */ i(n, {
 			setting: "grid",
 			label: "Grid",
 			icon: "fa-solid fa-table-columns",
 			title: "The page's 12, 8 or 4 columns"
 		}),
-		/* @__PURE__ */ r(t, {
-			setting: "outlines",
-			label: "Outlines",
-			icon: "fa-regular fa-square",
-			title: "Every element's box"
+		/* @__PURE__ */ i(n, {
+			setting: "xray",
+			label: "X-ray",
+			icon: "fa-solid fa-x-ray",
+			title: "Every element's box, its type and id when pointed at — and what is bound to data, shown on a condition, runs a flow, moves or sits behind a flag, named on the page"
 		}),
-		/* @__PURE__ */ r(t, {
+		/* @__PURE__ */ i(n, {
 			setting: "tabOrder",
 			label: "Tab order",
 			icon: "fa-solid fa-arrow-right-to-bracket",
 			title: "The order the Tab key walks the controls in"
 		}),
-		/* @__PURE__ */ r(t, {
+		/* @__PURE__ */ i(n, {
 			setting: "viewport",
 			label: "Viewport",
 			icon: "fa-solid fa-ruler-horizontal",
 			title: "The window's size and the breakpoint showing"
 		}),
-		/* @__PURE__ */ r(e, {}),
-		/* @__PURE__ */ r(t, {
+		/* @__PURE__ */ i(e, {}),
+		/* @__PURE__ */ i(n, {
 			setting: "paused",
 			label: "Pause",
 			icon: "fa-solid fa-pause",
 			title: "Hold every animation where it is"
 		}),
-		/* @__PURE__ */ r(t, {
+		/* @__PURE__ */ i(n, {
+			setting: "slowMotion",
+			label: "Slow",
+			icon: "fa-solid fa-gauge-simple",
+			title: "Every animation at a quarter of its speed"
+		}),
+		/* @__PURE__ */ i(t, {}),
+		/* @__PURE__ */ i(n, {
 			setting: "reducedMotion",
 			label: "Reduced motion",
 			icon: "fa-solid fa-person-walking",
 			title: "The page as a visitor who asked for less motion gets it"
 		}),
-		/* @__PURE__ */ r(n, {})
+		/* @__PURE__ */ i(r, {})
 	]
 });
 //#endregion
-export { a as default };
+export { o as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaViewer.d.ts

@@ -1,8 +1,9 @@
 /**
  * Tools for checking a build in the browser it will be used in — a pre-production deployment, say — rather than in the
- * builder: an inspector for any element, what lines things up, motion, colour, and the checks a tester runs on every
- * page. The bar on top; the checks and the inspector side by side below, one over the other when the panel is narrow.
- * All of it stays on while the panel is folded away, and in this browser only.
+ * builder: an inspector for any element, what lines things up, what the document wires to each element, motion and
+ * colour, and the checks a tester runs on every page. The bar on top; the x-ray's legend and the checks beside the
+ * inspector below, one over the other when the panel is narrow. All of it stays on while the panel is folded away, and
+ * in this browser only.
  */
 declare const QaViewer: () => import('react').JSX.Element;
 export default QaViewer;

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

@@ -1,14 +1,23 @@
-import e from "./QaChecks.mjs";
-import t from "./QaInspectorPanel.mjs";
-import n from "./QaToolbar.mjs";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import e from "../../../../qa/QaContext.mjs";
+import t from "./QaChecks.mjs";
+import n from "./QaInspectorPanel.mjs";
+import r from "./QaToolbar.mjs";
+import i from "./QaXray.mjs";
+import { use as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/DevToolsPanel/tabs/QaViewer/QaViewer.tsx
-var a = () => /* @__PURE__ */ i("div", {
-	className: "@container flex h-full min-h-0 w-full flex-col",
-	children: [/* @__PURE__ */ r(n, {}), /* @__PURE__ */ i("div", {
-		className: "grid min-h-0 grow grid-cols-1 content-start gap-3 overflow-y-auto p-3 @3xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]",
-		children: [/* @__PURE__ */ r(e, {}), /* @__PURE__ */ r(t, {})]
-	})]
-});
+var c = () => {
+	let { settings: c } = a(e);
+	return /* @__PURE__ */ s("div", {
+		className: "@container flex h-full min-h-0 w-full flex-col",
+		children: [/* @__PURE__ */ o(r, {}), /* @__PURE__ */ s("div", {
+			className: "grid min-h-0 grow grid-cols-1 content-start gap-3 overflow-y-auto p-3 @3xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]",
+			children: [/* @__PURE__ */ s("div", {
+				className: "flex min-w-0 flex-col gap-3",
+				children: [c.xray && /* @__PURE__ */ o(i, {}), /* @__PURE__ */ o(t, {})]
+			}), /* @__PURE__ */ o(n, {})]
+		})]
+	});
+};
 //#endregion
-export { a as default };
+export { c as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaXray.d.ts

@@ -0,0 +1,6 @@
+/**
+ * What the x-ray marks on the page, in its colours, with how many of each the page has — one picked to see only it, or
+ * the boxes alone.
+ */
+declare const QaXray: () => import('react').JSX.Element;
+export default QaXray;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaXray.mjs

@@ -0,0 +1,17 @@
+import { XRAY_MARKS as e } from "../../../../qa/xray.mjs";
+import t from "./QaXrayBoxesRow.mjs";
+import n from "./QaXrayRow.mjs";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaXray.tsx
+var a = () => /* @__PURE__ */ i("section", {
+	className: "flex min-w-0 flex-col gap-1.5",
+	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__ */ r("i", { className: "fa-solid fa-x-ray" }), "X-ray"]
+	}), /* @__PURE__ */ i("div", {
+		className: "overflow-hidden rounded border border-zinc-200 dark:border-zinc-700",
+		children: [/* @__PURE__ */ r(t, {}), e.map((e) => /* @__PURE__ */ r(n, { mark: e }, e))]
+	})]
+});
+//#endregion
+export { a as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaXrayBoxesRow.d.ts

@@ -0,0 +1,3 @@
+/** The boxes alone, picked: every element's box with its type and id, and no wiring marked over them. */
+declare const QaXrayBoxesRow: () => import('react').JSX.Element;
+export default QaXrayBoxesRow;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaXrayBoxesRow.mjs

@@ -0,0 +1,24 @@
+import e from "../../../../qa/QaContext.mjs";
+import t from "clsx";
+import { use as n, useCallback as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaXrayBoxesRow.tsx
+var o = () => {
+	let { settings: o, setSetting: s } = n(e), c = o.xrayFilter === "none", l = r(() => s("xrayFilter", c ? "all" : "none"), [s, c]);
+	return /* @__PURE__ */ a("button", {
+		type: "button",
+		"aria-pressed": c,
+		title: "Every element's box, its type and id when pointed at — and no wiring. Click again to mark it all.",
+		className: t("flex w-full cursor-pointer items-center gap-2 border-b border-zinc-100 px-2.5 py-1.5 text-left dark:border-zinc-800", {
+			"bg-violet-500/10": c,
+			"hover:bg-zinc-50 dark:hover:bg-zinc-800/60": !c
+		}),
+		onClick: l,
+		children: [/* @__PURE__ */ i("span", { className: "h-2.5 w-2.5 shrink-0 rounded-sm border border-dashed border-violet-500" }), /* @__PURE__ */ i("span", {
+			className: "min-w-0 truncate font-medium text-zinc-800 dark:text-zinc-200",
+			children: "Boxes only"
+		})]
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/DevToolsPanel/tabs/QaViewer/QaXrayRow.d.ts

@@ -0,0 +1,7 @@
+import { XrayMark } from '../../../../qa/xray';
+export type QaXrayRowProps = {
+    mark: XrayMark;
+};
+/** One kind of wiring: how many elements of the page carry it — and, picked, the only one the x-ray shows. */
+declare const QaXrayRow: ({ mark }: QaXrayRowProps) => import('react').JSX.Element;
+export default QaXrayRow;

package/dist/components/DevToolsPanel/tabs/QaViewer/QaXrayRow.mjs

@@ -0,0 +1,40 @@
+import { XRAY as e } from "../../../../qa/xray.mjs";
+import t from "../../../../qa/QaContext.mjs";
+import n from "clsx";
+import { use as r, useCallback as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaXrayRow.tsx
+var s = ({ mark: s }) => {
+	let { settings: c, setSetting: l, xrayCounts: u } = r(t), { label: d, description: f, colour: p } = e[s], m = c.xrayFilter === s, h = i(() => l("xrayFilter", m ? "all" : s), [
+		l,
+		m,
+		s
+	]);
+	return /* @__PURE__ */ o("button", {
+		type: "button",
+		"aria-pressed": m,
+		title: `${f}. Click to show only these; again for all.`,
+		className: n("flex w-full cursor-pointer items-center gap-2 border-b border-zinc-100 px-2.5 py-1.5 text-left last:border-b-0 dark:border-zinc-800", {
+			"bg-violet-500/10": m,
+			"hover:bg-zinc-50 dark:hover:bg-zinc-800/60": !m,
+			"opacity-50": c.xrayFilter !== "all" && !m
+		}),
+		onClick: h,
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: "h-2.5 w-2.5 shrink-0 rounded-full",
+				style: { backgroundColor: p }
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "min-w-0 truncate font-medium text-zinc-800 dark:text-zinc-200",
+				children: d
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "ml-auto rounded-full bg-zinc-100 px-1.5 text-[10px] font-semibold text-zinc-600 tabular-nums dark:bg-zinc-800 dark:text-zinc-300",
+				children: u[s]
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };

package/dist/qa/QaContext.d.ts

@@ -1,5 +1,6 @@
 import { QaFindings } from './findings';
 import { QaCheck, QaSettings } from './qaSettings';
+import { XrayCounts } from './xray';
 import { ReactNode, RefObject } from 'react';
 export interface QaContextValue {
     settings: QaSettings;
@@ -8,6 +9,9 @@ export interface QaContextValue {
     /** What the checks that are on found, the last time they looked. */
     findings: QaFindings;
     setFindings: (findings: QaFindings) => void;
+    /** How many elements of the page the x-ray marked, by mark, the last time it looked. */
+    xrayCounts: XrayCounts;
+    setXrayCounts: (counts: XrayCounts) => void;
     /** Bumped to make the checks look again. */
     round: number;
     rescan: () => void;

package/dist/qa/QaContext.mjs

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

package/dist/qa/QaLayer.mjs

@@ -1,69 +1,121 @@
 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";
+import { NO_XRAY_COUNTS as o, XRAY_ATTRIBUTE as s, xrayMarksOf as c } from "./xray.mjs";
+import l from "./QaContext.mjs";
+import { CHECKS as u } from "./checks/index.mjs";
+import d from "./overlays/QaGrid.mjs";
+import f from "./overlays/QaInspector.mjs";
+import p from "./overlays/QaTabOrder.mjs";
+import m from "./overlays/QaViewport.mjs";
+import h from "./overlays/QaXrayTags.mjs";
+import { VISION_MATRIX as g, qaCss as _, visionFilterId as v } from "./qaCss.mjs";
+import y from "./usePageBox.mjs";
+import { use as b, useEffect as x, useMemo as S } from "react";
+import { useCommonStore as C } from "@plitzi/sdk-shared/store";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { treeOf as D } from "@plitzi/sdk-schema/helpers/components";
 //#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;
+var O = "http://www.w3.org/2000/svg", k = 250, A = 1e3, j = 200, M = .25, N = () => {
+	let { settings: N, pageRef: P, round: F, setFindings: I, setXrayCounts: L } = b(l), [[R, z, B]] = C([
+		"navigation.currentPageId",
+		"schema.flat",
+		"schema.components"
+	]), V = y(P), H = a(N), U = S(() => _(N), [N]), W = S(() => t.filter((e) => N.checks[e]).join(" "), [N.checks]);
+	return x(() => {
+		let e = P.current;
+		if (e && H) return e.setAttribute(r, ""), () => e.removeAttribute(r);
+	}, [H, P]), x(() => {
+		if (!U) 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;
+		return e.setAttribute("data-plitzi-qa", ""), e.textContent = U, document.head.append(e), () => e.remove();
+	}, [U]), x(() => {
+		if (N.reducedMotion) return document.documentElement.classList.add(i), () => document.documentElement.classList.remove(i);
+	}, [N.reducedMotion]), x(() => {
+		let e = N.vision;
 		if (e !== "protanopia" && e !== "deuteranopia" && e !== "tritanopia") return;
-		let t = document.createElementNS(C, "svg");
+		let t = document.createElementNS(O, "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));
+		let n = document.createElementNS(O, "filter");
+		n.setAttribute("id", v(e));
+		let r = document.createElementNS(O, "feColorMatrix");
+		return r.setAttribute("type", "matrix"), r.setAttribute("values", g[e]), n.append(r), t.append(n), document.body.append(t), () => t.remove();
+	}, [N.vision]), x(() => {
+		let e = P.current;
+		if (!e || !N.xray) {
+			L(o);
+			return;
+		}
+		let t, n = () => {
+			let t = { ...o };
+			e.querySelectorAll("[data-plitzi-el]").forEach((e) => {
+				let n = e.getAttribute("data-plitzi-el") ?? "", r = D({
+					flat: z,
+					components: B
+				}, n)?.flat[n]?.definition, i = r ? c(r) : [];
+				i.forEach((e) => {
+					t[e] += 1;
+				}), i.length === 0 ? e.removeAttribute(s) : e.getAttribute("data-plitzi-qa-xray") !== i.join(" ") && e.setAttribute(s, i.join(" "));
+			}), L(t);
+		}, r = () => {
+			clearTimeout(t), t = setTimeout(n, j);
+		};
+		n();
+		let i = new MutationObserver(r);
+		return i.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			clearTimeout(t), i.disconnect(), e.querySelectorAll(`[${s}]`).forEach((e) => e.removeAttribute(s));
+		};
+	}, [
+		N.xray,
+		P,
+		z,
+		B,
+		R,
+		L
+	]), x(() => {
+		let e = P.current;
+		if (!e || !N.slowMotion) return;
+		let t = (t) => e.getAnimations({ subtree: !0 }).forEach((e) => {
+			e.playbackRate = t;
+		}), n = () => t(M);
+		return n(), e.addEventListener("animationstart", n), e.addEventListener("transitionrun", n), () => {
+			e.removeEventListener("animationstart", n), e.removeEventListener("transitionrun", n), t(1);
+		};
+	}, [N.slowMotion, P]), x(() => {
+		let r = P.current, i = t.filter((e) => W.split(" ").includes(e));
 		if (!r || i.length === 0) {
-			k(e);
+			I(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);
+			for (let e of i) t[e] = u[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();
+			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()], I(t);
+		}, s, c, l = () => {
+			typeof requestIdleCallback == "function" ? c = requestIdleCallback(o, { timeout: A }) : o();
 		}, d = () => {
-			clearTimeout(c), l !== void 0 && typeof cancelIdleCallback == "function" && cancelIdleCallback(l), c = setTimeout(u, w);
+			clearTimeout(s), c !== void 0 && typeof cancelIdleCallback == "function" && cancelIdleCallback(c), s = setTimeout(l, k);
 		};
 		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));
+			clearTimeout(s), c !== void 0 && typeof cancelIdleCallback == "function" && cancelIdleCallback(c), window.removeEventListener("resize", d), a.forEach((e) => e.removeAttribute(n));
 		};
 	}, [
+		W,
 		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 })
+		F,
+		R,
+		I
+	]), /* @__PURE__ */ E(w, { children: [
+		N.grid && /* @__PURE__ */ T(d, { box: V }),
+		N.xray && N.xrayFilter !== "none" && /* @__PURE__ */ T(h, { filter: N.xrayFilter }),
+		N.tabOrder && /* @__PURE__ */ T(p, {}),
+		N.inspect && /* @__PURE__ */ T(f, {}),
+		N.viewport && /* @__PURE__ */ T(m, { box: V })
 	] });
 };
 //#endregion
-export { E as default };
+export { N as default };

package/dist/qa/overlays/QaXrayTags.d.ts

@@ -0,0 +1,12 @@
+import { XrayFilter } from '../xray';
+/** What there are tags for: the boxes alone carry none. */
+type TaggedFilter = Exclude<XrayFilter, 'none'>;
+export type QaXrayTagsProps = {
+    filter: TaggedFilter;
+};
+/**
+ * Every element the x-ray marked, named on its corner with a dot for each thing wired to it — so the page says which of
+ * its parts are bound, conditional, interactive or moving without pointing at each one.
+ */
+declare const QaXrayTags: ({ filter }: QaXrayTagsProps) => import('react').JSX.Element;
+export default QaXrayTags;

package/dist/qa/overlays/QaXrayTags.mjs

@@ -0,0 +1,58 @@
+import { XRAY as e, XRAY_ATTRIBUTE as t, XRAY_MARKS as n } from "../xray.mjs";
+import r from "../QaContext.mjs";
+import { use as i, useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/qa/overlays/QaXrayTags.tsx
+var u = 150, d = 16, f = (e) => n.some((t) => t === e), p = (e, n) => {
+	let r = [], i = /* @__PURE__ */ new Set();
+	for (let a of e.querySelectorAll(`[${t}]`)) {
+		if (r.length >= u) break;
+		let e = (a.getAttribute("data-plitzi-qa-xray") ?? "").split(" ").filter(f);
+		if (n !== "all" && !e.includes(n)) continue;
+		let t = a.getBoundingClientRect();
+		if (t.width === 0 || t.bottom < 0 || t.top > window.innerHeight) continue;
+		let o = (e) => `${String(Math.round(t.left))}:${String(Math.round(e))}`, s = t.top >= d ? t.top - d + 1 : Math.max(t.top, 0);
+		for (let e = 0; e < 3 && i.has(o(s)); e += 1) s += d;
+		i.has(o(s)) || (i.add(o(s)), r.push({
+			id: a.getAttribute("data-plitzi-el") ?? "",
+			marks: e,
+			left: t.left,
+			top: s
+		}));
+	}
+	return r;
+}, m = ({ filter: n }) => {
+	let { pageRef: u } = i(r), [d, f] = o([]);
+	return a(() => {
+		let e = u.current;
+		if (!e) return;
+		let r = 0, i = () => {
+			cancelAnimationFrame(r), r = requestAnimationFrame(() => f(p(e, n)));
+		};
+		i();
+		let a = new MutationObserver(i);
+		return a.observe(e, {
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [t]
+		}), document.addEventListener("scroll", i, !0), window.addEventListener("resize", i), () => {
+			cancelAnimationFrame(r), a.disconnect(), document.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i);
+		};
+	}, [u, n]), /* @__PURE__ */ c(s, { children: d.map(({ id: t, marks: n, left: r, top: i }) => /* @__PURE__ */ l("span", {
+		className: "pointer-events-none fixed z-[999998] flex h-[15px] max-w-56 items-center gap-1 rounded-sm bg-zinc-900/85 px-1 font-mono text-[10px] leading-none text-white shadow-sm",
+		style: {
+			left: r,
+			top: i
+		},
+		children: [n.map((t) => /* @__PURE__ */ c("span", {
+			title: e[t].label,
+			className: "h-1.5 w-1.5 shrink-0 rounded-full",
+			style: { backgroundColor: e[t].colour }
+		}, t)), /* @__PURE__ */ c("span", {
+			className: "truncate",
+			children: t
+		})]
+	}, `${t}-${String(r)}-${String(i)}`)) });
+};
+//#endregion
+export { m as default };