@plitzi/sdk-dev-tools 0.37.9 → 0.38.1

package/dist/qa/overlays/QaViewport.mjs

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { displayModeAt as n } from "@plitzi/sdk-shared/style";
+//#region src/qa/overlays/QaViewport.tsx
+var r = ({ box: r }) => {
+	let i = Math.round(r.width) < r.viewportWidth;
+	return /* @__PURE__ */ t("div", {
+		className: "pointer-events-none fixed top-2 z-[999999] -translate-x-1/2 rounded-full bg-zinc-900/90 px-3 py-1 font-mono text-[11px] whitespace-nowrap text-white shadow-lg ring-1 ring-white/10",
+		style: { left: r.left + r.width / 2 },
+		children: [
+			r.viewportWidth,
+			" × ",
+			r.viewportHeight,
+			" ·",
+			" ",
+			/* @__PURE__ */ e("span", {
+				className: "text-violet-300",
+				children: n(r.viewportWidth)
+			}),
+			i && /* @__PURE__ */ t("span", {
+				className: "text-zinc-400",
+				children: [" · page ", Math.round(r.width)]
+			})
+		]
+	});
+};
+//#endregion
+export { r as default };

package/dist/qa/qaCss.d.ts

@@ -0,0 +1,12 @@
+import { QaSettings, VisionMode } from './qaSettings';
+/** The id of the SVG filter a vision mode needs, for the ones a CSS function cannot say. */
+export declare const visionFilterId: (mode: VisionMode) => string;
+/** How each mode is drawn on the page's box. */
+export declare const VISION_FILTER: Record<VisionMode, string>;
+/**
+ * The colour matrices of the three dichromacies, as an SVG `feColorMatrix` takes them — the widely used approximations
+ * of how each sees, good enough to ask whether two states of a page can be told apart.
+ */
+export declare const VISION_MATRIX: Record<'protanopia' | 'deuteranopia' | 'tritanopia', string>;
+/** The rules for what is on; empty when nothing that needs a rule is. */
+export declare const qaCss: (settings: QaSettings) => string;

package/dist/qa/qaCss.mjs

@@ -0,0 +1,45 @@
+import { QA_CHECKS as e, QA_FINDING_ATTRIBUTE as t, QA_PAGE_ATTRIBUTE as n } from "./qaSettings.mjs";
+import { CHECKS as r } from "./checks/index.mjs";
+//#region src/qa/qaCss.ts
+var i = `[${n}]`, a = ":is([data-type=\"heading\"], [data-type=\"text\"], [data-type=\"paragraph\"], [data-type=\"button\"], [data-type=\"link\"])", o = `
+${i} [data-plitzi-el] { outline: 1px dashed rgba(124, 92, 255, 0.5); outline-offset: -1px; }
+${i} [data-plitzi-el]:hover { outline: 1.5px solid #7c5cff; outline-offset: -1.5px; }
+${i} ${a}[data-plitzi-el]:hover { position: relative; }
+${i} ${a}[data-plitzi-el]:hover::after {
+  content: attr(data-type) ' · ' attr(data-plitzi-el);
+  position: absolute;
+  left: -1px;
+  bottom: 100%;
+  z-index: 2147483000;
+  padding: 1px 6px;
+  border-radius: 4px 4px 0 0;
+  background-color: #7c5cff;
+  color: #ffffff;
+  font: 500 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+  pointer-events: none;
+}`, s = `${i}, ${i} * { cursor: crosshair !important; }`, c = `${i} *, ${i} ::before, ${i} ::after { animation-play-state: paused !important; }`, l = (e) => e.map((e) => `${i} [${t}~="${e}"] { outline: 2px solid ${r[e].colour} !important; outline-offset: 1px !important; box-shadow: 0 0 0 4px color-mix(in srgb, ${r[e].colour} 22%, transparent) !important; }`).join("\n"), u = (e) => `plitzi-qa-${e}`, d = {
+	none: "none",
+	grayscale: "grayscale(1)",
+	protanopia: `url(#${u("protanopia")})`,
+	deuteranopia: `url(#${u("deuteranopia")})`,
+	tritanopia: `url(#${u("tritanopia")})`,
+	blurred: "blur(2px)"
+}, f = {
+	protanopia: "0.567 0.433 0 0 0  0.558 0.442 0 0 0  0 0.242 0.758 0 0  0 0 0 1 0",
+	deuteranopia: "0.625 0.375 0 0 0  0.7 0.3 0 0 0  0 0.3 0.7 0 0  0 0 0 1 0",
+	tritanopia: "0.95 0.05 0 0 0  0 0.433 0.567 0 0  0 0.475 0.525 0 0  0 0 0 1 0"
+}, p = (t) => {
+	let n = e.filter((e) => t.checks[e]);
+	return [
+		t.inspect ? s : "",
+		t.outlines ? o : "",
+		t.paused ? c : "",
+		t.vision === "none" ? "" : `${i} { filter: ${d[t.vision]}; }`,
+		l(n)
+	].filter(Boolean).join("\n");
+};
+//#endregion
+export { d as VISION_FILTER, f as VISION_MATRIX, p as qaCss, u as visionFilterId };

package/dist/qa/qaSettings.d.ts

@@ -0,0 +1,38 @@
+/**
+ * What the QA tab can turn on over a running page — for whoever checks a build before it ships: a designer lining
+ * things up, a tester looking for what breaks. Kept in this browser, and only ever offered where the dev tools are,
+ * which is only where debugging is authorized.
+ */
+export type VisionMode = 'none' | 'grayscale' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'blurred';
+/** What the checks look for, in the order the tab lists them. */
+export declare const QA_CHECKS: readonly ["overflow", "names", "targets", "contrast", "images", "headings"];
+export type QaCheck = (typeof QA_CHECKS)[number];
+export interface QaSettings {
+    /** Point at an element for its box, type and style; click to keep it in the tab; Alt to measure to another. */
+    inspect: boolean;
+    /** The columns the page is laid out on (`@plitzi/sdk-shared/style`'s layout grid), over it. */
+    grid: boolean;
+    /** Every element's box, and its type and id when pointed at. */
+    outlines: boolean;
+    /** The order the Tab key walks the page's controls in, numbered on them. */
+    tabOrder: boolean;
+    /** The viewport's size and the breakpoint whose rules show. */
+    viewport: boolean;
+    /** Every animation held where it is, to look at a moment of it. */
+    paused: boolean;
+    /** The page as a visitor who asked for less motion gets it — the SDK's own rule, by class. */
+    reducedMotion: boolean;
+    vision: VisionMode;
+    checks: Record<QaCheck, boolean>;
+}
+export declare const QA_DEFAULTS: QaSettings;
+/** The tools that are simply on or off. */
+export type QaSwitch = 'inspect' | 'grid' | 'outlines' | 'tabOrder' | 'viewport' | 'paused' | 'reducedMotion';
+/** Whether any of it is on: the page is marked only while something is. */
+export declare const isQaActive: (settings: QaSettings) => boolean;
+/** The class the SDK's stylesheet stills every animation under, as its `prefers-reduced-motion` rule does. */
+export declare const REDUCED_MOTION_CLASS = "plitzi-reduced-motion";
+/** The attribute the page's box is marked with while QA is on: what every rule here is scoped to. */
+export declare const QA_PAGE_ATTRIBUTE = "data-plitzi-qa-page";
+/** The attribute a check marks what it found with, its value the checks that found it. */
+export declare const QA_FINDING_ATTRIBUTE = "data-plitzi-qa-finding";

package/dist/qa/qaSettings.mjs

@@ -0,0 +1,28 @@
+//#region src/qa/qaSettings.ts
+var e = [
+	"overflow",
+	"names",
+	"targets",
+	"contrast",
+	"images",
+	"headings"
+], t = {
+	inspect: !1,
+	grid: !1,
+	outlines: !1,
+	tabOrder: !1,
+	viewport: !1,
+	paused: !1,
+	reducedMotion: !1,
+	vision: "none",
+	checks: {
+		overflow: !1,
+		names: !1,
+		targets: !1,
+		contrast: !1,
+		images: !1,
+		headings: !1
+	}
+}, n = (e) => e.inspect || e.grid || e.outlines || e.tabOrder || e.viewport || e.paused || e.reducedMotion || e.vision !== "none" || Object.values(e.checks).some(Boolean), r = "plitzi-reduced-motion", i = "data-plitzi-qa-page", a = "data-plitzi-qa-finding";
+//#endregion
+export { e as QA_CHECKS, t as QA_DEFAULTS, a as QA_FINDING_ATTRIBUTE, i as QA_PAGE_ATTRIBUTE, r as REDUCED_MOTION_CLASS, n as isQaActive };

package/dist/qa/tabOrder.d.ts

@@ -0,0 +1,2 @@
+/** The order the Tab key walks the page's controls in: positive `tabindex` first, by value, then the page's order. */
+export declare const tabOrderOf: (page: Element) => Element[];

package/dist/qa/tabOrder.mjs

@@ -0,0 +1,8 @@
+import { INTERACTIVE as e, isDrawn as t } from "./checks/dom.mjs";
+//#region src/qa/tabOrder.ts
+var n = (n) => {
+	let r = [...n.querySelectorAll(`${e}, [tabindex]`)].filter((e) => Number(e.getAttribute("tabindex") ?? 0) >= 0 && t(e) && !e.matches(":disabled")), i = (e) => Number(e.getAttribute("tabindex") ?? 0);
+	return [...r.filter((e) => i(e) > 0).sort((e, t) => i(e) - i(t)), ...r.filter((e) => i(e) === 0)];
+};
+//#endregion
+export { n as tabOrderOf };

package/dist/qa/usePageBox.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+export interface PageBox {
+    left: number;
+    width: number;
+    viewportWidth: number;
+    viewportHeight: number;
+}
+/**
+ * Where the page sits across the window, and the window's size: the page is narrower than the window while the panel
+ * is docked beside it, and its breakpoints still follow the window, as its media queries do.
+ */
+declare const usePageBox: (pageRef: RefObject<HTMLElement | null>) => PageBox;
+export default usePageBox;

package/dist/qa/usePageBox.mjs

@@ -0,0 +1,23 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/qa/usePageBox.ts
+var n = (e) => {
+	let t = typeof window > "u" ? 0 : window.innerWidth, n = typeof window > "u" ? 0 : window.innerHeight, r = e?.getBoundingClientRect();
+	return {
+		left: r?.left ?? 0,
+		width: r?.width ?? t,
+		viewportWidth: t,
+		viewportHeight: n
+	};
+}, r = (r) => {
+	let [i, a] = t(() => n(r.current));
+	return e(() => {
+		let e = r.current, t = () => a(n(e));
+		t(), window.addEventListener("resize", t);
+		let i = e ? new ResizeObserver(t) : void 0;
+		return e && i?.observe(e), () => {
+			window.removeEventListener("resize", t), i?.disconnect();
+		};
+	}, [r]), i;
+};
+//#endregion
+export { r as default };