@plitzi/sdk-dev-tools 0.37.8 → 0.37.10

package/dist/qa/inspect/colour.mjs

@@ -0,0 +1,111 @@
+//#region src/qa/inspect/colour.ts
+var e, t = () => {
+	if (e === void 0) try {
+		let t = document.createElement("canvas");
+		t.width = 1, t.height = 1, e = t.getContext("2d", { willReadFrequently: !0 });
+	} catch {
+		e = null;
+	}
+	return e;
+}, n = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+%?))?\s*\)$/i, r = (e) => e === void 0 ? 1 : e.endsWith("%") ? parseFloat(e) / 100 : parseFloat(e), i = (e) => {
+	let t = e.trim(), i = n.exec(t);
+	if (i) return [
+		Number(i[1]),
+		Number(i[2]),
+		Number(i[3]),
+		r(i.at(4))
+	];
+	let a = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(t)?.[1];
+	if (!a) return t === "transparent" ? [
+		0,
+		0,
+		0,
+		0
+	] : void 0;
+	let o = a.length === 3 ? a.replace(/./g, (e) => e + e) : a, [s, c, l] = [
+		0,
+		2,
+		4
+	].map((e) => parseInt(o.slice(e, e + 2), 16));
+	return [
+		s,
+		c,
+		l,
+		1
+	];
+}, a = (e) => {
+	let n = t();
+	if (!n) return i(e);
+	n.clearRect(0, 0, 1, 1), n.fillStyle = "#000", n.fillStyle = e, n.fillRect(0, 0, 1, 1);
+	let [r, a, o, s] = n.getImageData(0, 0, 1, 1).data;
+	return [
+		r,
+		a,
+		o,
+		s / 255
+	];
+}, o = (e, t) => {
+	let n = e[3] + t[3] * (1 - e[3]);
+	if (n === 0) return [
+		0,
+		0,
+		0,
+		0
+	];
+	let r = (r) => (e[r] * e[3] + t[r] * t[3] * (1 - e[3])) / n;
+	return [
+		r(0),
+		r(1),
+		r(2),
+		n
+	];
+}, s = ([e, t, n]) => {
+	let [r, i, a] = [
+		e,
+		t,
+		n
+	].map((e) => {
+		let t = e / 255;
+		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * i + .0722 * a;
+}, c = (e, t) => {
+	let [n, r] = [s(e), s(t)].sort((e, t) => t - e);
+	return (n + .05) / (r + .05);
+}, l = ([e, t, n, r]) => {
+	let i = `#${[
+		e,
+		t,
+		n
+	].map((e) => Math.round(e).toString(16).padStart(2, "0")).join("")}`;
+	return r < 1 ? `${i} · ${String(Math.round(r * 100))}%` : i;
+}, u = () => {
+	let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = (t) => (e.has(t) || e.set(t, a(t)), e.get(t)), r = (e) => {
+		let t = e.ownerDocument.documentElement;
+		return e.ownerDocument.defaultView?.getComputedStyle(t).colorScheme.includes("dark") ?? !1 ? [
+			18,
+			18,
+			18,
+			1
+		] : [
+			255,
+			255,
+			255,
+			1
+		];
+	}, i = (e) => {
+		if (t.has(e)) return t.get(e);
+		let a = e.ownerDocument.defaultView?.getComputedStyle(e), s;
+		if (a && (!a.backgroundImage || a.backgroundImage === "none")) {
+			let t = n(a.backgroundColor), c = e.parentElement, l = c ? i(c) : r(e);
+			t && t[3] >= 1 ? s = t : l && (s = t && t[3] > 0 ? o(t, l) : l);
+		}
+		return t.set(e, s), s;
+	};
+	return {
+		colour: n,
+		backdrop: i
+	};
+}, d = (e) => u().backdrop(e), f = (e, t) => e >= 24 || e >= 18.66 && t >= 700;
+//#endregion
+export { d as backdropOf, u as colourReader, c as contrastRatio, f as isLargeText, o as over, l as toHex, a as toRgba };

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

@@ -0,0 +1,32 @@
+/** What a designer asks of an element on the page: what it is, how big, how it is spaced, set and coloured. */
+export interface ElementSummary {
+    /** `heading · lp-hero-title`, or the tag where the element is not one of the space's. */
+    name: string;
+    tag: string;
+    width: number;
+    height: number;
+    display: string;
+    position: string;
+    padding: string;
+    margin: string;
+    border: string;
+    radius: string;
+    gap: string;
+    font: string;
+    lineHeight: string;
+    letterSpacing: string;
+    colour: string;
+    background: string | undefined;
+    /** The text against what is behind it, when that can be read — and what it needs to pass AA. */
+    contrast: {
+        ratio: number;
+        needs: number;
+    } | undefined;
+    opacity: string;
+    zIndex: string;
+    /** The space's own classes: the SDK's wrappers left out. */
+    classes: string[];
+}
+/** Four sides the way a shorthand writes them: one value when all agree, two when opposite sides do. */
+export declare const sidesOf: (style: CSSStyleDeclaration, property: "padding" | "margin") => string;
+export declare const summarize: (element: Element) => ElementSummary | undefined;

package/dist/qa/inspect/describe.mjs

@@ -0,0 +1,42 @@
+import { backdropOf as e, contrastRatio as t, isLargeText as n, over as r, toHex as i, toRgba as a } from "./colour.mjs";
+//#region src/qa/inspect/describe.ts
+var o = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+], s = (e, t) => {
+	let [n, r, i, a] = o.map((n) => e.getPropertyValue(`${t}-${n}`) || "0px");
+	return n === r && r === i && i === a ? n : n === i && r === a ? `${n} ${r}` : `${n} ${r} ${i} ${a}`;
+}, c = (e) => !e.startsWith("plitzi-component") && !e.startsWith("plitzi__") && !e.startsWith("devtools-"), l = (e) => e.split(",")[0]?.replace(/["']/g, "").trim() ?? e, u = (o) => {
+	let u = o.ownerDocument.defaultView;
+	if (!u) return;
+	let d = u.getComputedStyle(o), f = o.getBoundingClientRect(), p = o.getAttribute("data-type"), m = o.getAttribute("data-plitzi-el"), h = o.tagName.toLowerCase(), g = a(d.color), _ = a(d.backgroundColor), v = e(o), y = parseFloat(d.fontSize), b = Number(d.fontWeight) || 400, x = g && v ? {
+		ratio: t(r(g, v), v),
+		needs: n(y, b) ? 3 : 4.5
+	} : void 0;
+	return {
+		name: p && m ? `${p} · ${m}` : h,
+		tag: h,
+		width: Math.round(f.width),
+		height: Math.round(f.height),
+		display: d.display,
+		position: d.position,
+		padding: s(d, "padding"),
+		margin: s(d, "margin"),
+		border: `${d.borderTopWidth} ${d.borderTopStyle}`,
+		radius: d.borderTopLeftRadius,
+		gap: d.gap === "normal" ? "" : d.gap,
+		font: `${l(d.fontFamily)} ${d.fontSize} · ${d.fontWeight}`,
+		lineHeight: d.lineHeight,
+		letterSpacing: d.letterSpacing,
+		colour: g ? i(g) : d.color,
+		background: _ && _[3] > 0 ? i(_) : void 0,
+		contrast: x,
+		opacity: d.opacity,
+		zIndex: d.zIndex,
+		classes: [...o.classList].filter(c)
+	};
+};
+//#endregion
+export { s as sidesOf, u as summarize };

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

@@ -0,0 +1,20 @@
+/** A box on the screen, as `getBoundingClientRect` gives it. */
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** A distance to draw: a line from one point to another and its length in px. */
+export interface Distance {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    length: number;
+}
+/**
+ * The distances between two boxes, as a design tool draws them: the gap between them on each axis they are apart on,
+ * or, when one holds the other, from each of its sides to the outer box's.
+ */
+export declare const distancesBetween: (from: Box, to: Box) => Distance[];

package/dist/qa/inspect/measure.mjs

@@ -0,0 +1,23 @@
+//#region src/qa/inspect/measure.ts
+var e = (e, t, n, r) => ({
+	x1: e,
+	y1: t,
+	x2: n,
+	y2: r,
+	length: Math.round(Math.hypot(n - e, r - t))
+}), t = (e, t) => (e + t) / 2, n = (n, r) => {
+	let i = n.left >= r.left && n.right <= r.right && n.top >= r.top && n.bottom <= r.bottom, a = r.left >= n.left && r.right <= n.right && r.top >= n.top && r.bottom <= n.bottom;
+	if (i || a) {
+		let [a, o] = i ? [n, r] : [r, n], s = t(a.left, a.right), c = t(a.top, a.bottom);
+		return [
+			e(s, o.top, s, a.top),
+			e(a.right, c, o.right, c),
+			e(s, a.bottom, s, o.bottom),
+			e(o.left, c, a.left, c)
+		].filter((e) => e.length > 0);
+	}
+	let o = [], s = t(Math.max(n.top, r.top), Math.min(n.bottom, r.bottom)), c = t(Math.max(n.left, r.left), Math.min(n.right, r.right)), l = n.bottom > r.top && r.bottom > n.top ? s : t(n.top, n.bottom), u = n.right > r.left && r.right > n.left ? c : t(n.left, n.right);
+	return r.left >= n.right ? o.push(e(n.right, l, r.left, l)) : n.left >= r.right && o.push(e(r.right, l, n.left, l)), r.top >= n.bottom ? o.push(e(u, n.bottom, u, r.top)) : n.top >= r.bottom && o.push(e(u, r.bottom, u, n.top)), o;
+};
+//#endregion
+export { n as distancesBetween };

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

@@ -0,0 +1,12 @@
+/**
+ * The CSS rules that reach an element, as written — the class it wears, its variant, an ancestor's condition, a rule
+ * of the space's own CSS — rather than the values they resolved to.
+ */
+export interface MatchedRule {
+    selector: string;
+    /** `color: red; padding: 8px`. */
+    declarations: string;
+    /** The media query it sits under, when there is one. */
+    media?: string;
+}
+export declare const matchedRules: (element: Element) => MatchedRule[];

package/dist/qa/inspect/rules.mjs

@@ -0,0 +1,29 @@
+//#region src/qa/inspect/rules.ts
+var e = /^(\*|:root|:host|html|body|::?before|::?after|::backdrop|::?marker)$/, t = (t) => t.split(",").every((t) => e.test(t.trim())), n = (e) => e.includes("[data-plitzi-qa") || e.includes("devtools-element-"), r = (e) => [...e].every((e) => e.startsWith("--tw-")), i = 60, a = (e, t) => t ? e.includes("&") ? e.replaceAll("&", `:is(${t})`) : `:is(${t}) ${e}` : e, o = (e, t) => {
+	try {
+		return e.matches(t);
+	} catch {
+		return !1;
+	}
+}, s = (e, c, l, u, d) => {
+	let f = e.ownerDocument.defaultView;
+	for (let p of c) {
+		if (l.length >= i) return;
+		if (p instanceof CSSStyleRule) {
+			let i = a(p.selectorText, u);
+			p.style.length > 0 && !t(p.selectorText) && !n(p.selectorText) && !r(p.style) && o(e, i) && l.push({
+				selector: p.selectorText,
+				declarations: p.style.cssText,
+				...d ? { media: d } : {}
+			}), p.cssRules.length > 0 && s(e, p.cssRules, l, i, d);
+		} else p instanceof CSSMediaRule ? (typeof f?.matchMedia != "function" || f.matchMedia(p.media.mediaText).matches) && s(e, p.cssRules, l, u, p.media.mediaText) : p instanceof CSSGroupingRule && s(e, p.cssRules, l, u, d);
+	}
+}, c = (e) => {
+	let t = [];
+	for (let n of e.ownerDocument.styleSheets) try {
+		s(e, n.cssRules, t, void 0, void 0);
+	} catch {}
+	return t;
+};
+//#endregion
+export { c as matchedRules };

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

@@ -0,0 +1,9 @@
+export type QaBoxModelProps = {
+    element: Element;
+};
+/**
+ * The element's box as a browser's inspector draws it: its margin in orange outside it, its padding in green inside
+ * its border, its content in blue.
+ */
+declare const QaBoxModel: ({ element }: QaBoxModelProps) => import('react').JSX.Element | null;
+export default QaBoxModel;

package/dist/qa/overlays/QaBoxModel.mjs

@@ -0,0 +1,49 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/qa/overlays/QaBoxModel.tsx
+var r = (e) => parseFloat(e) || 0, i = (e, t, n, r, i) => ({
+	borderStyle: "solid",
+	borderColor: e,
+	borderWidth: `${String(t)}px ${String(n)}px ${String(r)}px ${String(i)}px`
+}), a = ({ element: a }) => {
+	let o = a.ownerDocument.defaultView;
+	if (!o) return null;
+	let s = o.getComputedStyle(a), c = a.getBoundingClientRect(), l = [
+		s.marginTop,
+		s.marginRight,
+		s.marginBottom,
+		s.marginLeft
+	].map(r), u = [
+		s.borderTopWidth,
+		s.borderRightWidth,
+		s.borderBottomWidth,
+		s.borderLeftWidth
+	].map(r), d = [
+		s.paddingTop,
+		s.paddingRight,
+		s.paddingBottom,
+		s.paddingLeft
+	].map(r), [f, p, m, h] = l.map((e) => Math.max(e, 0)), [g, _, v, y] = u, [b, x, S, C] = d;
+	return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
+		className: "pointer-events-none fixed z-[999997] box-border",
+		style: {
+			left: c.left - h,
+			top: c.top - f,
+			width: c.width + h + p,
+			height: c.height + f + m,
+			...i("rgba(249, 115, 22, 0.32)", f, p, m, h)
+		}
+	}), /* @__PURE__ */ t("div", {
+		className: "pointer-events-none fixed z-[999997] box-border",
+		style: {
+			left: c.left + y,
+			top: c.top + g,
+			width: Math.max(c.width - y - _, 0),
+			height: Math.max(c.height - g - v, 0),
+			backgroundColor: "rgba(59, 130, 246, 0.24)",
+			backgroundClip: "padding-box",
+			...i("rgba(34, 197, 94, 0.32)", b, x, S, C)
+		}
+	})] });
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,7 @@
+export type QaContrastBadgeProps = {
+    ratio: number;
+    needs: number;
+};
+/** The text's contrast against what is behind it, and whether it passes AA for its size. */
+declare const QaContrastBadge: ({ ratio, needs }: QaContrastBadgeProps) => import('react').JSX.Element;
+export default QaContrastBadge;

package/dist/qa/overlays/QaContrastBadge.mjs

@@ -0,0 +1,13 @@
+import e from "clsx";
+import { jsxs as t } from "react/jsx-runtime";
+//#region src/qa/overlays/QaContrastBadge.tsx
+var n = ({ ratio: n, needs: r }) => /* @__PURE__ */ t("span", {
+	className: e("rounded px-1 font-semibold", {
+		"bg-emerald-500/20 text-emerald-300": n >= r,
+		"bg-rose-500/25 text-rose-300": n < r
+	}),
+	title: `AA needs ${String(r)}:1 for this size`,
+	children: [n.toFixed(2), ":1"]
+});
+//#endregion
+export { n as default };

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

@@ -0,0 +1,10 @@
+import { PageBox } from '../usePageBox';
+export type QaGridProps = {
+    box: PageBox;
+};
+/**
+ * The layout grid over the page — the builder's, from the same definition — held to the viewport like a design tool's,
+ * across the page's box rather than the window's when the panel is docked beside it.
+ */
+declare const QaGrid: ({ box }: QaGridProps) => import('react').JSX.Element;
+export default QaGrid;

package/dist/qa/overlays/QaGrid.mjs

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { LAYOUT_GRIDS as t, displayModeAt as n, layoutGridLook as r } from "@plitzi/sdk-shared/style";
+//#region src/qa/overlays/QaGrid.tsx
+var i = ({ box: i }) => {
+	let a = r(t[n(i.viewportWidth)]);
+	return /* @__PURE__ */ e("div", {
+		"aria-hidden": "true",
+		className: "pointer-events-none fixed top-0 bottom-0 z-[999998]",
+		style: {
+			left: i.left,
+			width: i.width
+		},
+		children: /* @__PURE__ */ e("div", {
+			className: "absolute top-0 bottom-0 left-1/2 -translate-x-1/2",
+			style: {
+				width: a.width,
+				backgroundImage: a.backgroundImage,
+				boxShadow: a.boxShadow
+			}
+		})
+	});
+};
+//#endregion
+export { i as default };

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

@@ -0,0 +1,7 @@
+/**
+ * The inspector over the page: point at an element for its box and how it is set; click to keep it in the QA tab —
+ * the page's own click does not happen, so a link can be inspected without leaving; hold Alt over another for the
+ * distances between them. Escape puts it away.
+ */
+declare const QaInspector: () => import('react').JSX.Element;
+export default QaInspector;

package/dist/qa/overlays/QaInspector.mjs

@@ -0,0 +1,50 @@
+import e from "../QaContext.mjs";
+import t from "./QaBoxModel.mjs";
+import n from "./QaMeasure.mjs";
+import r from "./QaTooltip.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/QaInspector.tsx
+var u = () => {
+	let { pageRef: u, pinned: d, setPinned: f, setSetting: p } = i(e), [m, h] = o(), [g, _] = o(!1), [, v] = o(0);
+	a(() => {
+		let e = u.current;
+		if (!e) return;
+		let t = (t) => t instanceof Element && e.contains(t), n = 0, r = () => {
+			cancelAnimationFrame(n), n = requestAnimationFrame(() => v((e) => e + 1));
+		}, i = (e) => {
+			_(e.altKey), h(t(e.target) ? e.target : void 0);
+		}, a = (e) => {
+			t(e.target) && (e.preventDefault(), e.stopPropagation(), f(e.target));
+		}, o = (e) => {
+			_(e.altKey), e.type === "keydown" && e.key === "Escape" && p("inspect", !1);
+		};
+		return document.addEventListener("pointermove", i, !0), document.addEventListener("click", a, !0), document.addEventListener("keydown", o, !0), document.addEventListener("keyup", o, !0), document.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
+			cancelAnimationFrame(n), document.removeEventListener("pointermove", i, !0), document.removeEventListener("click", a, !0), document.removeEventListener("keydown", o, !0), document.removeEventListener("keyup", o, !0), document.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
+		};
+	}, [
+		u,
+		f,
+		p
+	]);
+	let y = d?.isConnected ? d : void 0, b = y?.getBoundingClientRect();
+	return /* @__PURE__ */ l(s, { children: [
+		b && /* @__PURE__ */ c("div", {
+			className: "pointer-events-none fixed z-[999998] box-border outline-2 outline-violet-500",
+			style: {
+				left: b.left,
+				top: b.top,
+				width: b.width,
+				height: b.height
+			}
+		}),
+		m && m !== y && /* @__PURE__ */ c(t, { element: m }),
+		y && m && m !== y && g && /* @__PURE__ */ c(n, {
+			from: y,
+			to: m
+		}),
+		m && !g && /* @__PURE__ */ c(r, { element: m })
+	] });
+};
+//#endregion
+export { u as default };

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

@@ -0,0 +1,7 @@
+export type QaMeasureProps = {
+    from: Element;
+    to: Element;
+};
+/** The distances between two elements, drawn and labelled — what a designer measures spacing with. */
+declare const QaMeasure: ({ from, to }: QaMeasureProps) => import('react').JSX.Element;
+export default QaMeasure;

package/dist/qa/overlays/QaMeasure.mjs

@@ -0,0 +1,39 @@
+import { distancesBetween as e } from "../inspect/measure.mjs";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/qa/overlays/QaMeasure.tsx
+var r = ({ from: r, to: i }) => {
+	let a = e(r.getBoundingClientRect(), i.getBoundingClientRect());
+	return /* @__PURE__ */ t("svg", {
+		className: "pointer-events-none fixed inset-0 z-[999998] h-full w-full overflow-visible",
+		"aria-hidden": "true",
+		children: a.map(({ x1: e, y1: r, x2: i, y2: a, length: o }) => /* @__PURE__ */ n("g", { children: [
+			/* @__PURE__ */ t("line", {
+				x1: e,
+				y1: r,
+				x2: i,
+				y2: a,
+				stroke: "#f43f5e",
+				strokeWidth: 1
+			}),
+			/* @__PURE__ */ t("rect", {
+				x: (e + i) / 2 - 16,
+				y: (r + a) / 2 - 9,
+				width: 32,
+				height: 18,
+				rx: 4,
+				fill: "#f43f5e"
+			}),
+			/* @__PURE__ */ t("text", {
+				x: (e + i) / 2,
+				y: (r + a) / 2 + 4,
+				textAnchor: "middle",
+				fill: "#ffffff",
+				fontSize: 11,
+				fontFamily: "ui-monospace, monospace",
+				children: o
+			})
+		] }, `${String(e)}-${String(r)}-${String(i)}-${String(a)}`))
+	});
+};
+//#endregion
+export { r as default };

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

@@ -0,0 +1,6 @@
+export type QaSwatchProps = {
+    colour: string;
+};
+/** A colour as a chip and its value. */
+declare const QaSwatch: ({ colour }: QaSwatchProps) => import('react').JSX.Element;
+export default QaSwatch;

package/dist/qa/overlays/QaSwatch.mjs

@@ -0,0 +1,11 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/qa/overlays/QaSwatch.tsx
+var n = ({ colour: n }) => /* @__PURE__ */ t("span", {
+	className: "inline-flex items-center gap-1",
+	children: [/* @__PURE__ */ e("span", {
+		className: "h-2.5 w-2.5 shrink-0 rounded-sm ring-1 ring-white/30",
+		style: { backgroundColor: n.split(" ")[0] }
+	}), n]
+});
+//#endregion
+export { n as default };

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

@@ -0,0 +1,6 @@
+/**
+ * The order the Tab key walks the page's controls in, numbered on each — where a keyboard user goes next, and whether
+ * that is where they would expect.
+ */
+declare const QaTabOrder: () => import('react').JSX.Element;
+export default QaTabOrder;

package/dist/qa/overlays/QaTabOrder.mjs

@@ -0,0 +1,39 @@
+import e from "../QaContext.mjs";
+import { tabOrderOf as t } from "../tabOrder.mjs";
+import { use as n, useEffect as r, useState as i } from "react";
+import { Fragment as a, jsx as o } from "react/jsx-runtime";
+//#region src/qa/overlays/QaTabOrder.tsx
+var s = 200, c = () => {
+	let { pageRef: c } = n(e), [l, u] = i([]), [, d] = i(0);
+	return r(() => {
+		let e = c.current;
+		if (!e) return;
+		let n = 0, r, i = () => {
+			clearTimeout(r), r = setTimeout(() => u(t(e)), s);
+		}, a = () => {
+			cancelAnimationFrame(n), n = requestAnimationFrame(() => d((e) => e + 1));
+		};
+		i();
+		let o = new MutationObserver(i);
+		return o.observe(e, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["tabindex", "disabled"]
+		}), document.addEventListener("scroll", a, !0), window.addEventListener("resize", i), () => {
+			clearTimeout(r), cancelAnimationFrame(n), o.disconnect(), document.removeEventListener("scroll", a, !0), window.removeEventListener("resize", i);
+		};
+	}, [c]), /* @__PURE__ */ o(a, { children: l.map((e, t) => {
+		let n = e.getBoundingClientRect();
+		return n.bottom < 0 || n.top > window.innerHeight ? null : /* @__PURE__ */ o("span", {
+			className: "pointer-events-none fixed z-[999998] flex h-[18px] min-w-[18px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-sky-600 px-1 font-mono text-[10px] font-semibold text-white shadow ring-2 ring-white/80",
+			style: {
+				left: n.left,
+				top: n.top
+			},
+			children: t + 1
+		}, t);
+	}) });
+};
+//#endregion
+export { c as default };

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

@@ -0,0 +1,6 @@
+export type QaTooltipProps = {
+    element: Element;
+};
+/** What the element is and how it is set, by the pointer: a browser inspector's label, for a designer. */
+declare const QaTooltip: ({ element }: QaTooltipProps) => import('react').JSX.Element | null;
+export default QaTooltip;

package/dist/qa/overlays/QaTooltip.mjs

@@ -0,0 +1,65 @@
+import e from "./QaContrastBadge.mjs";
+import t from "./QaSwatch.mjs";
+import { summarize as n } from "../inspect/describe.mjs";
+import { useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/qa/overlays/QaTooltip.tsx
+var o = 8, s = ({ element: s }) => {
+	let c = r(() => n(s), [s]);
+	if (!c) return null;
+	let l = s.getBoundingClientRect(), u = l.top < 120;
+	return /* @__PURE__ */ a("div", {
+		className: "pointer-events-none fixed z-[999999] flex max-w-[360px] flex-col gap-1 rounded-lg bg-zinc-900/95 px-2.5 py-2 font-mono text-[11px] leading-snug text-zinc-100 shadow-xl ring-1 ring-white/10",
+		style: {
+			left: Math.max(o, l.left),
+			...u ? { top: l.bottom + o } : { bottom: window.innerHeight - l.top + o }
+		},
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ i("span", {
+					className: "truncate font-semibold text-violet-300",
+					children: c.name
+				}), /* @__PURE__ */ a("span", {
+					className: "text-zinc-400",
+					children: [
+						c.width,
+						" × ",
+						c.height
+					]
+				})]
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "text-zinc-300",
+				children: [
+					c.font,
+					" / ",
+					c.lineHeight
+				]
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+				children: [
+					/* @__PURE__ */ i(t, { colour: c.colour }),
+					c.background && /* @__PURE__ */ i(t, { colour: c.background }),
+					c.contrast && /* @__PURE__ */ i(e, {
+						ratio: c.contrast.ratio,
+						needs: c.contrast.needs
+					})
+				]
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "text-zinc-400",
+				children: [
+					"padding ",
+					c.padding,
+					" · margin ",
+					c.margin,
+					c.gap && ` · gap ${c.gap}`
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { s as default };

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

@@ -0,0 +1,10 @@
+import { PageBox } from '../usePageBox';
+export type QaViewportProps = {
+    box: PageBox;
+};
+/**
+ * The window's size and the breakpoint whose rules the page shows at it — and the page's own width when the panel
+ * docked beside it makes the two differ, which is when a layout looks wrong for a reason that is not the layout.
+ */
+declare const QaViewport: ({ box }: QaViewportProps) => import('react').JSX.Element;
+export default QaViewport;