@plitzi/sdk-dev-tools 0.38.1 → 0.38.3

package/CHANGELOG.md

@@ -1,5 +1,146 @@
 # @plitzi/sdk-dev-tools
 
+## 0.38.3
+
+### Patch Changes
+
+- e047e1d: ## `plitzi upgrade`: a project brought up to its CLI
+
+  A project written by an older CLI had no way up but `plitzi create` in a scratch folder and a file-by-file comparison:
+  `skills update` brought the skills and nothing else, so the `check` and `shot` scripts they teach did not exist.
+  `plitzi upgrade` (also `update`) shows what this CLI writes today for what is the CLI's in the project, and `--write`
+  makes it. One part or several: `plitzi upgrade skills`, `plitzi upgrade files packages`.
+
+  - **`files`:** the CLI's machinery — `author.ts`, `main.ts`, the Playwright, TypeScript and lint configs, AGENTS.md. One
+    nobody changed since the CLI wrote it is replaced, a missing one added; one the project made its own is shown as a
+    diff and left, until `--take <file>` (or `all`). `plitzi create` now records what it wrote, by digest, in
+    `.plitzi/scaffold.json`; a project made before that sees every file that differs as its own.
+  - **`packages`:** `package.json` merged, never replaced — the scripts and dependencies it lacks added, `@plitzi/*`
+    raised to this version, then the install (`--no-install` to leave it). A script of the project's own stays.
+  - **`skills`:** `.claude/skills/plitzi-*` from the packages installed, each replaced whole, and the ones a newer CLI
+    writes added. `plitzi skills update` is `plitzi upgrade skills --write`.
+  - **`renames`:** a name a version renamed with no alias, at its file and line — `canTemplate` → `canSnippet`,
+    `authorTemplate` → `authorSnippet` and its kin (renamed only where imported from `@plitzi/sdk-authoring`) — renamed
+    with `--write`.
+
+  `npm run author` says when the skills or the CLI's files are older than the SDK installed, and `plitzi --version`
+  prints the CLI's.
+
+  ## Page checks that can be the definition of done
+
+  `inspectPage`, `plitzi check` and the scaffold's visual test failed pages that were whole, so an agent learnt to ignore
+  them:
+
+  - **A breakpoint hiding an element on purpose** — the desktop navigation on a phone, a bottom bar only a phone shows —
+    is no longer "not visible": an element whose `display` or `visibility` a breakpoint rule sets is checked at the width
+    it shows at.
+  - **A lazy image out of sight** waits whichever side it is out of: below the fold, as before, or beside the screen in a
+    carousel's track — cut off by any ancestor that clips, as the browser decides when to fetch it.
+  - **A plugin that draws nothing** says so: `drawsNothing: true` in its declaration (a clock that fires a flow), and its
+    handle is `boxless`, so no check waits for it on screen.
+
+  `plitzi check --json` and `PageReport` carry `issues` beside `problems`: each with its `code` (`element-hidden`,
+  `image-not-loaded`, `sideways-scroll`…), the `elementId` it is about and, in `check`, the `width`.
+
+  ## Authoring
+  - **A link's `content` names it.** `control-without-name` read only a link's `label`, so applying the
+    `content-attribute` suggestion as written turned every link into a warning.
+  - **`plitzi fix` writes `content-attribute`** where it has one reading: a button's or link's children that are only
+    `text(…)` and `fontAwesome({ icon })` become its own `content` and `icon` — the words kept as written, an import left
+    unused taken out. A child with an id, options or a class of the space's own stays, and is said. `npm run author`'s
+    `[fix]` line counts these too.
+  - **The recipes, the skill's examples and the catalog template** hold to the suggestions as well as the warnings, and
+    their tests say so: six recipes and the template wrote a link's or a button's words as a child.
+
+  ## Declared motion — in code, in the builder and over MCP
+
+  An element says how it arrives and whether it keeps moving with `motion`, and the SDK's stylesheet plays it — no
+  keyframes to write: `{ enter: 'fade-up', on: 'view' }` arrives as it scrolls into view, `{ enter: 'scale', stagger:
+60 }` brings its children one by one (a grid, a list's rows), `{ loop: 'float' }` keeps it moving. Enters: `fade`,
+  `fade-up`, `fade-down`, `slide-left`, `slide-right`, `scale`; loops: `float`, `pulse`, `spin`, `sway`; `duration`,
+  `delay`, `stagger` in ms. Opacity and the transforms only — an arrival on `translate`/`scale`, so it composes with an
+  element's own `transform` — a loop held until the page is live (`data-hydrated`), and none of it for a visitor who asked
+  for less motion. `view` follows the scroll where the browser has scroll timelines and plays on load where not.
+
+  - **Authoring:** `motion` on any factory; refused where it cannot play (`motion-invalid`, `motion-no-tag`), and carried
+    by `specFromSpace` and `compareSpaces`.
+  - **Builder:** a **Motion** tab in an element's tools: the presets as chips, a stage that plays the one pointed at (a
+    loop shown stronger than the page plays it, and saying so), when and how long, children one by one, and the choices
+    read back as a sentence — laid out side by side once the sidebar is wide enough. The canvas holds motion still while
+    editing; **▶** in the header (or **Play on the canvas** in the tab) plays it from the start, restarting what already
+    played, and an arrival tied to the scroll plays by the clock there, where it is usually in view already.
+  - **MCP:** `motion` on `upsertElement` and `patchElement`, checked the same way; the guide names the presets.
+  - **Schema:** `definition.motion` (`ElementMotion`, `@plitzi/sdk-shared/schema/motion` — the presets, `motionProblems`,
+    `motionAttributes`, `isMotionAnimation`, and each preset's frames, which the stylesheet is tested against), in both
+    init queries. **The platform's GraphQL schema has to declare `SpaceElementMotion`
+    before this version's builder or SDK queries it.**
+
+  ## Dev tools QA: x-ray and motion
+
+  The **QA** tab gains an **X-ray**: every element the document wires something to — bound to data, shown on a condition,
+  running a flow, moving, behind a flag — outlined in its colour and named on the page, read from the space's document by
+  the element's name; its legend counts each kind on the page and picks one to show alone. Beside **Pause**, **Slow**
+  plays every animation at a quarter of its speed and **Replay** plays the declared motion again from the start, without
+  reloading the page.
+
+  ## Plugins that draw
+
+  `useCanvas2d`, `useWebGL`, `useWebGL2` and `useAnimationFrame` (`@plitzi/plitzi-sdk`): a canvas sized to the device (at
+  most 2×), followed as it resizes, animating only while somebody can see it move — a live page, no reduced motion, the
+  tab in front, the canvas on screen — and one still frame otherwise (the builder included). `createShaderProgram`
+  compiles and links, and a shader that fails throws a `ShaderError` with the driver's log, printed as
+  `[plugin <type> "<id>"] fragment shader failed: …` instead of an empty canvas; `error` and `ready` say where it is.
+  `useReducedMotion` for the rest.
+
+  ## A space re-authored without a restart
+
+  A project's `npm run start:dev` restarts for its server code and its plugins only: a save to the space is re-authored
+  in a process of its own and every open page loads again (`server.reloadPages()` over an SSE endpoint, on with
+  `createServer({ devReload: true })` — never by `devMode` alone, since every open page holds a connection for it); an
+  edit authoring refuses is printed and the page keeps the last space that authored. A shutdown also ends WebSockets at
+  once (`1001`, going away) rather than waiting out the grace — the ten seconds a restart used to wait on an open page.
+
+  ## Checks and authoring, from the stripe.com experiment
+  - **A component's instance** is found by its own name: its root carries `data-plitzi-instance`, and the instance's
+    handle selects it — `inspectPage` no longer reports every named instance as missing.
+  - **Hidden at this width on purpose** — the burger on a desktop, the desktop menu on a phone — is listed apart
+    (`hiddenAtWidth`, and a dim line under `plitzi check`'s ✓) rather than as a problem.
+  - **An element whose every child is conditional** — four flyouts in one list, each opening on the state that names
+    it — is conditional too: at rest it shows nothing, and that is it working.
+  - **A carousel that scrolls by itself** (`overflow-x: auto`) is not the page scrolling sideways; the page's own pane
+    still is.
+  - **Templates:** `{{ state.faq ?? -1 }}` — a sign on the right of `??` — reads.
+  - **A plugin attribute named as an element field** (`variant`, `class`, `id`…) is warned about
+    (`plugin-attribute-reserved`): a factory never hands it to the plugin. A `variant` no class or type style declares is
+    `unknown-variant`.
+  - **Lists:** a list with `items` renders as the `<ul>` (or `<ol>`) its `subType` says — it was a `<div>` — with no
+    markers and the same spacing, so a page looks as it did; the builder offers the list type for it too. Its rows are
+    `<li>`s: `list-row-not-li` warns of one that is not — a plain container is made one by `fixSpace`, a link or a button
+    is wrapped — and the recipes, the catalog template and the docs write rows as `listItem`.
+  - **CSS:** `mask-size`, `mask-position`, `mask-repeat`, `mask-composite`, `-webkit-mask-image`,
+    `-webkit-background-clip`, `box-decoration-break` and `-webkit-box-decoration-break`.
+  - **`plitzi shot`:** `--clip <element>`, `--scroll-to <element>` and `--viewport`; `--frames` takes the same framing.
+  - **SVG from files:** `svgFile` and `svgFiles` (`@plitzi/sdk-authoring/node`) read a logo or a folder of them,
+    compacted (`compactSvg`, also on the main entry), instead of strings in the space's source.
+  - The plugin scaffolds say that an inline `style` on `RootElement` outranks the element's classes.
+
+- Updated dependencies [e047e1d]
+  - @plitzi/sdk-navigation@0.38.3
+  - @plitzi/sdk-schema@0.38.3
+  - @plitzi/sdk-shared@0.38.3
+  - @plitzi/sdk-style@0.38.3
+
+## 0.38.2
+
+### Patch Changes
+
+- v0.38.2
+- Updated dependencies
+  - @plitzi/sdk-navigation@0.38.2
+  - @plitzi/sdk-schema@0.38.2
+  - @plitzi/sdk-shared@0.38.2
+  - @plitzi/sdk-style@0.38.2
+
 ## 0.38.1
 
 ### Patch Changes

package/dist/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/ElementDetails.mjs

@@ -4,15 +4,15 @@ import n from "../DetailsRuntime/index.mjs";
 import { useMemo as r } from "react";
 import { useCommonStore as i } from "@plitzi/sdk-shared/store";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@plitzi/plitzi-ui/ContainerTabs";
-import { treeOf as c } from "@plitzi/sdk-schema/helpers/components";
+import { treeOf as s } from "@plitzi/sdk-schema/helpers/components";
+import c from "@plitzi/plitzi-ui/ContainerTabs";
 //#region src/components/DevToolsPanel/tabs/ElementsViewer/components/ElementDetails/ElementDetails.tsx
 var l = [
 	{ label: "Runtime" },
 	{ label: "Definition" },
 	{ label: "Attributes" }
 ], u = ({ id: u, onSelectElement: d }) => {
-	let [[f, p]] = i(["schema.flat", "schema.components"]), m = r(() => c({
+	let [[f, p]] = i(["schema.flat", "schema.components"]), m = r(() => s({
 		flat: f,
 		components: p
 	}, u)?.flat[u], [
@@ -20,22 +20,22 @@ var l = [
 		p,
 		u
 	]);
-	return /* @__PURE__ */ o(s, {
+	return /* @__PURE__ */ o(c, {
 		className: "w-full grow gap-4 overflow-hidden p-4",
 		children: [
-			/* @__PURE__ */ a(s.Tabs, { items: l }),
-			/* @__PURE__ */ a(s.TabContent, {
+			/* @__PURE__ */ a(c.Tabs, { items: l }),
+			/* @__PURE__ */ a(c.TabContent, {
 				className: "flex-col overflow-y-auto",
 				children: /* @__PURE__ */ a(n, { id: u })
 			}),
-			/* @__PURE__ */ a(s.TabContent, {
+			/* @__PURE__ */ a(c.TabContent, {
 				className: "flex-col overflow-y-auto",
 				children: /* @__PURE__ */ a(t, {
 					definition: m?.definition,
 					onSelectElement: d
 				})
 			}),
-			/* @__PURE__ */ a(s.TabContent, {
+			/* @__PURE__ */ a(c.TabContent, {
 				className: "overflow-y-auto",
 				children: /* @__PURE__ */ a(e, { attributes: m?.attributes })
 			})

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

@@ -0,0 +1,6 @@
+/**
+ * Plays the page's declared motion again from the start — its arrivals, its loops — without loading the page again,
+ * which would also lose whatever state the tester had brought it to.
+ */
+declare const QaReplayButton: () => import('react').JSX.Element;
+export default QaReplayButton;

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

@@ -0,0 +1,21 @@
+import e from "../../../../qa/QaContext.mjs";
+import { use as t, useCallback as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { isMotionAnimation as a } from "@plitzi/sdk-shared/schema/motion";
+//#region src/components/DevToolsPanel/tabs/QaViewer/QaReplayButton.tsx
+var o = () => {
+	let { pageRef: o } = t(e), s = n(() => {
+		o.current?.getAnimations({ subtree: !0 }).filter(a).forEach((e) => {
+			e.cancel(), e.play();
+		});
+	}, [o]);
+	return /* @__PURE__ */ i("button", {
+		type: "button",
+		title: "Play the page's arrivals and loops again from the start",
+		className: "flex h-6 shrink-0 cursor-pointer items-center gap-1.5 rounded-md border border-zinc-200 px-2 font-medium whitespace-nowrap text-zinc-600 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800",
+		onClick: s,
+		children: [/* @__PURE__ */ r("i", { className: "fa-solid fa-rotate-left text-[10px]" }), "Replay"]
+	});
+};
+//#endregion
+export { o as default };

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

@@ -1,3 +1,6 @@
-/** Every tool that draws over the page, in one row that wraps: the inspector first, then layout, motion and colour. */
+/**
+ * Every tool that draws over the page, in one row that wraps: the inspector first, then layout and what the document
+ * wires, motion, and colour.
+ */
 declare const QaToolbar: () => import('react').JSX.Element;
 export default QaToolbar;

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

@@ -1,58 +1,72 @@
 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, {
+		/* @__PURE__ */ i(n, {
 			setting: "outlines",
 			label: "Outlines",
 			icon: "fa-regular fa-square",
 			title: "Every element's box"
 		}),
-		/* @__PURE__ */ r(t, {
+		/* @__PURE__ */ i(n, {
+			setting: "xray",
+			label: "X-ray",
+			icon: "fa-solid fa-x-ray",
+			title: "What is bound to data, shown on a condition, runs a flow, moves or sits behind a flag — named on the page"
+		}),
+		/* @__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,3 @@
+/** What the x-ray marks on the page, in its colours, with how many of each the page has. */
+declare const QaXray: () => import('react').JSX.Element;
+export default QaXray;

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

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

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,27 @@ ${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) => [`${s} [data-plitzi-el] { outline: 1px dashed rgba(127, 127, 127, 0.35); outline-offset: -1px; }`, ...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.outlines ? l : "",
+		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,
@@ -14,12 +15,18 @@ export interface QaSettings {
     grid: boolean;
     /** Every element's box, and its type and id when pointed at. */
     outlines: boolean;
+    /** What the document wires to each element — data, a condition, a flow, motion, a flag — marked and named on it. */
+    xray: boolean;
+    /** The one kind of wiring the x-ray shows, or all of them. */
+    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 +34,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' | 'outlines' | '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

@@ -10,9 +10,12 @@ var e = [
 	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 +26,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.outlines || 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,20 @@
+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 marks each on the page, 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];
+export type XrayFilter = XrayMark | 'all';
+/** 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.1",
+  "version": "0.38.3",
   "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,14 @@
       "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/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 +1122,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 +1142,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 +1207,10 @@
   "dependencies": {
     "@plitzi/nexus": "^1.4.0",
     "@plitzi/plitzi-ui": "^1.6.29",
-    "@plitzi/sdk-navigation": "0.38.1",
-    "@plitzi/sdk-schema": "0.38.1",
-    "@plitzi/sdk-shared": "0.38.1",
-    "@plitzi/sdk-style": "0.38.1",
+    "@plitzi/sdk-navigation": "0.38.3",
+    "@plitzi/sdk-schema": "0.38.3",
+    "@plitzi/sdk-shared": "0.38.3",
+    "@plitzi/sdk-style": "0.38.3",
     "@uiw/react-json-view": "^2.0.0-alpha.43",
     "clsx": "^2.1.1"
   }