@plitzi/sdk-dev-tools 0.38.2 → 0.38.4

package/dist/qa/qaCss.mjs

@@ -1,11 +1,12 @@
 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";
+import { XRAY as r, XRAY_ATTRIBUTE as i, XRAY_MARKS as a } from "./xray.mjs";
+import { CHECKS as o } 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 {
+var s = `[${n}]`, c = ":is([data-type=\"heading\"], [data-type=\"text\"], [data-type=\"paragraph\"], [data-type=\"button\"], [data-type=\"link\"])", l = `
+${s} [data-plitzi-el] { outline: 1px dashed rgba(124, 92, 255, 0.5); outline-offset: -1px; }
+${s} [data-plitzi-el]:hover { outline: 1.5px solid #7c5cff; outline-offset: -1.5px; }
+${s} ${c}[data-plitzi-el]:hover { position: relative; }
+${s} ${c}[data-plitzi-el]:hover::after {
   content: attr(data-type) ' · ' attr(data-plitzi-el);
   position: absolute;
   left: -1px;
@@ -20,26 +21,26 @@ ${i} ${a}[data-plitzi-el]:hover::after {
   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 = {
+}`, u = (e) => [l, ...a.filter((t) => e === "all" || e === t).reverse().map((e) => `${s} [${i}~="${e}"] { outline: 1.5px solid ${r[e].colour}; outline-offset: -1.5px; }`)].join("\n"), d = `${s}, ${s} * { cursor: crosshair !important; }`, f = `${s} *, ${s} ::before, ${s} ::after { animation-play-state: paused !important; }`, p = (e) => e.map((e) => `${s} [${t}~="${e}"] { outline: 2px solid ${o[e].colour} !important; outline-offset: 1px !important; box-shadow: 0 0 0 4px color-mix(in srgb, ${o[e].colour} 22%, transparent) !important; }`).join("\n"), m = (e) => `plitzi-qa-${e}`, h = {
 	none: "none",
 	grayscale: "grayscale(1)",
-	protanopia: `url(#${u("protanopia")})`,
-	deuteranopia: `url(#${u("deuteranopia")})`,
-	tritanopia: `url(#${u("tritanopia")})`,
+	protanopia: `url(#${m("protanopia")})`,
+	deuteranopia: `url(#${m("deuteranopia")})`,
+	tritanopia: `url(#${m("tritanopia")})`,
 	blurred: "blur(2px)"
-}, f = {
+}, g = {
 	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) => {
+}, _ = (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)
+		t.inspect ? d : "",
+		t.xray ? u(t.xrayFilter) : "",
+		t.paused ? f : "",
+		t.vision === "none" ? "" : `${s} { filter: ${h[t.vision]}; }`,
+		p(n)
 	].filter(Boolean).join("\n");
 };
 //#endregion
-export { d as VISION_FILTER, f as VISION_MATRIX, p as qaCss, u as visionFilterId };
+export { h as VISION_FILTER, g as VISION_MATRIX, _ as qaCss, m as visionFilterId };

package/dist/qa/qaSettings.d.ts

@@ -1,3 +1,4 @@
+import { XrayFilter } from './xray';
 /**
  * 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,
@@ -12,14 +13,21 @@ export interface QaSettings {
     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;
+    /**
+     * Every element's box, its type and id when pointed at — and what the document wires to each, a condition, a flow,
+     * motion, a flag, marked and named on it.
+     */
+    xray: boolean;
+    /** The wiring the x-ray marks: every kind, one, or none — the boxes alone. */
+    xrayFilter: XrayFilter;
     /** 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;
+    /** Every animation at a quarter of its speed, to see how it moves rather than that it did. */
+    slowMotion: boolean;
     /** The page as a visitor who asked for less motion gets it — the SDK's own rule, by class. */
     reducedMotion: boolean;
     vision: VisionMode;
@@ -27,7 +35,7 @@ export interface QaSettings {
 }
 export declare const QA_DEFAULTS: QaSettings;
 /** The tools that are simply on or off. */
-export type QaSwitch = 'inspect' | 'grid' | 'outlines' | 'tabOrder' | 'viewport' | 'paused' | 'reducedMotion';
+export type QaSwitch = 'inspect' | 'grid' | 'xray' | 'tabOrder' | 'viewport' | 'paused' | 'slowMotion' | '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. */

package/dist/qa/qaSettings.mjs

@@ -9,10 +9,12 @@ var e = [
 ], t = {
 	inspect: !1,
 	grid: !1,
-	outlines: !1,
+	xray: !1,
+	xrayFilter: "all",
 	tabOrder: !1,
 	viewport: !1,
 	paused: !1,
+	slowMotion: !1,
 	reducedMotion: !1,
 	vision: "none",
 	checks: {
@@ -23,6 +25,6 @@ var e = [
 		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";
+}, n = (e) => e.inspect || e.grid || e.xray || e.tabOrder || e.viewport || e.paused || e.slowMotion || 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/xray.d.ts

@@ -0,0 +1,22 @@
+import { ElementDefinition } from '@plitzi/sdk-shared';
+/**
+ * What the document wires to an element that its box does not show: where its values come from, what it does when
+ * used, whether it may be hidden, how it moves and the flag it exists under. The x-ray draws every element's box — its
+ * type and id when pointed at — and marks each kind of wiring on it, which is what a tester needs to know before
+ * asking why something shows, moves or does what it does.
+ */
+export declare const XRAY_MARKS: readonly ["data", "visibility", "flows", "motion", "flag"];
+export type XrayMark = (typeof XRAY_MARKS)[number];
+/** The wiring the x-ray colours: every kind, one, or none — the boxes alone. */
+export type XrayFilter = XrayMark | 'all' | 'none';
+/** The attribute the x-ray marks an element with, its value the marks it carries. */
+export declare const XRAY_ATTRIBUTE = "data-plitzi-qa-xray";
+export declare const XRAY: Record<XrayMark, {
+    label: string;
+    description: string;
+    colour: string;
+}>;
+export type XrayCounts = Record<XrayMark, number>;
+export declare const NO_XRAY_COUNTS: XrayCounts;
+/** The marks an element's definition earns, in the order of {@link XRAY_MARKS}. */
+export declare const xrayMarksOf: (definition: ElementDefinition) => XrayMark[];

package/dist/qa/xray.mjs

@@ -0,0 +1,54 @@
+//#region src/qa/xray.ts
+var e = [
+	"data",
+	"visibility",
+	"flows",
+	"motion",
+	"flag"
+], t = "data-plitzi-qa-xray", n = {
+	data: {
+		label: "Bound to data",
+		description: "A value of it — a text, a style, a state — is read from a binding",
+		colour: "#0ea5e9"
+	},
+	visibility: {
+		label: "Shown on a condition",
+		description: "Whether it shows is bound, or it starts hidden",
+		colour: "#f59e0b"
+	},
+	flows: {
+		label: "Runs a flow",
+		description: "Something done to it starts an interaction",
+		colour: "#ec4899"
+	},
+	motion: {
+		label: "Moves",
+		description: "It arrives, or keeps moving, by its declared motion",
+		colour: "#10b981"
+	},
+	flag: {
+		label: "Behind a flag",
+		description: "It exists only while a feature flag says so",
+		colour: "#8b5cf6"
+	}
+}, r = {
+	data: 0,
+	visibility: 0,
+	flows: 0,
+	motion: 0,
+	flag: 0
+}, i = (e) => e === "visibility", a = (t) => {
+	let n = Object.entries(t.bindings ?? {}).flatMap(([e, t]) => t.filter((e) => e.enabled !== !1).map((t) => ({
+		category: e,
+		to: t.to
+	}))), r = n.some(({ category: e, to: t }) => e === "initialState" && i(t)), a = {
+		data: n.some(({ category: e, to: t }) => !(e === "initialState" && i(t))),
+		visibility: r || t.initialState?.visibility === !1,
+		flows: Object.values(t.interactions ?? {}).some((e) => e.enabled),
+		motion: t.motion?.enter !== void 0 || t.motion?.loop !== void 0,
+		flag: t.flag !== void 0
+	};
+	return e.filter((e) => a[e]);
+};
+//#endregion
+export { r as NO_XRAY_COUNTS, n as XRAY, t as XRAY_ATTRIBUTE, e as XRAY_MARKS, a as xrayMarksOf };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-dev-tools",
-  "version": "0.38.2",
+  "version": "0.38.4",
   "license": "AGPL-3.0",
   "files": [
     "dist"
@@ -674,6 +674,10 @@
       "types": "./dist/components/DevToolsPanel/tabs/QaViewer/QaProperty.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/QaViewer/QaProperty.mjs"
     },
+    "./components/DevToolsPanel/tabs/QaViewer/QaReplayButton": {
+      "types": "./dist/components/DevToolsPanel/tabs/QaViewer/QaReplayButton.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/QaViewer/QaReplayButton.mjs"
+    },
     "./components/DevToolsPanel/tabs/QaViewer/QaRescanButton": {
       "types": "./dist/components/DevToolsPanel/tabs/QaViewer/QaRescanButton.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/QaViewer/QaRescanButton.mjs"
@@ -698,6 +702,18 @@
       "types": "./dist/components/DevToolsPanel/tabs/QaViewer/QaVisionSelect.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/QaViewer/QaVisionSelect.mjs"
     },
+    "./components/DevToolsPanel/tabs/QaViewer/QaXray": {
+      "types": "./dist/components/DevToolsPanel/tabs/QaViewer/QaXray.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/QaViewer/QaXray.mjs"
+    },
+    "./components/DevToolsPanel/tabs/QaViewer/QaXrayBoxesRow": {
+      "types": "./dist/components/DevToolsPanel/tabs/QaViewer/QaXrayBoxesRow.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/QaViewer/QaXrayBoxesRow.mjs"
+    },
+    "./components/DevToolsPanel/tabs/QaViewer/QaXrayRow": {
+      "types": "./dist/components/DevToolsPanel/tabs/QaViewer/QaXrayRow.d.ts",
+      "import": "./dist/components/DevToolsPanel/tabs/QaViewer/QaXrayRow.mjs"
+    },
     "./components/DevToolsPanel/tabs/QaViewer/index": {
       "types": "./dist/components/DevToolsPanel/tabs/QaViewer/index.d.ts",
       "import": "./dist/components/DevToolsPanel/tabs/QaViewer/index.mjs"
@@ -1110,6 +1126,10 @@
       "types": "./dist/qa/overlays/QaViewport.d.ts",
       "import": "./dist/qa/overlays/QaViewport.mjs"
     },
+    "./qa/overlays/QaXrayTags": {
+      "types": "./dist/qa/overlays/QaXrayTags.d.ts",
+      "import": "./dist/qa/overlays/QaXrayTags.mjs"
+    },
     "./qa/qaCss": {
       "types": "./dist/qa/qaCss.d.ts",
       "import": "./dist/qa/qaCss.mjs"
@@ -1126,6 +1146,10 @@
       "types": "./dist/qa/usePageBox.d.ts",
       "import": "./dist/qa/usePageBox.mjs"
     },
+    "./qa/xray": {
+      "types": "./dist/qa/xray.d.ts",
+      "import": "./dist/qa/xray.mjs"
+    },
     "./scope/helpers": {
       "types": "./dist/scope/helpers.d.ts",
       "import": "./dist/scope/helpers.mjs"
@@ -1187,10 +1211,10 @@
   "dependencies": {
     "@plitzi/nexus": "^1.4.0",
     "@plitzi/plitzi-ui": "^1.6.29",
-    "@plitzi/sdk-navigation": "0.38.2",
-    "@plitzi/sdk-schema": "0.38.2",
-    "@plitzi/sdk-shared": "0.38.2",
-    "@plitzi/sdk-style": "0.38.2",
+    "@plitzi/sdk-navigation": "0.38.4",
+    "@plitzi/sdk-schema": "0.38.4",
+    "@plitzi/sdk-shared": "0.38.4",
+    "@plitzi/sdk-style": "0.38.4",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }